Introduction to CSS
CSS means “Cascading Style Sheets.” A cascading style sheet (CSS) is a text document that has information about how your web page should look. CSS is for layout and presentation, not for content. This means that CSS is responsible for how a page looks, but not the words on the page.
1. You already have a web page that has some content on it, but more likely than not you are not quite satisfied with how it looks. That's where CSS comes in. In order to edit the existing CSS document, go to your website, then to “Appearance” and “Editor”. Once there, click on “style.css” (Stylesheet) and go all the way to the bottom of the document where it says “Custom Styles”.
2. Type the following into “style.css”:
body {
color: #00008B;
background: #FFE4C4;
}
This changes the text color (color) and the background color (background) of the <body> of your web page. You can change #00008B and #FFE4C4 to anything you want – click on http://www.pagetutor.com/common/bgcolors216.html for more examples of colors that you can use.
3. In “index.php”, go to any one of the <div> tags that you put in there. Add a “style” to the <div>:
<div class=”important”
In this case, the style is called “important”, but it can be named anything that you want it to be named (as long as you keep the name the same in “index.php” and in “style.css”). Now, add the following to “style.css”:
.important {
font-weight: bold;
font-size: 24pt;
text-transform: uppercase;
}
This will make all of the text inside of the <div> marked “important” bold, 24-point and uppercase. Save “index.php” and “style.css” and refresh your web browser.
4. Now that you have learned how to change how the <body> looks and change the style of a <div>, play around with CSS a bit by going to the “References” page on http://shawhighstudents.org/webdesign/ to see if you can use some of the CSS references to change how your pages look!
5. Once you're done playing around, send me an e-mail that says you're finished with lesson 14.