STYLES CAN SAVE ALOTS OF WORK
Style
Sheets Can Save a Lot of Work
Styles sheets define HOW HTML elements are to be
displayed, just like the font tag and the color attribute in HTML 3.2. Styles
are normally saved in external .css files. External style sheets enable you to
change the appearance and layout of all the pages in your Web, just by editing
one single CSS document! CSS is a breakthrough in Web design because it allows
developers to control the style and layout of multiple Web pages all at once.
As a Web developer you can define a style for each HTML element and apply it to
as many Web pages as you want. To make a global change, simply change the
style, and all elements in the Web are updated automatically. Multiple Styles
Will Cascade into One
Style sheets allow style information to be specified
in many ways. Styles can be specified inside a single HTML element, inside the
<head> element of an HTML page, or in an external CSS file. Even multiple
external style sheets can be referenced inside a single HTML document.
Cascading Order
What style will be used when there is more than one
style specified for an HTML element? Generally speaking we can say that all the
styles will "cascade" into a new "virtual" style sheet by
the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head>
tag)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the
highest priority, which means that it will override a style declared inside the
<head> tag, in an external style sheet, or in a browser (a default
value). CSS Syntax
The CSS syntax is made up of three parts: a
selector, a property and a value: selector {property: value}
The selector is normally the HTML element/tag you
wish to define, the property is the attribute you wish to change, and each
property can take a value. The property and value are separated by a colon, and
surrounded by curly braces:
body
{color: black}
Note:
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note:
If you wish to specify more than one property, you must separate
each property with a semicolon. The example below shows how to define a center
aligned paragraph, with a red text color: p {text-align:center;color:red}
To
make the style definitions more readable, you can describe one property on each
line, like this: p { text-align: center; color: black; font-family: arial }
Comments