| Introduction | Fundamentals | Classes | Text | Borders and Margins | Background and Layout | Links | Hints and Tips |
Cascading Style Sheet, or CSS, is a means of controlling the style and layout of a web page. HTML is a markup language, and is used to structure a page in terms of its title, sections, and content. CSS is used for adjusting the color, size, style, and positioning of the HTML. A perfect web page will have no attributes in the HTML tags; all styles will be controlled by CSS.
CSS's goal is to provide a convenient and efficient way to adjust the style and layout of all pages on a website. This is accomplished by using a separate .css file to complement the .html files. All of the .html files on a page use a single .css file, so a simple change in the .css file will automatically change how each .html file displays in a browser.
Imagine you want to change all the fonts on your site from black to navy blue. Without CSS, you must manually edit every .html file by changing all of its fonts to navy blue. With CSS, you only need to change a line or two in the .css file and all of the .html pages will display with the new font color despite not having been editted. Imagine using the non-CSS method on a hundred .html files, or a thousand. This idea is analogous to a professor handing out a printed syllabus to his students. If the professor decides to make a correction later, he must issue a new syllabus to every student; tracking them all down and making sure everyone has the latest copy can be tedious. But if the professor keeps the syllabus on his website, a simple update to that file will be present whenever any student views it.
The cascading part of CSS refers to using several different style sheets on a single page, each one overriding others depending on their definitions. For example, suppose you have a style sheet, style1.css, which tells the fonts to be red, and another sheet, style2.css, which tells the fonts to be green, bold, and 12 pixels high. Since style2.css is more strict, it will override style1.css. However, if style1.css also contains instructions for images, but style2.css doesn't, style1.css will be considered more strict about images, and the resulting page will display style2.css's font definitons and style1.css's image definitions.
Styles do not necessarily have to be implemented using .css files. The style code can also be placed in the <head> section of the HTML file. Note that when you do this, it automatically overrides any external .css files that you use. Also keep in mind that you are losing the ease of changing several files at once as described above; this method should only be used when the style applies to just a single .html file.
CSS code is written by defining certain characteristics of an HTML tag. First the function is listed, followed by a set of opened and closed curly brackets:
tag name {
}
The definitions are written by listing a function and its value:
function: value;The function is place between the curly brackets.
tag name {
function: value;
}
A tag definition may contain more than one function, and each function can contain more than one value. Also, definitions may apply to several tags.
tagA, tagB {
function1: value1;
function2: value2;
function3: value3 value4;
}
Note that tag names must be