Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Press CTRL + D to
Bookmark this Page

What is CSS?

What is CSS? - The Definition

CSS, otherwise known as Cascading Style Sheets, is simply an extension of HTML programming that aids web programmers and designers in formatting web page elements. Once you start working with CSS, you will recognize much of the code and it's formatting from the HTML you already know.

What makes style sheets cascading is that the settings "cascade" as the closer the style definition is to the actual code it formats, the more precedence it has over other style definitions for the same element. Additionally, style definitions are inherited; meaning that if the first paragraph style definition says to display the text in red and the second paragraph style definition makes no mention of color - it too will be red. This will make more sense once we get further into how this all works.

What is CSS? - The Benefits

There are two main benefits to using CSS - reusability of code and reduced file size.

The benefits of reusable code are somewhat obvious, so I'll skip that for now and talk a moment about reduced file size.

You, the webmaster, have scant seconds to intrigue site visitors into further delving into your website. The larger the size of your HTML files, the longer the page takes to load. If it takes too long, people will leave your site.

Reduced file size can also have SEO or search engine optimization benefits. Many believe that the more buried the core content of a page within the code, the more difficult it is to rank in the search engines. Some also believe that Google's spider only reviews the first so many bytes (a number quite disagreed upon) or some number of lines (also under debate) of the file. So, along with getting the core content of that page higher in placement in your HTML file, using CSS will also increase the probability that that content is properly reviewed by the search engines.

What is CSS? - Introduction to Formatting

There are 3 ways to implement CSS within your webpages - externally (most useful for reuse and limiting file sizes), internally (used for elements unique to that page or to over-ride an external style sheet), and inline (best for one time styles and over-riding both external and internal style sheets).

External Style Sheets

External Style Sheets are text files with an extension of .CSS and are the best way to ensure a uniform display of all pages within a website.

HTML files that rely on external style sheets require a line of code in the heading section of the file. This line of code looks like the following:

<link rel="stylesheet" href="style.css" type="text/css" media="all">

Be sure to modify the href (file location) as appropriate to the name of your external style sheet and it's location. If you have your website set up where the HTML files are in different directories - don't forget to change the location as needed if you are not using the full directory path for the location of your external style sheet.

The media attribute designates when the style sheet should be used in relation to what sort of device is being used to view the webpage. There are 9 supported media types - all, aural, braille, handheld, print, projection, screen, tty, and tv. Each type could have it's own corresponding external style sheet. Keep in mind not all of them may be supported by all devices and web browsers. Most programmers mainly use "all", "print", and "screen".

ALL - used to indicate that the style sheet is to be used for all types of viewing devices. This is the "default" value used by most web programmers.

PRINT - used to define styling for printing the webpage. Be sure to check out our article on creating Print Style Sheets for more information.

SCREEN - typically used in combination with a print stylesheet to identify those style settings that are not going to be printed. Our article on Print Style Sheets also contains information on Using No Display in Style Sheets to prevent ink-intensive page elements from printing or specify information that is not displaed on the screen but is used when the page is printed.

Internal CSS

Internal CSS is when the CSS formatting appears within the HTML file - any styles defined this way will only be applied to that single webpage. Like, external style sheets, internal styles can be used to impact an element each time it appears on the page.

Internal CSS code appears in the HEAD element of a webpage. What follows is an example of styling a paragraph to have blue text and be bold-faced:

<style type="text/css">
<!--
p {color: blue; font-weight: bold}
-->
</style>

The code that looks like a comment (<!-- and -->) is required and your page will not function properly without it. Internal and external style sheet definitions are coded the same.

Don't forget to use the curly brackets for each page element and semi-colons between style settings.

Inline CSS

Inline CSS declarations are mainly used for 2 reasons, if the style will only be applied once and to over-ride previous styling for that element (remember, style formats cascade and this may be the best way to ensure that a particular element displays as you want it to).

Why would you over-ride a previous style definition? Perhaps we have all of our paragraph text appearing in red but, there is a particular place where you want them to be blue and bold-faced. You could create an entry in your external or internal style sheet for this one instance, or you could simply put the style code inline within the paragraph tags.

To keep with our example of a blue paragraph...

<p style="color: blue; font-weight: bold;">This text would appear blue if coded this way.></p>

While the second semi-colon is not required, many believe it is good form, and I find it makes me less apt to forget if I later go back and add more styling to an element.

Cascading & Inheritance

Let's say your webpage makes use of all 3 types of styling and each has a style definition for paragraphs.

The way the style definitions are applied is that those settings in the external style sheet are considered first. The style definitions in the internal (in the heading) style definitions are considered second and if different over-ride any defined in the external style sheet. The inline style definitions are considered last and if different will over-ride both the external and internal definitions.

For example, let's say we have the following definitions; for each one the formatting applied up to that point is also displayed:

External Style Sheet Only

p {font-family: serif; color: red;} ==> What this looks like.

Both an External Style Sheet & Internal Style Sheet

p {text-decoration: underline;} ==> What this looks like.

External Style Sheet, Internal Style Sheet & Inline Style Definition All Used

<p style="color: blue; text-decoration: none; font-weight: bold;"> ==> What this looks like.

Notice how the inderline text-decoration is 'turned off' by the text-decoration being set to none.

What is CSS? - How To Code Style Sheets

While not all that complicated, explaining how to code style sheets is too vast a subject to cover in only one article.

Here's the current and growing list of CSS tutorials on Help For Web Beginners:

How To's About CSS

CSS Font Size and Font Family

CSS Font Style, Font Variant, and Font Weight

CSS Code For Backgrounds

How To Format Output With a Print Stylesheet

How To Make Link Tags Different Colors on the Same Page

Learn how to make a two-column page layout with fixed left navigation.

How To's that Use Inline CSS in the Examples

Marquee Tag

Marquee Text Formatting

How to Change MySpace Backgrounds

Using Images for MySpace Backgrounds

MySpace Borders and Navigation Menus

Images & Marquees Across MySpace Pages

About the Author

HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming or MySpace related tutorials you would like to see.