Cascading Style Sheets (CSS) - An Introduction
CGS 3066: Lecture 3
Cascading Style Sheets
CSS 3
●
CSS
stands for
C
ascading
S
tyle
S
heets.
●
Current Version: CSS 3.
●
Supported by most browsers
o
Internet Explorer : 9 and higher
o
Firefox: 15 or higher
o
Chrome: 16 or higher
o
Safari: 4 or higher
o
Opera: 10 or higher
CSS - Intro
●
Styles define how to display HTML
elements.
●
Styles were added to HTML 4.0 to
solve a problem.
●
External Style Sheets can save a lot of
work.
●
External Style Sheets are stored in
CSS files.
Why CSS?
●
The original purpose of HTML was to
combine the structure and content of the
page into one document.
●
When presentation elements began to be
included in the document, it increased the
complexity and reduced readability.
●
Solution: Move the presentation elements
elsewhere.
Why CSS?
●
Separate the “style” elements from the
documents and put it in a “style sheet”.
●
Advantages:
o
Styles can be changed easily.
o
Document is more readable.
3 ways to do styling
●
Inline Style
o
Style elements are included as HTML attributes.
●
Internal Style Sheets
o
A <style> tag is used in the HTML document to
specify the presentation elements.
●
External Style Sheets
o
A separate “.css” file is used as a part of your set of
documents. It contains all the styling elements.
Inline CSS
●
What little styling we’ve been doing so far.
●
Mixes content with presentation. Loses
many of the advantages of a style sheet.
●
Used very rarely (when very few elements
require styling).
●
Add the style attribute to the relevant tag.
The style attribute can contain any CSS
property.
Inline CSS example
<
h1
style=
"color:blue;margin-left:30px;"
>
This is a heading.
<
/h1
>
Internal CSS
●
Used when the current document has a
unique style.
●
A <style> tag is used under the <head> tag
of the document to define the styles.
●
The content of the <style> tag follows CSS
syntax.
Internal CSS example
<head>
<style>
body
{background-color:
linen;
}
h1
{color:
maroon;
margin-left:
40px;
}
</style>
</head>
External CSS
●
Used when a style is applied to many pages
(like a theme).
●
The look of the webpage can be changed by
just changing one file.
●
Each page must include a link to the style
sheet with the <link> tag. The <link> tag
goes inside the head section.
External CSS
●
An external stylesheet is written as a
separate file with a “.css” extension.
●
Should go into the same relative path as the
rest of the files (or can be referred by
absolute path).
●
The external stylesheet should not contain
any HTML tags.
External CSS example
mystyle.css
body
{background-color:
lightblue;
}
h1
{color:
navy;
margin-left:
20px;
}
External CSS example
<
head
>
<
link
rel=
"stylesheet"
type=
"text/css"
href=
"mystyle.css"
>
<
/head
>
Why “Cascading”?
●
Multiple styles will cascade into one.
●
Styles can be specified:
●
inside an HTML element
●
inside the head section of an HTML page
●
in an external CSS file
Cascading Order
Generally speaking we can say that all the styles
will "cascade" into a new "virtual" style sheet by the
following rules, where number one has the highest
priority:
1.
Inline style (inside an HTML element)
2.
Internal style sheet (in the head section)
3.
External style sheet
4.
Browser default
Cascading example
External Style sheet:
h1
{color:
navy;
margin-left:
20px;
}
Internal Style sheet:
h1
{color:
orange;
}
Cascading example
The final style for the h1 element will be a
combination of the two according to the order
of preference:
color: orange;
margin-left: 20px;
Cascading Style Sheets (CSS) is a powerful tool used to define the presentation of HTML elements, allowing for separation of styling from content. This article covers the basics of CSS, its importance, different styling methods, and advantages of using external style sheets. Discover why CSS is essential for enhancing web design and readability.
Uploaded on Nov 18, 2024 | 0 Views
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
CGS 3066: Lecture 3 Cascading Style Sheets
CSS 3 CSS stands for Cascading Style Sheets. Current Version: CSS 3. Supported by most browsers o Internet Explorer : 9 and higher o Firefox: 15 or higher o Chrome: 16 or higher o Safari: 4 or higher o Opera: 10 or higher
CSS - Intro Styles define how to display HTML elements. Styles were added to HTML 4.0 to solve a problem. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
Why CSS? The original purpose of HTML was to combine the structure and content of the page into one document. When presentation elements began to be included in the document, it increased the complexity and reduced readability. Solution: Move the presentation elements elsewhere.
Why CSS? Separate the style elements from the documents and put it in a style sheet . Advantages: o Styles can be changed easily. o Document is more readable.
3 ways to do styling Inline Style o Style elements are included as HTML attributes. Internal Style Sheets o A <style> tag is used in the HTML document to specify the presentation elements. External Style Sheets o A separate .css file is used as a part of your set of documents. It contains all the styling elements.
Inline CSS What little styling we ve been doing so far. Mixes content with presentation. Loses many of the advantages of a style sheet. Used very rarely (when very few elements require styling). Add the style attribute to the relevant tag. The style attribute can contain any CSS property.
Inline CSS example <h1 style="color:blue;margin-left:30px;"> This is a heading.</h1>
Internal CSS Used when the current document has a unique style. A <style> tag is used under the <head> tag of the document to define the styles. The content of the <style> tag follows CSS syntax.
Internal CSS example <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head>
External CSS Used when a style is applied to many pages (like a theme). The look of the webpage can be changed by just changing one file. Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section.
External CSS An external stylesheet is written as a separate file with a .css extension. Should go into the same relative path as the rest of the files (or can be referred by absolute path). The external stylesheet should not contain any HTML tags.
External CSS example mystyle.css body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }
External CSS example <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Why Cascading? Multiple styles will cascade into one. Styles can be specified: inside an HTML element inside the head section of an HTML page in an external CSS file
Cascading Order Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: 1. Inline style (inside an HTML element) 2. Internal style sheet (in the head section) 3. External style sheet 4. Browser default
Cascading example External Style sheet: h1 { color: navy; margin-left: 20px; } Internal Style sheet: h1 { color: orange; }
Cascading example The final style for the h1 element will be a combination of the two according to the order of preference: color: orange; margin-left: 20px;
