CSS: Selectors

Anatomy of a Website

Your Content

+ HTML: Structure

+ CSS: Presentation

= Your Website

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

CSS: What is it?

CSS = Cascading Style Sheets

CSS is a "style sheet language" that lets you style the elements on your page.

CSS is embedded inside HTML, but it is not HTML itself.

CSS: What can it do?

text

color

size

position

Want proof? Check out CSS Zen Garden

Anatomy of CSS

CSS consists of "style rules". Each style rule consists of a "selector" and "declarations" of property-value pairs:

 
selector {
  property: value;
  property: value;
}

body {
  color: yellow;
  background-color: black;
}

CSS in HTML

CSS can be embedded in HTML in several ways. One way is to include all CSS in a style tag, usually inside the head tag:

<html>
<head>
<style>
body {
  color: yellow;
  background-color: black;
}
</style>
</head>

Selectors

The Selector

selector {
  property: values;
}

The selector is used to select which elements in the HTML page will be given the styles inside the curly braces.

Types of Selectors

element
id
class
position in document

Types of Selectors: element

p {
}

Selects all p elements in the entire document.

Types of Selectors: id

#header {
}

Selects any element with the id “header", e.g.

<p id="header"></p>

Element ids are unique, so that should only be one element.

The "#" is how you tell CSS "this is an id."

Types of Selectors: class

.warning {
  color: red;
}

Selects any element with the class name “warning”, e.g.

<p class="warning"></p>

Multiple elements can have the same class name.

The "." is how you tell CSS "this is a class name."

Types of Selectors: class

An element can have only 1 id but multiple classes, so you can take advantage of that for greater flexibility.

.intro {
  background-color: blue;
}
.desc {
  color: red;
}

<p class="desc intro">hi</p> -> hi
<p class="desc">hi</p> -> hi
<p class="intro">hi</p> -> hi

Real world example: button classes

Types of selectors: position in document

ul em {
  color: yellow;
}

Selects any em element that's a descendant of a ul element.

The " " (space) is how you say "find a descendant."

<body>
 <ul>
  <li><em>Hi</em></li>
 </ul>
 <p><em>Bye</em></p>
</body>

Types of selectors: id + position

#related-brands li {
  color: gray;
}

Selects any <li> element that is a descendant of any element with an id that equals "related-brands."

<ul id="related-brands">
  <li>Rice Krispies</li>
  <li>NutriGrain</li>
</ul>

Tip: Try it out in the Selectoracle.

Types of selectors: element + class

li.special {
  color: yellow;
}

Selects any li element with a class attribute that contains the word "special".

<ul>
  <li>Rice Krispies</li>
  <li class="special">NutriGrain</li>
</ul>

Warning: If you place a space after the ".", it'll look for descendants of li with class of "special."

Types of selectors: element vs. class

The difference between the "." and the space is very important!

li.a {
  color: yellow;
}

li a {
  color: red;
}

<ul>
  <li><a href="#rice">Rice Krispies</a></li>
  <li class="a">NutriGrain</li>
</ul>

Types of selectors: ALL!

#header .content form p em.required {
  color: white;
}

Selects any em element with a class attribute that contains the word "required" that is a descendant of a p element that is a descendant of a form element that is a descendant of an element with a class attribute that contains the word "content" that is a descendant of any element with an id attribute that equals "header".

Types of selectors: pseudo classes

A set of "pseudo classes" can style anchor elements depending on their state.

a:link { /* unvisited link */
  color: red;
}
a:visited { /* visited link */
  color: blue;
} 
a:hover { /* moused over link */
  color: green;
}  
a:active { /* current link */
  color: purple;
} 
a:focus {  /* focused link */
  color: purple;
}

Grouping selectors

You can group selectors to apply the same style to all of the selectors by separating them with commas:

a:hover, a:active, a:focus {
  background-color: yellow;
}

The selector: Cascade rules

Generally:

id is more specific than a class, class is more specific than element.
the longer the selector, the more specific it is
If style rules are equally specific, the last one wins!

Example:

#a #b h1 { color: red; } /* winner! */
#a h1 { color: blue; }

CSS Style

Coding Conventions

It is possible to write CSS like this:

selector{property:values}selector{property:values}

But it's preferred to write it like this:

selector {
  property: values;
}

selector {
  property: values;
}

Notice: space between "selector" and "{", 2 spaces before property-value pair, space after "property:", semi-colon after "values", line between rules.

Naming Conventions

Some rules to follow when making IDs and class names:

Describe the content, not the presentation ("warning", not "redbox").
Use all lowercase, and hyphens when needed for readability ("header-info", not "headerInfo").
Use hyphens to show that a class or ID is part of something else. (e.g. "footer", "footer-copyright", and "footer-logo").

Comments

Comments will be ignored by the browser and are useful for documenting your styles to other humans or commenting out rules.

/* Comment here */
p 
{
  margin: 1em; /* Comment here */
  padding: 2em; 
  /* color: white; */
  background-color: blue;
}

/*
  multi-line 
  comment here
*/