The 5 minute CSS intro
This is a super quick intro to CSS followed by valuable links to continue the learning. you will learn what CSS can do and where to learn more.
We are used to the fact that browsers decide how HTML elements are displayed, for example, lets say that the browser renders all header text as bold and in font size 18. Cascading Style Sheets give us that extra bit of control on how HTML elements are displayed. CSS can override the browser default rendering properties. A CSS definition can also be re-used across html pages, saving us from the hassles of font, size and layout issues. CSS syntax consists of a selector, property and value. in the following code snippet, we are specifying that whenever the body tag is declared, use white as the text color.
body {color: white}
A whole bunch of properties can be defined for a selector. We could define Right aligned underlined white text as follows.
body {
text-align: right
text-decoration: underline
color: white
}
For a complete list of properties check the CSS specifications at www.w3.org.
Other commonly used CSS tags are for background color and images
body {
background: blue url(stripes.gif) no-repeat fixed top
}
Note in the above example, multiple properties are specified in a single line ;) shortcuts..
Pseudo elements are used to specify properties for different states of the same element. For example the <a> element has active, visited and mouse over states. And you can specify properties for all or some of them.
a {color: #BBBBBB}
a:link {color: #BB0000}
a:visited {color: #00BB00}
a:hover {color: #BB00BB}
a:active {color: #0000BB}
Another common use of CSS is to specify border and boxes
<html>
<head>
<style type="text/css">
<!--
p.double {border-style: double}
-->
</style>
</head>
<body>
<p class="double">double border</p>
</body>
</html>
Including CSS properties in HTML
CSS properties can be specified along with the HTML itself in the HEAD tag as shown below
<head>
<style type="text/css">
<!--
body {color: black}
p {margin-left: 18px}
body {background-image: url("white_back.gif")}
-->
</style>
</head>
As your CSS skills grow, you may want to put it in a file and re-use it across web pages
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
You may also apply CSS on the spot for a particular tag using inline CSS
<p style="color: blue; margin-left: 10px">
Test paragraph
</p>
Common CSS uses
rounded borders: This involves placing tiny rounded images at four corners. An excellent tutorial on rounded corners
CSS menus are almost a necessity on most web pages, its much cleaner and simpler than using javascript and a bunch of images, ssi-developer has a neat little tutorial on menus.