Beginning Css the Basics Introducing Cascading Style Sheets

BEGINNING CSS – THE BASICS – INTRODUCING CASCADING STYLE SHEETS

What you will learn:

What CSS is

The history of CSS

How to create a CSS enhanced HTML document

Cascading Style Sheets (CSS) is a language designed for describing the appearance ofdocuments written in a markup language such as HTML. With CSS you can control the colourof text, the style of fonts, the spacing between paragraphs, how columns are sized and laidout, what background images or colours are used, and a variety of other visual effects. One of the major benefits is that the same CSS can be used by more than one page, meaning that thestyle of an entire website can be adjusted without having to change each page individually.

The most common use for CSS is to style web pages, and in combination with HTML orXHTML (which is used to describe content) and JavaScript (which is used to add interactivityto a site), CSS is a very powerful tool.

Short History

In the early days of the Web, nine different proposals were made to the World Wide WebConsortium, the main standards organization for the Web which is more commonly known asthe W3C, for a style sheet language to help separate the visual appearance of a document from itscontent. In 1994, Cascading HTML Style Sheets (CHSS) was proposed by Håkon Wium Lie, (now CTO ofOpera Software), who at the time was workingat CERN with TimBerners-Lee and RobertCailliau - the two men who invented the World WideWeb. CHSS became CSS because CSS can be applied to more than just HTML, and in December 1996 the CSSLevel 1 Recommendation was published.

Since then, three more CSS specifications have been published by the W3C. CSS 2 became arecommendation in 1998, with CSS 2.1 (which fixes a few mistakes in 2) has recently become a fully fledged recommendation in June, 2011. CSS 3 currently exists as a candidate recommendation.

Although CSS 3 is still under development, CSS 2.1is well supported by all modern browsers.

Advantages of Using CSS

By using CSS for the presentation of a document, you can substantially reduce the amount of timeyou spend composing not only a single document but an entire website. As you’ll discover, CSS ismuch more versatile than the styling mechanisms provided by HTML alone. The versatility of CSS when harnessed effectively can reduce the amount of hard disk space that a website occupies, aswell as the amount of bandwidth required to transmit that website from the server to the browser.

CSS has the following advantages:

The presentation of an entire website can be centralised to one or a handful of documents,enabling the look and feel of a website to be updated at a moment’s notice. In legacy HTMLdocuments, the presentation is contained entirely in the body of each document. CSSbrings a much needed feature to HTML - the separation of a document’s structure from itspresentation. CSS can be written independently of HTML.

Browsers are beginning to support multiple alternative style sheets, a feature that allowsmore than one design of a website to be presented at the same time. The user can simplyselect the look and feel that he or she likes most. This could only be done previously with theaid of more complex programming languages.

Style sheets allow content to be optimized for more than one type of device. By using thesame HTML document, different versions of a website can be presented for handheld devicessuch as PDAs and cell phones or for printing.

Style sheets download much more quickly because web documents using CSS commonlyconsume less bandwidth. Browsers also use a feature called caching, a process by which your browser will download a CSS file or other web document only once, and not request that filefrom the web server again unless it’s been updated - further providing your website with thepotential for lightning-fast performance.

Users of a website can compose style sheets of their own, a feature that makes websites moreaccessible. For example, a user can compose a high-contrast style sheet that makes contenteasier to read. Many browsers provide controls for this feature for novice users, but it is CSSnonetheless.

These features, along with the power of the cascade, make the planning, production, and maintenance of a website simpler with Cascading Style Sheets thanwith HTML alone. By using CSS to present your web documents, you can cut days of developmentand planning time.

How to Write CSS

To write CSS, just as is the case when writing HTML source, you will need a text editor. Word processing programs such as Microsoft Word aren’t ideally suited for CSS, because theyautomatically do lots of things that are helpful when writing a letter or book, such as correctspelling but get in the way when writing code.

Instead, you want something that doesn’t make any changes that you don’t want to what youtype but lets you write and save plain text.

The Windows Notepad program is one example of a text editor that is ideal for composing sourcecode. On Mac OS X, the Notepad equivalent is TextEdit.

There are more advanced text editors that will do useful things such as colour your code so that it isclear which parts do what (this is known as syntax highlighting) or automatically complete code foryou when you’ve started typing.

Editors available for Windows include:

Notepad++: (free)

CrimsonEditor: (free)

HTML-kit: (free)

And here are some alternative text editors that work with Mac OS X:

TextWrangler: (free)

TextMate: (retail with 30 day free trial)

You can find more text editors suitable for CSS and HTML at

