List of Topics

SfC Home > Web Design > CSS >

 

Cascading Style Sheet (CSS) Overview

by Ron Kurtus (revised 12 November 2014)

A Cascading Style Sheet (CSS) is a set of rules that defines the format of web pages or the way the content is presented, as opposed to using Hypertext Markup Language (HTML) code. Instead of defining the style of each HTML element or tag, it can be done globally with CSS. Also, the use of CSS enables the separation of document content from document presentation.

The style sheet code can be added to a page or exist on a separate file that is used by many web pages. It is possible to have rules override others, according to their use.

The rules define the style of an element or group of elements.

A Cascading Style Sheet consists of a set of rules or code that define the styles of the various web page elements as a way to facilitate the design of the pages. The code can be

Divisions allow for flexibility in formatting a page.

Questions you may have include:

This lesson will answer those questions.



Purpose of CSS

The purpose of using CSS is to solve the problem of formatting web pages.

The purpose of cascading style sheets (CSS) is to be able to define the styles of the various page elements, separate from the content of the page. CSS along with div elements can define the format of a web page.

HTML code isn't really intended for more than the basics of web design. Another problem is that the coding must be added to each item in each page, even though they are identical in design or style.

On the other hand, Cascading Style Sheets are used to format the design or presentation of your pages. CSS code can be added to a page or exist on a separate file, used by many web pages. CSS enables the separation of document content from document presentation.

Another aspect of CSS is that you can divide a page into divisions and set properties or styles within each division. Also, the divisions can be nested, allowing for greater flexibility in formating a page.

CSS rules can be internal or external.

CSS rules

CSS rules can be embedded within the <head> of a web page HTML code. Those rules apply to the whole page. More often, an external CSS file is used, such that it applies to all pages referencing that file.

CSS rules can define the styles of the <body> and the text tags, such as <h1> and <p> for the whole page. Class and ID rules define styles for specific situations.

Simple rule

An example of a simple rule is: p {font-size: 12px;}. Thus, the font size of all paragraph text would be 10px, unless there were some exceptions made.

Class rule

An example of a rule for a CSS class is: .note {font-size: 10px}. Applying the rule to a whole paragraph in HTML would be:

<p class="note">xxxx</p>

Applying the rule to a section of text would be:

<p>Section of <span class="note">text</span> in paragraph.</p>

ID rule

An ID rule can be used only one time on a page. An example of an ID rule in the CSS file is:

#menu {font-size: 10px; font-color: green;}

Thus all the text in the menu division would be 10px and green:

<div id="menu">
Green text
</div>

Cascading rules

The "cascading" concept of a CSS means that rules stated later in the CSS file can take precedence over previously states rules. For example, you might set the general size of the <p> tag but then later set a different size when <p> is in the right column of your page.

Divisions used for formatting

You can divide your web page with divisions, using the <div> tag. Styles can be assigned for all elements within that division. Also, divisions can be nested, giving more flexibility of formatting design.

For example, your web page HTML code could include:

<div id="header">
Header content
</div>

<div id="main_article">
Article content

<div id="left_menu">
Menu content
</div>

</div>

The styles for header, main_article and left_menu are defined in your CSS file.

There are also other elements defined in HTML5 that can be used to facilitate formatting.

Summary

The purpose of Cascading Style Sheets separate document content from document presentation and eliminate the need for defining the styles of each element in HTML code.

CSS consists of a set of rules that define the styles of the various web page elements i to facilitate the design of the pages. The code can be added to a page or exist on a separate file that is used by many web pages.


Follow your heart


Resources and references

Ron Kurtus' Credentials

Websites

Web Design Resources

Books

Top-rated books on Website Design


Questions and comments

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.


Share this page

Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:

 

Students and researchers

The Web address of this page is:
www.school-for-champions.com/web/
css_overview.htm

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

Cascading Style Sheets (CSS) Overview




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



The School for Champions helps you become the type of person who can be called a Champion.