CSS Cookbook¶
This cookbook is dedicated to maintaining my understanding of Cascading Style Sheets (CSS).
Class and ID attributes¶
These two attributes specify where and how styles are applied to elements.
Class¶
You use the class attribute to define styles for elements with the same class name. When you update the style definition, all elements in your document that have that class attribute are effected. Here’s an example of a class definition:
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
Note
Notice the use of the period before the class name.
Here’s an example the demonstrates how to use a class attribute:
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
ID¶
You use the id attribute to define a style for a unique (one-off) element. When you update the style definition, only one element is effected (the one with that ID attribut). Here’s an example of an ID definition:
<style>
#myTwoCents {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
Note
Notice the pound sign before the ID name.
Here’s an example that demonstrates how to use an ID attribute:
<div id="myTwoCents">
<p>I like traffic lights.</p>
</div>
Positioning¶
This sections explains how to control content flow within the page. For more information, see CSS position property.
static¶
The default positioning is static. Static positioned elements simply render in the order that they appear in the document flow. Static positioned elements are not affected by the top, bottom, left, and right properties.
fixed¶
Fixed positioned elements:
- are removed from the normal flow.
- are positioned relative to the browser window,
- will not move, even if the window is scrolled.
- can overlap other elements.
Note
The document and other elements behave like the fixed positioned elements don’t exist.
relative¶
In the same way that fixed position allows you to place an element up against the browser window border, position relative allows you to do the same thing, but up against a container’s borders. Set the containing box’s position to relative, and then set the position of the box that it contains to absolute.
Example¶
If you set relative positioning on div-1, then any elements within div-1 are positioned relative to div-1. Then if you set absolute positioning on div-1a, then you can move it to the top right of div-1.
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
The element is positioned relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position.
Notes¶
- Relative positioned elements are often used as container blocks for absolute positioned elements.
- If you want scroll bars, then don’t use relative position.
- If you switch to relative, then you’ll loose the scroll bars.
- To get scroll bars, set values for “top” and “bottom” (e.g., top: 120 px, bottom: 30 px), and then set the position to either fixed or absolute.
Absolute¶
Absolute positioned elements:
- are positioned relative to their first positioned enclosing element (or body element, if there aren’t any).
- are removed from the normal flow.
- don’t participate in the normal flow of the static elements in the document.
Note¶
- Absolute positioning doesn’t work for variable-height columns (boxes).
- You can see the blue outline of a selected div only when you set it’s positioning to Absolute.
- This is the type of position you want for the title in your page header. It allows you to move the text to the right, away from the logo (padding-left: 20 px).
Inherit¶
The value of the position property is inherited from the parent element.
Display¶
The display property specifies the type of rendering box used for an element.
Block¶
As far a flow is concerned, content won’t appear beside a block. As far as that block taking up all the available horizontal space - you have to specify width = 100%.
Margins and padding¶
- Margins are used to setup a space around content to keep other content away.
- Padding is used to distance content away from the sides of a container (e.g., a div).
Scroll bars¶
To get scroll bars to appear, and to force the div element to keep it’s shape: Overflow=scroll
Not sure¶
div#mainSection table {} Match any table that is within a division that has an id=mainSection. I.e., must match the entire division, not just an element.
Notes¶
Don’t confuse “.body” with “Body Text”. :-)
