New Technologies and What They Mean To You: Part 1 - Cascading Style Sheets
(Page 3 of 5 )
DefinitionCSS is an extension to HTML to allow styles, e.g. colour, font, size to be specified for certain elements of a hypertext document. Style information can be included in-line in the HTML file or in a separate CSS file (which can then be easily shared by multiple HTML files). Multiple levels of CSS can be used to allow selective overriding of styles.
As said above CSS can be included in-line the HTML file or in a separate CSS file. The latter usually has the preference of most designers, due to mutliple reasons:
- You are able to use the defined styles across multiple pages, in stead of limiting the styles to only one page.
- Updating the lay-out takes a lot less work.
- It saves you bandwith, although a tiny amount, it might make a use difference with traffic-high sites.
Linking to an external CSS needs to be done in the following form:
<head><title> Linking to an external stylesheet </title><link rel="stylesheet" type="text/css" href="url_here"></head>Home (http://www.w3.org/Style/CSS/).
With CSS you are able to format your text, form elements and almost every HTML-tag out there. CSS is always written in a special format, which resembles this form:
Tag.class {
attributes
}The tag reflects the HTML-tag you want to apply the style on, for example <p> or <h1>. You can also assign styles to <td> and <table>, as well as all the form elements from <input> to <textarea>.
The class reflects the id of the class. A class is a specific style, and this nifty feature allows you to use several styles with the same tag. In theory this means you are able to use <p> to make a text black, and <p class=green> to make a text green>
To take a closer look at the exact syntax, and at the same time some basic text formatting attributes and classes, take a look at the following code sample:
P {
Text-align: left;
Font-family: Verdana, Arial, sans-serif;
Font-size: 12px;
Font-weight: bold;
Color: #000000;
}
P {
Text-align: center;
Font-family: Times New Roman;
Font-size: 12px;
Font-weight: bold;
Color: #00FF00;
}<p>This will produce left-aligned, black text in Verdana with a size of 12px</p>
<p class=green>This will produce centered green text in Times New Roman.</p>
What It Really IsCascading style sheets are the graphic designer's dream. The finite control that most designers desire can be achieved to a greater extent by using CSS. Offering desktop publishing style control over content, the future of cascading style sheets is bright, allowing the type of control and freedom over web pages that graphic designers have over print based media. It opens doors to typographical layout and manipulation, page formatting, document structure, colour conformity and uniformity. All in all, CSS provides consistency.
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. Style sheets help documents to become media independent; documents can be presented in a similar fashion whether they are printed, displayed on a conventional monitor, or interpreted by a special screen reader for partially sighted or blind people.
Style sheets separate markup language, typically HTML from the markup style attributes, allowing authors to make document wide changes from one central document- a real time saver for developers. The benefits don't just stop there though; because content is kept with minimal markup and styles can be applied using an external style sheet, page download time is also reduced- speeding up the browsing experience for site visitors, and also reducing network traffic.
Advantages- The amount code that needs to be written / checked / edited is significantly smaller then with just HTML, due to the repeated use of styles throughout the documents.
- The control over the the documents presentation is much greater. There is no need to dive into all of the pages, and edit them one by one. Changing a few lines in the styles section of your page, or in your external stylesheet is sufficient to change the look of an entire page – or in the case of an external stylesheet all the pages.
- By using CSS you are certain that the presentation of the document is the same, all pages are alike, because of the styles being defined seperately from the HTML code.
- CSS is also guaranteed to allow rapid conversion of offline material to online material without losing style. CSS even allows you to change the look of your entire website by uploading on external stylesheet and replacing the old one with it.
- CSS is by far one of the most easier languages to learn of the new media and the Internet these days. There are no difficult syntax rules, the amount of attributes is (compared to other languages) relatively small. Yet, being able to work with CSS means a great difference in terms of document creation and presenation.
Disadvantages- CSS is relatively new, and therefore it is not yet widely supported. Although the current browsers are doing their best to support as much CSS as they can, the use of CSS might lead to somewhat cluttered designs, due to the visitors browsers not supporting some of the styles used.
- Without sufficient workarounds to take care of the above described problem, older browsers (who do not support CSS or do not support it completely) fail to display the content correctly.
ExamplesLinking to an external stylesheet:
<head>
<title> Linking to an external stylesheet </title>
<link rel="stylesheet" type="text/css" href="url_here">
</head>Formatting text using CSS:
Code in CSS file:p {
text-align: center;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #000099;
}Code in HTML file:<p>This text will be formatted as described in the CSS code above</p>Changing the colors of links:
Code in CSS file:a {
text-align: left;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #0000FF;
}
a:active {
text-align: left;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #00FF00;
}
a:visited {
text-align: left;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #FF0000;
}
a:hover {
text-align: left;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #000000;
}Code in HTML file:<a href="foo.html" title="Link">Foo</a>The above link will show up blue as default, green when active, red when visited and when the mouse cursor is hovered over the link it will show up black.
CSS on form elements:
Code in CSS file:input.text {
background-color: #CCCCCC;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000099;
}
input.submit{
background-color: #FFFFFF;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
textarea {
background-color: #CCCCCC
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
font-family: Courier;
font-size: 12px
color: #FF0000;
}Code in HTML file:<p>Name: <input type="text" class=text size="25"><br>
Message: <textarea cols="40" rows="20"></textarea>
<input type="submit" class=submit value="Send"></p>The code above will generate 1 textfield with a grey background, which will contain darkblue characters. The textarea will also have a grey background, and have red letters in Courier. The submit-button will have a white background. All these form elements will have a 1px black border.
Next: JavaScript >>
More HTML Articles
More By Jeremy Wright
