Introduction to CSS for Web Design
What is CSS?
Cascading style sheets (CSS) were introduced in the late 1990s as a way for Web developers to control the look of all the pages on a site. This not only saved time when coding HTML (hyper-text markup language) but allowed developers to simplify design efforts by providing a standard format for page layout. All browsers today support CSS, and some support many elements of the newest version, CSS 3.
Using CSS
Style sheets have been used in document design well before HTML came along. Instructions that dictated the fonts and formats to be used often accompanied manuscripts that were sent to a printer. A Web page is also a document. The HTML tells your browser how to display it. Using style sheets to format Web pages only made sense as the Internet boomed in popularity and sites became more complex.
Computing made possible the critical idea of cascading – a style sheet could be “cascaded” through a whole series of sheets like a waterfall tumbling over many rocks but still forming the pool at the bottom. Pages without any specific format will use the default settings of the browser. By using style sheets developers can control exactly how the page renders to the user. If Internet Explorer’s default is left-aligned Times New Roman black font, sized 10, I can easily change it on all 10 pages of my site by using:
p {
font-family: “Garamond”;
font-size: 16;
text-align: center;
color: navy;
}
You save these instructions to a text file with the suffix “.css” and reference it from the head section of each page with:
link rel=”stylesheet” type=”text/css” href=”navygaramond.css”
CSS can also be used internally to control specific elements on each page, such as:
h1 {
color: red;
margin-left: 30px;
}
This dictates that all H1 headers use red text and an indentation of 30 pixels. You can change the default look of borders, tables, lists, and much more.
Where can CSS be used?
CSS can be used for not just HTML, but documents such as XHTML and XML You can also create style sheets to describe how the page should look when it’s sent to your printer, or how it should display in other media such as a slide show. You can create and use multiple CSS instructions in any way you wish.
Why CSS is essential
CSS is a very powerful tool for Web design because it allows developers to apply any number of looks to all pages or just specific pages or elements. It sets the tone for an entire Web site. Well-structured style sheets can be updated easily to change the look of pages without every looking at the HTML or XML code of the page itself. You only have to change the CSS sheet the page uses.
CSS is also very easy to use once you become familiar with it. There were only about 70 different elements to CSS 2. This is actually much simpler than HTML, which has evolved more rapidly to HTML 5 and covers hundreds of tags and attributes.
CSS allows developers to cascade, combine, and manipulate the look of different elements. It can be tricky, as some browsers will interpret CSS differently. The power of CSS is that it allows you to create limitless pages of a uniform appearance with a few commands. This allows you to focus on the extra features and the quality of content that engages visitors to your site.
But that wouldn’t be possible without a consistent, professional look. Easily creating and customizing that look is why no serious Web designer can ignore CSS.
Resources:
CSS3 Tutorials for web professionals.
Las Vegas Web Design by professional, and experienced website designers.
Graphic design tips for new website designers that are not graphic designers.