smashing ~ chapter 2. why are they so important? ◦ without them we would have no way of assigning...
TRANSCRIPT
SelectorsSmashing ~ 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.
Selectors
There are two types of pseudo things:
1)There are psuedo-classesA pseudo-class is similar to a class inHTML, but it’s not specified explicitly in
themarkup. Some pseudo-classes are dynamic—they’re applied as a result of
userinteraction with the document.
PSUEDO…
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.
Psuedo-Classes
: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
Examples of Psuedo-Classes
::first-line ::first-letter ::before ::after
Examples of psuedo-elements
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>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.</p>
<p>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.</p>
<p>Wow! Where do I fit in? I know I am not the first child!</>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Example of using p:first-child
This is some text. Typing more information in theparagraph may make more sense sometimes. Sincethis 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.
What it looks like in the browser
<!DOCTYPE html><html><head><style>p > i:first-child{color:blue;} </style></head>
<body><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p><p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p><p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be
declared.</p></body></html>
The selector matches the first <i> element in all <p> elements:
I am a strong man. I am a strong man.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.
What it looks like in the browser
<!DOCTYPE html> <html> <head> <style> input:focus { background-color:yellow; } </style> </head> <body>
<p>Click inside the text fields to see a yellow background:</p>
<form> First name: <input type="text" name="firstname" /><br> Last name: <input type="text" name="lastname" /> </form>
<p><b>Note:</b> For :focus to work in IE8, a DOCTYPE must be declared.</p>
</body> </html>
:focusmatches any element that’s currently in focus
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.
Using :focus
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: ";}
:before
<!DOCTYPE html><html><head><style>p::before{content:"Read this -";}</style></head>
<body><p>My name is Pam Kouris. I am here tonight teaching at Oakton. </p><p>The room number is 3601. It is a lab!</p>
<p><b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.</p>
</body></html>
Read this – My name is Pam Kouris . I am here tonight teaching at Oakton.
Read this -The room number is 3601. It is a lab!
NOTE: For :before to work in IE8, a DOCTYPE must be declared.
What :before looks like in browser
:: 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.
:: double colon syntax
CSS3 adds the pseudo-classes – The list can be found on page 41 in Smashing text.
(Most are not widely supported at this time)
CSS3
It might be useful to be very specific when providing a link to certain information.
<a href=“http://example.com/law.html#sec2-7</a>
The fragment identifier is #sec2.7
Text used :target to provide a visual cue to show that you in fact have gone there.
Targets with Style
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.
Specificity
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.
With CSS Specificity, Order Matters
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.
... <head> <link href="stylesheet1.css" rel="stylesheet"
type="text/css" /> <style type="text/css"> @import URL ("stylesheet3.css"); p { color: blue; } </style> <link href="stylesheet2.css" rel="stylesheet"
type="text/css" /> </head> <body> <p style="color: yellow;">first paragraph</p> ...
Let’s look at a Web page frament
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.
So…
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.
It gets more complicated
Assign specificity to a style:1) Count the number of element names in
the selector2) 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.
Rules of specifity
Importance overrides specificity and that is
!importantIt 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;}
Importance
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.
What are Shorthand 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
Lab Tonight