Class Notes


Advanced CSS

CSS Selectors

CSS Selectors are patterns used to determine which style rules apply to elements.

Universal selector (*) is used to select "any element":
* {
margin:0px;
}

/* This would make EVERY element on the page have a margin of 0px */

Type selectors are used to specify an element type:
p {
margin-bottom:10px;
}
/* This would make all paragraphs have a 10 pixel bottom margin */

img {
border: 3px;
}
/* This would make ALL images have a 3px border */
ID selectors target an element with a specific id:
#myPhoto {
border: 20px solid pink;
}
/* This would make the element with id="myPhoto" have 20px pink border */
div#myPhoto { padding: 5px; } /* This would make the <div> element with id="myPhoto" have a 5px padding */
REMINDER: you can NOT have more than one element on a page with the same ID
Class selectors target an element with a specific class:
.photo { border: 3px; } /* This would make any element with class="photo" have a 3px border */
img.photo { margin: 10px; } /* This would make any image with class="photo" have a 10px margin */
Descendant selectors select an element(s) that is a descendant of another element:
p img { border: 3px; } /* This would make all images that are within a paragraph tag have a 3px border */
a img { border: 0px; } /* This would make all images that are within an anchor tag have no border */
p a img { border: 2px; } /* This would make all images that are within an anchor tag that's within a paragraph tag have a 2 px border
Child selectors target an element that is a child of another element.

<head> is an example of a child of <html>
<body> is also a child of <html>.
<head> and <body> are siblings.
<html> is the parent of both <head> and <body>
A <p> tag within <body>, it is NOT a child of <html>, but an ancestor - it is a child of <body>

To select a child element, use the > sign:
p > img { border:1px; } /* This would make any image that is directly within a <p> tag have a 1 pixel border */
Other selectors
There are other selectors as well, like attribute selectors, adjacent selectors, and more - the ones above are the most common, but feel free to look into other selector options.


CSS Specificity

Speciwhat?!

The word is more complicated than the actual concept

In CSS, "specificity" refers to how specific you reference something.

You've already learned, that when you have two definitions in CSS, the later of the two takes precedence. For example:

img { border: 1px; }
img { border: 0px; }

This will result in the image having no border (0px). Because it was the LAST thing you told it to do.

But what if you did this?:
body img { border: 1px; }
img { border: 0px; }
You'd think it would still be 0px, right? WRONG.

This is where specificity comes into play - the MORE SPECIFIC you are at referencing an item, the more weight it has in it's definition. So in the example above, the top (1px border) would actually take precedence over the line below it.

Think of it as a game - whichever definition has the most points wins:

HTML selector (type selector) - 1 point
Class selector - 10 points
ID selector - 100 points

body img - this has a specificity of 2 (1 HTML selectors, or 1+1)
img - this has a specificity of 1 (1 HTML selector)

And the winner IS..... (drumroll)..... the first one with a score of 2-1.

Another example:
img.artwork { border: 1px; } /* this references an image with the class "artwork" */
img#artwork { border: 0px; } /* this references an image with the id "artwork"
The first has a score of 11 - 1 point for the HTML selector (img) and 10 points for the class selector (.artwork)
The second has a score of 101 - 1 point for the HTML selector (img) and 100 points for the ID selector (#artwork)

Assignment 2 - PART 1 - Written Description of Project 2 Ideas
DUE DATE: Mon. Sept 26th
Turn in to homework folder:

02_17-Proj2_Idea
  1. Create a one to two paragraph description explaining your concept and how you plan to design the site.

TURN IN: Put your file in the homework folder before the start of class: username_proj2-idea.doc