WHAT
Cascading Style Sheets are a recent development to add finer control and styling to basic HTML structure. CSS consists of lists of layout and display rules which govern how a webpage will look. It can control margins, font styles, backgrounds, images and positioning just to name a few.
WHY?
With CSS it is easy to make styling edits quickly in order for the changes to be reflected in one page or a thousand. By attaching a separate css file, one can have a more compact page and reuse the one linked css file in multiple pages. CSS enables designers to format pages for a variety of different media, be it the browser screen, printed or other versions, and the webpage authors may simply add their content without changing the design.
STRUCTURE AND LOADING
Each CSS rule is made up with one or more selectors and a declaration block which is contained in curly braces. The contained list of declarations contains a property, then a colon, and then one or more values.
selector { property:value;}
It can be formatted in a variety of ways, but with the selector separated from the brace by whitespace, the property separated from the value by a colon, and the property/value pair should end with a semicolon. Extra whitespace in the form of spaces, new lines and tabs have no effect other than for easy readability.
p {
font-size: 12px;
color: black;
background: white;
}
.outline {
border: 2px solid gray;
margin: 10px;
}
In the above example, the first assigned selector is the html element "p" (paragraph) and the declarations of the font size property is 12 pixels, the text color property value is red, and the background color property value is white. The second selector is a class attribute as it begins with a "." and contains the token "outline". It's assigned border property is 2 pixel solid gray, with a margin of 10 pixels.
<p>This paragraph will be rendered with red text at 12 pixels on a white background</p>
<span class="outline">This text will be surrounded with a 2 pixel gray border</span>
Loading Style sheets
CSS styles can be loaded in many ways. For the page author, they can be loaded with external stylesheets, embedded styles, or inline styles.
EXTERNAL STYLE SHEET
These are separate css files referenced in the document heading using the <link> tag. In the following example the XHTML document loads the css file "mystyles.css" into the webpage. There can be one or more referenced stylesheets. "rel" stands for "relation," for our purposes the relation is a stylesheet. The "media" is a direction to the useragent to apply the display to the computer screen. Other common media attributes are "all", "handheld", "print", "projection", "tty" and "tv". Not all types are supported by web browsers.
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen, print" />
</head>
EMBEDDED STYLES
These selectors are included in the <head> tags of the document and not as a separate file.
<head>
<style type="text/css">
body {
background: #cccccc;
font-face: Arial, etc, etc;
font-size: 10px;
margin: 10px;
}
</style>
</head>
You can also import external style sheet files into the STYLE element using @import
<style type="text/css">
@import url(mystyles.css) screen;
</style>
INLINE STYLES
This type of styling is included in the html of the webpage itself.
<p style="color: blue;">This is blue text.</p>
WHAT DO WE MEAN BY 'CASCADE'?
Style sheets are said to cascade because the properties can be arranged to conflict and over-ride each other with sophisticated rules and priorities. CSS controls the layout display for each target user in special pages or circumstances. For instance, you may wish to display in one font-size for the pc web browser, with larger text sizes for the visually impaired, while switching to another layout for the printed version of the page, or yet another simpler imageless layout for the wap/mobile user version of the page.
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print" />
</head>
In the above case, "mystyles.css" will be loaded by user agents such as Internet Explorer or Firefox. But when the page is printed, it will then take on the styles defined in "mystyles.css" firstly, overridden then by any conflicting styles in "myprintstyles.css". this is useful for changing margins, page width, or hiding sidebars that might be irrelevant to printed matter. When a selector property is defined multiple times with different values, rules of precedence are followed. In other usage, different styles could also be used for different groups of users, such as larger fonts for the visually impaired, or different colour choices for the colourblind
See also
Web Site techniques
Please note that articles in this section of our
web site were current and correct to the best of our ability when published,
but by the nature of our business may go out of date quite quickly. The
quoting of a price, contract term or any other information in this area of
our website is NOT an offer to supply now on those terms - please check
back via
our main web site