Smashing ~ Chapter 2

 Why are they so important? ◦ Without them we would have no way of assigning styles to elements. ◦ By using selectors we can accomplish a great deal of styling with just a few lines of CSS.

 There are two types of pseudo things: 1)There are psuedo-classes A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.

 A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.  They are better supported by browsers therefore more widely used.

 :link: An Unvisited link  :visited: A visited link  :hover: A hovered element  :focus: A focused element  :active: An active element (such as a link while it’s being clicked)  :first-child: An element that is the first child of another element  :lang(): An element based on the value of its lang attribute

 ::first-line  ::first-letter  ::before  ::after

p:first-child { color:blue; } This is some text. Typing more information in the paragraph may make more sense sometimes. Since this is the first paragraph within the body element you could say that it is the first child. This is some text. Hello I came after the first paragraph. I am the second paragraph therefor you could say I am the second child. Wow! Where do I fit in? I know I am not the first child! Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

This is some text. Typing more information in the paragraph may make more sense sometimes. Since this is the first paragraph within the body element you could say that it is the first child. This is some text. Hello I came after the first paragraph. I am the second paragraph therefore you could say I am the second child. Wow! Where do I fit in? I know I am not the first child! Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

p > i:first-child { color:blue; } I am a strong man. I am a strong man. Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

I am a strong man. Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

  input:focus  {  background-color:yellow;  }   Click inside the text fields to see a yellow background:   First name:  Last name:   Note: For :focus to work in IE8, a DOCTYPE must be declared. 

Click inside the text fields to see a yellow background: First name: Last name: Note: For :focus to work in IE8, a DOCTYPE must be declared.

selector inserts content before the content of the selected element(s). Use the content property to specify the content to insert. p:before { content:"Read this: "; }

p::before { content:"Read this -"; } My name is Pam Kouris. I am here tonight teaching at Oakton. The room number is It is a lab! Note: For :before to work in IE8, a DOCTYPE must be declared.

Read this – My name is Pam Kouris. I am here tonight teaching at Oakton. Read this -The room number is It is a lab! NOTE: For :before to work in IE8, a DOCTYPE must be declared.

:: double colon syntax was introduced in CSS2.1 As of this date, no browser requires that you use the double-colons before pseudo-elements. A single element works fine.

CSS3 adds the pseudo-classes – The list can be found on page 41 in Smashing text. (Most are not widely supported at this time)

It might be useful to be very specific when providing a link to certain information. The fragment identifier is #sec2.7 Text used :target to provide a visual cue to show that you in fact have gone there.

 Refers to the rules behind why a browser would choose one style over another when displaying an element.  Becomes more important the more complicated your site gets.  Is the numeric representation of the “specificness” of a selector.

 The order in which styles are read by the browser matters  If there was a case of two styles affecting the same selector, the last property to be read would be the one that would apply. In this example: p {color: blue;} p{color: yellow;} All paragraphs would be yellow.

 This is true whether the styles are in the same style sheet or in a different external style sheets. The style that is read last would be the one that is applied!  If you are getting styles from different locations, the order of the styles is important.

URL ("stylesheet3.css"); p { color: blue; } first paragraph...

 The fifth style sheet is the most specific and so it would be applied.  Even though there are other styles in another style sheet that would apply, the fifth one would be the one the browser would apply.

 Order is not the only thing that defines how a style gets applied.  The more specific your style is defined the more likely it will be applied.

 Assign specificity to a style: 1) Count the number of element names in the selector 2) Count the number of psuedo-classes and other non-ID attributes in the selector and multiply by 10 3) Count the number of ID attributes in the selector, and multiply by 100 4) Add up all three numbers, this = that property’s specificity.

Importance overrides specificity and that is !important It is a way in CSS to make a rule that you feel are most crucial always be applied. A rule that has the !important will always be applied no matter where the rule appears in the CSS document. Example: If you wanted the paragraph text to always be red p {color: red !important; } p {color: yellow;}

 Shorthand properties let you specify several properties by using only one. CSS shorthand makes it easier for you to apply style to your markup and makes your CSS code more concise.  Any missing key shorthand properties left off the browser will then use the default values.

body { background: url("bg.gif"); background-color: #fff; background-repeat: repeat-x; } Using a shortcut: body { background: url("bg.gif") #fff repeat-x; }

 You will be working in teams: ◦ Team 1 = Mike and Laura ◦ Team 2 = Marcel and Rami and Eric ◦ Team 3 = Andrew and Sylvia and Nick