Notes from Codeschool CSS Cross Country Course - Level 1
Ways to Add CSS To An Application
1. Inline attribution (Easy, but a maintenance nightmare)2. In the <head> section of each page (Also a maintenance nightmare for sites with multiple pages)
3. External Link (the recommended way)
The best way to add styles to your site or application is through an external stylesheet. You add a link to the stylesheet in the head of your document. Then all styles are created in that separate file.
<! -- index.html -->
<head>
<title>CSS Cross Country</title>
<link rel="stylesheet" href="styles.css" />
</head>
Primary DOM* Selectors
Element SelectorClass Selector
ID Selector
For more advanced selectors like child and sibling, read: http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
Selectors
Element Selector
The element selector maps the html tag directly to your css selector.e.g.
<! -- index.html -->
<h1>Nice and Toasty</h1>
/* styles.css */
h1 {
color: #aba4ac;
margin-bottom: 10px;
}
Class Selector
Select items via their class attribute.<! -- index.html -->
<h1 class="intro">Nice and Toasty</h1>
/* styles.css */
.intro {
color: #aba4ac;
margin-bottom: 10px;
}
ID Selector
Select items via their ID attribute.<! -- index.html -->
<h1 id="header">Nice and Toasty</h1>
/* styles.css */
#header {
color: #aba4ac;
margin-bottom: 10px;
}
You can also combine multiple selectors to create a compound selector:
<! -- index.html -->
<h1 id="header">Nice and Toasty</h1>
/* styles.css */
h1#header {
color: aba4ac;
margin-bottom: 10px;
}
Cascade Order
There are two types of cascades to contend with. First being where the styles are found within the application.From least to highest priority:
External <link>
In the <head>
Inline Style Attribute
Using !important
Styles in the <head> can override external styles. Inline styles will override any styles in the <head> and external styles. Using !important can override all other styles.
The second cascade style to contend with is where the style is declared within the external stylesheet. Items declared later (or further down) the stylesheet will override equal styles up above. For example:
/* styles.css */
.intro {
color: 444245;
}
.intro {
color: #dddadd;
}
The second color definition will win and be displayed when class="intro" is used in your html.
That being said, non-conflicting properties will be combined. It is important to remember that properties are additive as long as they don't conflict.
/* styles.css */
.intro {
color: dddadd;
}
.intro {
margin-bottom: 5px;
width: 900px;
}
is equivalent to:
/* styles.css */
.intro {
color: #dddadd;
margin-bottom: 5px;
width: 900px;
}
Floating Left and Right
When you do a float, the rest of the content in the parent container will float around that item. When you float something, it will take that item out of the normal document flow and moves it to the specified edge. In the example below, the specified edit is 'left'. All the other content will wrap around that item. |
| how to float an image left |
Float Options
float: right / left / none
Use float: none to remove an existing float.
Stacking Order
Floated items are going to stack up against one another until they reach a parent edge, at which point they will break down to the next available edge.In this example, we have three containers floating up against one another, but when the parent width becomes too small to contain all three, the final object is going to break down to a new line.
 |
| last item breaks to new line when parent container becomes too small, nearest edge is of parent container |
Take care when you have multiple items with different heights, the first available edge doesn't always belong to the parent container. In this case, since the first item's height is greater than that of the two subsequent items, when the last object breaks down to a new line it will butt up against the tall item, instead of going below it.
 |
| nearest edge doesn't always belong to parent container when items are of different heights |
It is also important to consider that because we can float things left and right at the same time, the order in which they appear in the html is important. This will determine which item will break to a new line if necessary.
In this case, we have two items. One is set to float left and one is set to float right.
/* styles.css */
.sled {
float: left;
}
.ski {
float: right;
}
<!-- index.html -->
<article>
<img class="ski" src="ski.jpg" alt="" />
<img class="sled" src="sled.jpg alt="" />
</article>
If the container above becomes too small to contain both, because the 'sled' selector comes after the 'ski' selector in the html document, it will break to a new line first. e.g.
 |
| when floating one item left and one item right, the item that comes first in the HTML will get priority, the item that comes later in the HTML will break to a new line |
When you have multiple items stacking up against one another, they will float right to left.
<!-- index.html -->
<article>
<img class="ski" src="ski.jpg" alt="" />
<img class="sled" src="sled.jpg alt="" />
</article>
/* styles.css */
.sled {
float: right;
}
.ski {
float: right;
}
The first item found in the html will be found on the far right:
 |
| stacking order for float: right, first item in HTML will be found on the far right |
*Document Object Model (not that relevant but I was curious as to what it meant)
No comments:
Post a Comment