CSS Rules
CSS Separates Style from Structure
CSS, Cascading Style Sheets, is a style sheet language that was first proposed in 1994 by Håkon Wium Lie. The following Rules are the basis of how CSS works The primary purposes of a CSS, Cascading Style Sheet is to separate the web page styles from the page structure.
The Selector
Css styles sheets are made up of sets of rules that can directly effect an html tag by using the html selector.
Or
Css styles can effect a variety of different html tags by using the class selector.
Or
You can be specific and only effect a specific element on the page by using the id selector.
Or
everything (for a specific property) can be changed by using the * asterisk selector
Selectors HTML tags
The selector in the css indicates what will be affected. Below the selector is h2. The styles would be placed between the curly braces
h2{
}
All html tags can be used as selectors with the exception of the
horizontal line <hr /> and the break <br />
The advantage of directly targeting an html tag is that you can set up thecss in advance and the styles will automaticly effect the page once you type in a particular tag.
Selectors class
Below the selector is a class. A class is indicated by using a period in front of the class name.
.name{
}
In the html code you can place a class into more than one tag
and different types of html tags
<span class="name">information</span>
<div class="name">information</div>
Selectors ID
Below the selector is an id. An id is indicated by using a #
in front of the id name.
#name{
}
An id can only be used once on a page.
<div id="name">information</div>
Selector Universal
The * asterisk selector changes everything for a particular property
* {
font-size: 12pxs;
}
If you were to use the example shown above all of the text
in your site would be 12px.
Naming a selector
When naming selectors choose a name that makes sense in relationship to its purpose.
Use all lower case with the underscore when needed
Declaration
The declaration contains the property and the value of the style and is placed between the curly braces.
Relationships
You can create selectors that target elements based on their ancestors, siblings attributes and more
The img and h1 tags are the children of the div.
The div is the parent of img and h1 tags.
img and h1 tags are siblings.
The body tag is the ancestor of the img and h1 tags.
Decendents
Example one
div#content img
{border-width: 2px;
}
<div id="content"> all of the images within this div </div>
Example two
div#content a
{color: #fff;
}
<div id="content"> all of the links within this div</div>
Example three
div#content.red{
color: #f00;
}
<div id="content">all elements with the class "red" within this div</div>
Child Selectors
The following rule would effect the direct decendents of the body in this case paragraphs. It would not effect
paragraphs within div and tables because they would not be a direct decendent.
body>p{
color: #333;
}
We can also be very precise we could target a particular head tag in a div that was within a div
body > div > div > h2 {
color: red;
}
Ajacent Sibling
h1 + p {
color: #f00;
}
The rule would apply to all paragraphs that follow H2 that have the
same parent
Smashing CSS
Transending CSS
The Zen of CSS design
share / bookmark