List of Topics

SfC Home > Web Design >

 

Concept of Cascading Style Sheets (CSS)

by Ron Kurtus (5 January 2023)

Whereas HTML (Hypertext Markup Language) provides the structure of a web page, a Cascading Style Sheet (CSS) is a set of rules that define the layout of web pages or the way the content is presented.

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.

Questions you may have include:

This lesson will answer those questions.



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 12px, 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>

Styles

Styles can be displayed as inline or embedded.

Inline styles

An inline CSS style can be used if a unique style is to be applied to one single occurrence of an element.

To use inline styles, use the style attribute in the relevant tag. This style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:

<p style="color:blue; margin-left:20px;">

This is a sample paragraph.

</p>

Since the definition of this style is closest to the content of the page, it takes precedence over other defined styles.

Embedded styles

Embedded styles are placed within the <head> section of your web page. Embedded styles are defined using the <style> tag, like this:

<head>

<style>
body {background-color:yellow;}
p {color:blue;}
</style>

</head>

Embedded styles only apply to the specific page. If those styles apply to many web pages, it is often better to put the code in an external style sheet. However, embedded styles can be used for testing purposes.

External style sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

The external style sheet lists all the styles to be used in your website.

Summary

A Cascading Style Sheet (CSS) is a set of rules that define the layout of web pages or the way the content is presented.

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.


Do things with style


Resources and references

Ron Kurtus' Credentials

Websites

Web Design Resources

Books

(Notice: The School for Champions may earn commissions from book purchases)

Top-rated books on Website Design


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_concept.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

Concept of Cascading Style Sheets (CSS)




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.