Brief Summary of Cascading Style Sheets
Why Are They Great?
As has been mentioned before, CSS provides the clothes that your web site will wear. Here is a great example of how the same person can fit into different clothes.
CSS Zen Garden is a web site where the same backbone, same HTML, is "dressed" in different style sheets. Check out various links on the site or just these three: Museum; Table Layout Assasination; Invasion of the Body Switchers. It's astonishing how CSS can transform the same page, isn't it?
Enough Of This, Let's Do Something
Since CSS is a garment, it is best to save it to a different file, so that you can change or tweak the fitting of your site's clothing when you want. Let's do just that.
In Notepad++ or TextWrangler, open a new file and save it as "coolstyle.css". Do save it to the same folder where you have chosen to store your web site files.
Then open your "index.html" that we created earlier. Remember how a lot of important information goes into the head of the site? Now it's time to insert one more line there (it doesn't matter where you choose to insert it, as long as it's between the opening and the closing head tags).
≶link rel="stylesheet" type="text/css" href="coolstyle.css" />
Now the browser will know that there is a linked document connected to your "index.html", that the document is a stylesheet in the CSS format, and to reach it, the browser needs to refer to "coolstyle.css".
Working With Your CSS File
CSS is different from HTML, and it has its own syntax. Read about CSS Syntax as explained by W3 schools, the school of World Wide Web Consortium that we mentioned on the first page.
Unlike HTML, we don't need any welcoming phrases for the browser. We can just type away in our "coolstyle.css". Let's make the background of our page blue, and the text color yellow.
body {background-color: blue; color: yellow;}
Save the style sheet and the HTML document. Open index.html in a browser. Can's see much, can we? Let's go to ColorPicker and choose a pleasant background color and a nice font color. Colors are defined as six-character codes preceded by a # sign.
body {background-color: #99E3F7; color: #525454;}
Save and renew your index.html. Beautiful, huh? Let's work on making those links more vivid! Our link's color is awfully boring!
a:link {color: yellow;} - defines the look of an unclicked link;
a:hover {background-color: #FADDAC; color: #143FB5;} - defines the look of a link when you mouse over it;
a:visited {color: black;} - defines the look of a visited link;
a:active {color: orange;} - defines the look of a selected link.
Is your site beautiful yet? Let's embed some great fonts into our page. Go to Google Web Fonts. Find a font you like and "Add to collection". A menu will pop up on the bottom, where you want to click "Use". Read the instructions on the page. First, add the code to your web site - one more thing to add to the head! Next, make the font you have selected the preferred font for the body of your site.
body {background-color: #99E3F7; color: #525454;
font-family: 'Fredoka One', cursive;}
Save your work. Great job!
Of course, the discussion of HTML and CSS can't be ended after three simple pages with instructions. It's too large a topic to be studied so easily. But you have successfully completed the first steps toward being a sophisticated web designer.
