Introduction
Cascading Style Sheets (CSS) allows the author of the web site to specify the presentation of elements on a web page separately from the structure of the document. This separation of structure from presentation simplifies maintaining and modifying a web page. Take for example my web site, the HTML is the same throughout but yet, with a single change to the stylesheet, I can easier change its appearance. This article aims at providing a short summary for people new to CSS on its ability and usage.
Type of Styles
We can separate the styles into three categories: inline, embedded, and external. Each of them has their benefits and drawbacks.
We begin with inline styles. The inline style allows you to declare a style for an individual element by using the style attribute for a given tag. Each CSS property is followed by a colon and the value of the attribute. You can have multiple attributes by separating them with a semicolon. Below is an example of an inline style that sets the font size to 15 pixels and bold the text as well.
<div style="font-size: 15px; font-weight: bold;">
This text should be 15 pixels and bold.
</div>
Next are the embedded styles. These are styles that are placed in a style tag and can be used throughout the entire document. You must specify the MIME type of the style tag when you declare it (the type is text/css). Each rule in a style sheet begins and ends with a curly brace ({ and }, respectively). There are three main ways to specify the styles. The first to set the style for all the tags. To do this, just begin with the tag name follow by the open curly brace, include your styles, and then close it with the closing curly brace. The next way is to set a style-class definition. These are preceded by a period followed by the class name. Any tag that has the attribute class set to that class name will then inherit that style. You can also be more specific and provide the tag name before the period to specify that only the specified tag with the class name will inherit the styles. The third way is the style-id definition. It works exactly like the class definition except that you use the pound symbol instead of a period. Also, it will target the tag with its id attribute set to the definied identifier. Note that the identifiers must be unique (but you should already know that from writing HTML). Below is a sample of the embedded styles:
<style type="text/css">
/* This sets all p tags to have its text the color white and its padding to 5 pixels */
p {
color: white;
padding: 5px;
}
/* This sets any tag whose class attribute is set to 'fine' to have the font size of 9 pixels */
.fine { font-size: 9px; }
/* This sets all div tags with the class attribute of 'big' to have its font size set to 20 pixels */
div.big { font-size: 20px; }
/* This set the tag with its id set to 'title' to have its text color being blue and underline */
#title {
color: blue;
text-decoration: underline;
}
/* This sets the span tag with its id set to 'quote' to have a border around it */
span#title { border: 1px solid black; }
</style>
The previous two methods does not truly satisfy the promise of CSS and that is to separate the structure from the presentation. Inline clearly affects the structure because it is part of the structure itself by being in the attribute style. Embedded styles moves away from that but the styles are still within the page. If you have multople pages that share the same styles, it does not make much sense to type the styles over and over again on each and every single page that uses those styles. A better alternative is to just link the page structure to a single stylesheet.
That is where external stylesheets come in. The way the styles are written is exactly like that of the embedded styles. The difference is that it is in its own file (the file extension is .css) and hence it does not even need the style tag anymore. You link to a style sheet by using the link tag like the following:
<head> <link rel="stylesheet" type="text/css" href="link-to-styles.css" /> </head>
For best performance, it should go within the head of the document but you can technically link it from anywhere within the structure. It is simple and it allows multiple pages to use the same styles. Best of all, you only need to update it in one place and all the pages that links to it will gets the update.
Media Types
CSS Media types allow a developer to decide what a page should look like depending on the kind of media being used to display the web page. Among the most commonly used media types are screen, print, and handheld. There are a couple of ways to set the media type of the style sheets. You can either set it as an attribute to the link tag or you can specify it explicitly within the styles themselves. To do that, just begin the code with @media follow by the type of media and then wrap all of the style definitions within the curly braces.
<!-- As part of the link tag -->
<link rel="stylesheet" type="text/css" media="screen" src="link-to-stylesheet.css" />
<!-- Within the style definitions -->
<style type="text/css">
@media print {
body { color: black; }
}
Box Model
CSS uses the box model to render elements on screen. The content of each element is surrounded by the padding, the border, and the margin. When you specify the width for a block element, the width is only for the content. You can further expand it by specifying the padding, border, and/or margin. So to put it in simplier terms, the padding, border, and margin are not part of the width or height. In previous versions of Internet Explorer, it was incorrectly implemented where the padding, border, and margin was included in the width and height of an element. With version 7.0 and greater, this bug has been fixed. However, any previous versions of Internet Explorer will still have these problems.
Sample: Positioning
Chances are, when you implement the design of a web site, you need to position certain elements at a specific location as it rarely just fall in place. One of the most powerful thing about CSS is that it allows you to position an element almost anywhere you like it on the screen. You begin by specifying the keyword position for the element to either relative or absolute. Then you can set the top, right, bottom, and left offset. When you set it to relative, the position is made to be relative to where the element would have been if it had not been manually moved. When it is set to absolute, it is made relative to the top left corner of the screen.
Take for example, if you want to position a div to be 100 pixels to the left of the far left side and 50 pixels from the top screen, you would do something like the following:
div {
left: 100px;
position: absolute;
top: 50px;
}
Now, if you want to position an element relative to its location as if it wasn't being forced to moved by our CSS, then you use position: relative to handle that. For example, lets say to want to position a div 50 pixels to the right of its normal location and 30 pixels from the bottom of its normal location, you would use something like the following:
div {
bottom: 30px;
position: relative;
right: 50px;
}
Sample: Backgrounds
The background property is a powerful tool that not only allow you to visually style your web site but it can also helps you save bandwidth. Before we get to the more complex stuff, lets begin with the simple stuff. While there are some specific background properties, most can be set within the background.
Lets begin with the simplest use of a background, setting the background color. For this, you can either use the background property or the more specific background-color property. Its value can either be the hexidecimal value preceeded by the pound sign of the color or the name of the color. Note that if you are using the name of the color, not all names are recognization. For that reason, if you know the hexidecimal number, use that instead. Onto the examples. The div with the class of one has a background color of white in its hexidecimal form while the one with the class of two has the same background color but it is name form. They basically do the same thing.
div.one { background-color: #FFFFFF; }
div.two { background-color: white; }
But just setting the background color doesn't allow much creativity. Being able to set background images is what makes backgrounds so powerful. Again, you can set a background image either with the background property or the more specific background-image property. The value should be url('url-to-image'). Below is an example of such usuage:
div { background-image: url('/images/bg.jpg'); }
But that isn't all. You can also set as to whether to repeat an image (horizontally, vertically, or both) and you can even position the images. Being able to position the images means that you can use an one single image file that can contain various images within them. Take for example, you have the images for your navigation, a mouseover and mouseout image. Instead of saving them as separate files, you can just save them as a single one with one on top of the other. To be more specific, here is the details of the image: The navigation is 100 pixels by 50 pixels, hence each image, if saved separately, would be 100 pixels by 50 pixels. Put one on top of the other then, we will have one image that is 100 pixels by 100 pixels. The mouseout image will be from points (0, 0) to (99, 49) and the mouseover image will be from (0, 50) to (99, 99). So, we can then set up the following CSS:
a {
background: url('/images/button.jpg') no-repeat;
background-position: 0px 0px;
height: 50px;
width: 100px;
}
a:hover { background-position: 0px -50px; }