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:
- What are the types of CSS Rules?
- What are the types of styles?
- What is an external style sheet?
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
Websites
Books
(Notice: The School for Champions may earn commissions from book purchases)
Top-rated books on Website Design
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.
Where are you now?
Concept of Cascading Style Sheets (CSS)