In addition, there is the very popular Adobe Dreamweaver ( combines a text editor with a WYSIWYG (or What You See Is What You Get) codegenerator, which lets you use a graphical interface to create web pages in HTML and CSS.

Note: You must create HTML files with the .html or .htm extension. If you use Notepad or TextEdit, beware of your files being saved with a .txt extension, which will result in a web browser interpretingyour file as ordinary text rather than HTML.

Your First CSS-Enabled Document

The following example is designed to introduce you to what CSS is capable of. It will help you get your feet wet and get straight down to the business of writing style sheets.

TRY IT OUT!

Create a new folder in your MySites folder called Beginning CSS – The Basics. In the Beginning CSS – The Basicsfolder create a new folder called images.

Copy the images from the images folder located on BREO in a zipped file named Beginning CSS – The Basics to your images folder.

Define a new Dreamweaver site called Beginning CSS – The Basicsand set the root folder as the Beginning CSS – The Basicsfolder that you have just created.

Create a new HTML page and save the page as example_1-1.html.

In Code view, you will see the basic HTML skeleton structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

Edit the code to read as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns=" lang="en">

<head>

<title>Example 1-1</title>

</head>

<body>

<h1>The Gas Giants</h1>

<h2>Jupiter</h2>

<p>Jupiter is the fifth planet from the Sun and the largest planet within the Solar System. The Romans named the planet after the god Jupiter. It is a gas giant with a mass two and a half times the mass of all the other planets in our Solar System combined.</p>

<table>

<caption>Jupiter Facts</caption>

<tbody>

<tr>

<th>Distance from the Sun</th>

</tr>

<tr>

<th>Equatorial Radius</th>

</tr>

<tr>

<th>Volume</th>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

<h2>Saturn</h2>

<p>Saturn is the sixth planet from the Sun and the second largest planet in the Solar System, after Jupiter. Saturn is named after the Roman god Saturn, equated to the Greek Cronus (the Titan father of Zeus), the Babylonian Ninurta, and the Hindu Shani.</p>

<table>

<caption>Saturn Facts</caption>

<tbody>

<tr>

<th>Distance from the Sun</th>

</tr>

<tr>

<th>Equatorial Radius</th>

</tr>

<tr>

<th>Volume</th>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

<h2>Uranus</h2>

<p>Uranus is the seventh planet from the Sun, and the third-largest and fourth most massive planet in the Solar System. It is named after the ancient Greek deity of the sky Uranus the father of Cronus and grandfather of Zeus.</p>

<table>

<caption>Uranus Facts</caption>

<tbody>

<tr>

<th>Distance from the Sun</th>

</tr>

<tr>

<th>Equatorial Radius</th>

</tr>

<tr>

<th>Volume</th>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

<h2>Neptune</h2>

<p>Neptune is the eighth and farthest planet from the Sun in our Solar System. Named for the Roman god of the sea, it is the fourth-largest planet by diameter and the third-largest by mass.</p>

<table>

<caption>Neptune Facts</caption>

<tbody>

<tr>

<th>Distance from the Sun</th>

</tr>

<tr>

<th>Equatorial Radius</th>

</tr>

<tr>

<th>Volume</th>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Save the web page example_1-1.html and view the page locally in a browser. The page should appear as follows:

Now, create a new blank CSS file and enter the following code:

body {

width: 650px;

margin: 0 auto;

background: #000;

color: #FFF;

font: 12px sans-serif;

}

h1 {

font-size: 24px;

}

h2 {

font-size: 18px;

margin-top: 0;

}

a {

color: #FFF;

}

a:focus,a:hover {

text-decoration: none;

}

table {

margin-bottom: 10px;

border-spacing: 0;

}

caption {

margin-bottom: 10px;

font-size: 14px;

font-weight: bold;

text-align: left;

}

th,td {

padding: 0 10px 0 0;

text-align: left;

}

.planet {

margin: 10px 0;

padding: 20px 20px 20px 200px;

border: 1px solid #FFF;

background-position: 20px 20px;

background-repeat: no-repeat;

}

.jupiter {

}

.saturn {

}

.uranus {

}

.neptune {

}

Save the CSS file as example_1-1.css. Open the web page example_1-1.html andview the file locally in your browser.

The CSS results in the change in the appearance of the page as shown below (when viewed in Internet Explorer 8.0 on a Windows OS).

Example 1-1 is an introduction to a little of what CSS is capable of. This example is designed to get your hands dirty up front with CSS. You can see that CSS can be used to specify background images and other aesthetic aspects of an HTML document. If you are feeling adventurous, play around with the CSS used here. Try changing some of the values to see what happens.

You should also experiment by viewing the page in different browsers.

Browsers

Unlike with many traditional programming languages on the Web, we don’t get to choose theenvironment in which CSS and HTML is run. Your end users make this decision by selecting whichweb browser they use. Although CSS is a standard supported by all major browsers, there are often differences between them - so it is important to be aware of the most popular browsers and to be able to test ineach of them before releasing professional code.

It is worth taking a look at Yahoo!’s Graded Browser Support page at which is regularly updated to show the current range of browsers thatYahoo! recommends that developers test in. It is based on traffic analysis to the Yahoo! network andis quite representative of the Internet as a whole.

You can break down browsers into groups based on the engine that they use for rendering pages. This means browsers that share the same rendering engine are more likely to display things in the same way and this can cut down on testing.

Webkit

Webkit is the rendering engine used by the Apple Safari and Google Chrome browsers. It has goodsupport for CSS 2.1 and supports many features of CSS3.

Safari

Safari is a browser based on the Webkit rendering engine from Apple. It is available for Windowsand Mac OS X from The current version of Safari is version 5 and has just under 6% market share.

Google Chrome

Google’s Chrome is also based on the Webkit rendering engine. It is available for Windows and MacOS X from Chrome (the current version is 10) has just over 14% market share. While Chrome is thenewcomer to the browser market it is showing rapid rates of adoption and is under heavily activedevelopment from Google with new versions released regularly.

Trident

Trident is the engine used by Internet Explorer from Microsoft and comes with the Windowsoperating system. After many years of market dominance, there are four versions of InternetExplorer in wide use today. Overall, Internet Explorer has more than 46% market share. You can download all four versions from

Internet Explorer 9

Internet Explorer 9 is the latest version of Microsoft’s browser. Internet Explorer 9 has good support for both CSS 2.1 and CSS3.

Internet Explorer 8

Internet Explorer 8 is currently the most widely used version with around a 27% market share. Internet Explorer has decent support for CSS 2.1 but is lagging behind other major browsers insupport for CSS 3.

Internet Explorer 7

While Internet Explorer 7 never built the market share of version 8 or that of its predecessor,version 6, it still has over 10%market share. While Internet Explorer 7 has decent support for CSS 2.1, it is lacking in support for CSS 3.

Internet Explorer 6

Even though it was released back in 2001, Internet Explorer 6 still has over 16% market share. This is thankfully dropping, but this browser will be around for a while and still needs to be testedin for good coverage of the market. Internet Explorer 6 has support for much of CSS 2.1 but is missing parts that would otherwise makedevelopment much easier. It lacks support for CSS 3.

Installing Multiple Versions of Internet Explorer for Testing

You cannot install different versions of Internet Explorer on the samecopy of Windows. For development, you need a way to test IE 6, IE 7, IE 8, and IE 9, since you’llhave visitors to your website on all four browsers. The following are a few ways to do this.

Use PC virtualization/emulation software such as Virtual PC or VirtualBox which allows you to install and run different versions of Windows (or other operating systems such as Linux)from within Windows or Mac OS X. You can load up a new instance of Windows from yourWindows desktop and have that instance of Windows run in a window independently.

Another option is setting up multiple different physical computers: one with each version ofInternet Explorer installed. This is obviously a more costly option, but might be possible in acommercial environment.

Gecko

While there are many uncommon browsers that use the Gecko rendering engine for practicalpurposes, you only need to consider one: Mozilla Firefox.

Firefox

You can download Firefox for Windows, Mac OS X, and Linux at Firefox 3.6 has just over 30% marketshare, making it the second most popular browser. Firefox has good support for CSS 2.1 and supports many features of CSS3.

Presto

The Presto rendering engine is developed by Opera Software for their own range of browsers.

Opera

Opera is a web browser from Opera Software, which has a small marker share of just over 2%. While commanding a small market share for desktop browsers, it is a major player in the rapidlyexpanding mobile market. Opera has good support for CSS 2.1 and supports many features of CSS3. The current version of the Opera browser is 11. You can download this browser for Windows,OS X, and Linux from

Exercises:

What are the key benefits of CSS?
Name the 5 main web browsers used today.
Which is the latest version of Internet Explorer?

Summary

Cascading Style Sheets are the very necessary solution to a demand for more control over thepresentation of a document.

Topic / Key Concepts
Why CSS is needed / CSS answers a need for a style sheet language capable of controlling the presentation of not only HTML documents but also several types of documents.
Benefits of CSS / CSS has many advantages. These include accessibility, applicability to more than one language, and applicability to more than one type of device. CSS also allows websites to be planned, produced, and maintained in much less time. CSS enables websites to take up significantly less bandwidth than formerly possible.
Browsers / Safari, Chrome, Internet Explorer, Firefox, and Opera make up the majority of browsers in use today, with Internet Explorer 8 being the world’s most popular browser.

A - Beginning CSS -The Basics - Introducing Cascading Style Sheets.docVersion 1

Page 1 of 13