I’m creating some CSS tutorials for a few friends and I thought I’d share. The intended audience are beginners in CSS with little or no accompanying HTML knowledge. Hopefully these lessons will elucidate beginner CSS / HTML concepts
CSS Tutorial Part 1
This lesson will cover details about how to include CSS, basic CSS stucture, and an example of an HTML page demonstrating CSS inheritance.
Including CSS
There are three ways to include css
1. Preferred way – link to an external file
-In the <head> section, including the following
<link rel=”stylesheet” type=”text/css” href=”YOURSTYLESHEET.css” />
-Replace YOURSTYLESHEET with a .css file you create
2. Alternate, Discouraged Method – Including style declarations in the <head> tag
-In the <head> section, add in a <style> tag and declare properties
3. Include a style definition as a property of an element.
-Add “style=”css declarations” ” in the tag’s properties.
-For example, to make a specific div have a black backgroundcolor do the following:
<div style=”backgroundcolor:black” > Div content </div>
Creating CSS
The syntax for declaring a css declaration is
{property : value;}
Selector
Selector is the element you want to apply a style to. For example, to apply a black background color to ALL div elements:
div { backgroundcolor : “#000000″; }
Any element can have a style. A selector defines what element to apply a style to.
1. Use the element’s name
-Applies to all type of elements
-For instance, anything declared in body { property : value; } will be applied to everything in the page
Examples
body { property : value; }
div { property : value; }
p { property : value; }
a { property : value; }
2. Use an ID
-Applies to only a single element.
-Selector has a “#” sign as a prefix
Examples – Defined in CSS
#leftColumn { property : value; }
#rightColumn { property : value; }
Defined in HTML
<div id=”leftColumn”> Content </div>
<div id=”rightColumn”> Content </div>
3. Use a Class
-Similar to an id, but can be reused
-Selector has a “.” sign as a prefix
Examples – Defined in CSS
.blueBackground { property : value; }
.bigText { property : value; }
Defined in HTML
<div class=”blueBackground”> Content </div>
<div class=”bigText”> Content </div>
4. Apply a style to an element with specific attributes
-Element[attribute="property"] { property : value; }
Examples
input[type="text"] { border : 1px solid #000000; }
You can select specific elements inside of elements by using
element element { property : value; }
Example
p .bigText { font-size: 2em; }
The above code would apply a font-size that is 2em (2x as big as normal) to everything inside a p element if the p has a class of bigText
HTML Code For example
<p> Regular Text </p>
<p class=”bigText”> Big Text </p>
Only the second p tag would have the 2x font-size
Example
#siteContainer p .bigText { font-size: 2em; }
HTML
<div id=”#siteContainer”> <p class=”bigText”> Text </p> </div>
Only p tags with the class of bigText inside of the siteContainer div will have a 2x font size.
Property
Defines what property an element should have. There are many properties to choose from, a full list can be found at http://www.w3schools.com/Css/css_reference.asp
Example
background-color, margin, padding
Some properties has multiple “sub properties”, such as the background property. An element’s background has multiple properties, such as background-color, background-image, background-repeat, etc. Some of these properties can be condensed into one property.
For example
background: background-color background-image background-repeat
background: #000000 url(image.png) no-repeat;
Not all properties can be condensed like this. Many can though, such as border, font, padding, and margin.
Value
Sets the value of the property. Depends upon the property
For example
background-color: #000000
padding-left: 10px;
“Cascading” – Style Inheritance
Once a style is applied to an element, all child elements inherit the defined properties.
For example, if a style is applied to “body”, then every element inside of the body page will have the same properties defined in body
-Example: If body has a background-color of blue, then all divs inside the body will have a background-color of blue. Since everything displayed on the site is in the “body” tag, everything will have a blue background unless specified otherwise.
Example HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Test Page</title> </head> <body> <div id="siteContainer"> <div id="logoContainer" class="bigText"> <a href="#">Test Page</a> Some text</div> <div id="midContainer"><a href="#"> A link </a> Dummy Content </div> </div> </body> </html> |
Example CSS
The following code demonstrates various style inheritance.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | body { background-color: #0000ff; } a { background-color:#efefef; color: #000000; } a:hover { color:#006699; } .bigText { font-size: 2em; } #siteContainer { background-color: #00ff00; height:20%; } #logoContainer { background-color: #ff0000; } #midContainer { background-color: #006699; font-family: arial; } #midContainer a { background-color:#cccccc; color: #000000; } |
Keep in mind that it doesn’t necessarly matter to the computer how you code the CSS – meaning, you don’t have alphabetically order the property like I did above. It does make it easier on the eyes though and makes it easier to quickly find certain properties when your CSS file gets large. There is, however, no “right” way to organize your code, but keeping it consistent and easy to read is important.
Wow, this blog is definately getting bookmarked. Great Info all over the place.
I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.