Cascading Style Sheets View
Short for Cascading Style Sheet, CSS is a concept first created by Håkon Wium Lie in 1994. In December 1996, CSS was made a specification by the W3C and today allows web developers to create and easily change how their web pages look and feel. For example, CSS may define how each page looks by defining the fonts used, colors, padding, etc. within a .css file. The CSS file could be linked to from multiple pages and if the developer ever wanted to change the look or feel of all of those pages they would only need to change one file instead of all files. Below, is a basic example of CSS code, in this example the CSS code is defining the fonts, the color of the links, color of the visited links, and the color of the links when the mouse is hovering over the link. In the example below, we are only changing the HTML tags ‘a’ and ‘body’ and are not create any new class selector or id selector.
body {
font: normal 100% "trebuchet ms", Arial, Helvetica, sans-serif;
}
a {
color: #000000;
}
A:visited {
color: #005177;
}
a:hover {
color: #005177;
}
The above CSS code can be inserted into the <HEAD></HEAD> section of a pages HTML code using the below code. However, keep in mind that doing this only changes the look and feel of the page that contains the code.
<style type “text/css”>
<!—
above code inserted here
—>
</style>
If you want to use the CSS code on multiple pages we suggest storing the code in a separate CSS file and then loading it from each page. For example, the CSS code first shown on this page can be copied and pasted into a file named example.css. A CSS file can be created using any text editor.
After the file has been saved, to load that file it must linked to in the <HEAD></HEAD> section of the HTML code using the example below.
<link rel=“stylesheet” Type=“text/css” href=“URL or path to css file here”>
If you named the file example.css and it was in the same directory as the HTML file it is being loaded from you would enter the below line.
<link rel=“stylesheet” Type=“text/css” href=“example.css”>
CSS3 is the version of CSS (Cascading Style Sheets) that replaces CSS2. It introduces a number of new selectors and properties that allow for more flexibility with page layout and presentation. Some updates, such as the box-shadow property (which allows a drop-shadow to be added to an element), allow visual effects to be applied without needing images to achieve them.