CSE 154

Lecture 4: More CSS - Common Styles and Selectors

Agenda

• Administrivia
• CSS
  • Review: Terminology and Syntax
  • id and class attributes
  • Selectors (context, psuedo, etc.)
  • Overview of Useful CSS Properties

Administrivia

HW1 is out

CP1 due tonight tomorrow

Consider opting in for the CP1 Showcase!

Use the extra CP day to try anything you want to practice more before HW1 (e.g. semantic tags and CSS usage)

Lecture Objectives

By the end of this lecture, you should be able to:

• Know how to assign colors on webpages using different encodings (hex, rgb, names)
• Know how to use your Chrome/Firefox inspector tool to test CSS properties
• Know how to set font properties in CSS and how/why to use defaut fonts when the first font listed is unavailable
• Know how to import and use a Google font in CSS
• Understand the differences between classes/ids
• Know how to select different elements in CSS using ids/class, grouped selectors, and context selectors

"Gots and Needs" Notecards

On one side of the notecard, write what you feel like you've "got" from lecture/section/lab/CPs.

On the other side of the notecard, write 1-2 things you feel you still need to understand, or that would help you understand this material.

Review: Basic CSS Rule Syntax

selector {
  property: value;
  property: value;
  ...
  property: value;
}

CSS (template)

p {
  color: red;
  font-family: sans-serif;
} 

CSS (example)

A CSS file consists of one or more "rule sets"

A rule selector specifies HTML element(s) and applies style properties

Terminology Clarifications

h1, p {
  color: blue;
  background-color: rgb(30, 30, 30);
}

h1 {
  font-style: italic;
}
        
nav ul {
  list-style-type: none;
  color: gray;
}

CSS

Methods for Styling Different Elements in CSS

• Grouping
• ids and classes
• Context selectors
• psuedo-selectors

Grouping Styles

p, h1, h2 {
  color: green;
}

h2 {
  background-color: yellow;
}

CSS

A style can select multiple elements separated by commas

The individual elements can also have their own styles (like h2 above)

Body Styles

body {
  font-size: 16pt;
}

CSS

To apply a style to the entire body of your page, write a selector for the body (saves you from manually applying a style to each element)

* Selector

* {
  font-size: 14pt;
}

section * {
  border: 2pt solid black;
}

CSS

To select all elements on the page, you can use the * selector.

To select all elements which are children of a parent element, you can use the * selector inside of the parent.

You should in general avoid using this selector though if 1) there is a more specific selector you can use or 2) you end up overriding the styles later.

id and class

id

Unique identifier for an element

Only allowed one id value per page

Each element can only have one id

class

Non-unique grouping attribute to share with many elements

Many elements (even of different types) can share the same class

Each element can have many different classes

Example

<p id="product-12345" class="product">Puppy calendar</p>
<p id="product-133337" class="product">Cat mug</p>

HTML

Both paragraphs have the same class (product), but each has its own ID

Why are these useful?

Gives you another way to talk about your content in CSS (and later in JavaScript)

#my-id {
  /* ... properties ... */
}

.my-class {
  /* ... other properties ... */
}

A mnemonic: .java programs compile into .class files so...
try to remember dot (.) class and hash (#) id

id or class?

How do you decide whether to use an id or a class?

Probably prefer class. You can only use an id once per page, so it's good to be a little stingy with them. classes are free.

On the other hand, if you know you are making a unique section or page element (e.g., submit button), id is the way to go.

A caveat:

It's easy to just make classes for everything, but don't forget that HTML is made to describe your content. So, prefer a <p> tag over a class named paragraph.

CSS Context Selectors

Context selectors are used to selectively style page elements

Examples:

selector1 selector2 {
  properties
}

CSS

... applies the given properties to selector2 only if it is inside a selector1 on the page

selector1 > selector2 {
  properties
}

CSS

... applies the given properties to selector2 only if it is directly inside a selector1 on the page with no tags in between

Check out this neat game for some motivating practice :)

Context Selector Example (without >)

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
  <li>The <strong>best</strong> prices in town!</li>
  <li><em><strong>Act</strong></em> while supplies last!</li>
</ul>

HTML

li strong { text-decoration: underline; }

CSS

Produces:

Context Selector Example (with >)

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
  <li>The <strong>best</strong> prices in town!</li>
  <li><em><strong>Act</strong></em> while supplies last!</li>
</ul>

HTML

li > strong { text-decoration: underline; }

CSS

Produces:

output

CSS pseudo-classes

          a:link    { color: #FF0000; } /* unvisited link */
a:visited { color: #00FF00; } /* visited link */
a:hover   { color: #FF00FF; } /* mouse over link */

CSS

CSS Comments: /* ... */

/* This is a comment.
   It can span many lines in a CSS file. */
p {
  color: red;
  background-color: aqua;
}

CSS

CSS (like HTML) is usually not commented as much as code such as Java

The // single-line comment is NOT supported in CSS

The <-- ... --> HTML comment is also NOT supported in CSS

W3C CSS Validator

<p>
  <a target="_blank" href="http://jigsaw.w3.org/css-validator/">
    <img src="http://jigsaw.w3.org/css-validator/images/vcss"
         alt="Valid CSS!" />
  </a>
</p>

HTML

output

Checks your CSS to make sure it meets the official CSS specifications

More picky than the web browser, which may render malformed CSS correctly

Embedding style sheets: <style> (BAD)

<head>
  <style type="text/css">
    p { font-family: sans-serif; color: red; }
    h2 { background-color: yellow; }
  </style>
</head>

HTML

CSS code can be embedded within the head of an HTML file

This is bad style; DO NOT DO THIS (why?)

Inline styles: the style attribute (BAD)

<p style="font-family: sans-serif; color: red">
This is a paragraph</p>

HTML

Higher precedence than embedded or linked styles

Used for one-time overrides and styling a particular element

This is bad style; DO NOT DO THIS (why?)

Content vs. Presentation

HTML is for content; what is on the page (heading; list; code; etc.)

CSS is for presentation; how to display the page (bold; centered; 20px margin, etc.)

Keeping content separate from presentation is a very important web design principle

If the HTML contains no styles, its entire appearance can be changed by swapping .css files (recall CSSZenGarden)