UA Home
Cascading Style Sheets allow you to separate your web site's design from its content. All the design elements (colors, fonts, backgrounds, page layout, etc) are stored in a separate file with an extension of '.css'. All your web pages link to this file to get their design information. If you need to change the design, you only need to edit one file to change the design elements on your entire website.
Style sheets are ordinary text files that can be created in any text editor. The style sheet file must have the file extension of .css and must be saved as "text-only".
Style sheets are made up of rules that define how the HTML elements are to be displayed. For example, the style sheet rule below would add color to the H1 element:
h1 { color: blue; }
CSS rules always start with the HTML element you want the style to apply to followed by an opening brace. Properties and their values are added between an opening & closing brace. Multiple property/value pairs can be added by separating them with a semi-colon:
h1 ( color: blue;
font-size: 10pt;
font-family: Helvetica;
}
You can also apply styles to multiple html elements at one time by separating the elements with a comma:
h1, h2, p {
font-family: Helvetica, sans-serif;
color: blue;
}
Once your .css file has been created and uploaded to your web server account, you can link multiple HTML files to it with the link tag. The code below assumes that the style sheet "style.css" is within the same directory as your html file. It MUST be placed within the head portion of your html file:
<head>
<title>My Webpage </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
