Cascading Style Sheets
Lesson 21
lesson 21
After this lesson, you will be able to
answer the following questions:
✓ How to insert CSS ?
✓ What is an External, Internal, Inline CSS?
How to insert CSS ?
When a browser reads a style sheet, it will format
the HTML document according to the information
in the style sheet.
There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS ?
The external CSS is linked to
the HTML file
✓ With an external style sheet, you can change the look of an entire website by
changing just one file!
1. To link the external CSS we will use the <link> element inside the <head>
element
2. We will use the attributes rel, type and href to reference the external style
sheet
3. The value of the href is the file name of our external CSS File
<html>
<head>
<link rel="stylesheet“ type=“text/css” href="mystyle.css">
</head>
<body> The filename of the
</body> external style sheet
</html>
Let’s have a scenario
of how external CSS
works
1
• I have a file written on css
• I save the file as style1.css
body {
background-color: lightblue;
}
#text {
color: navy;
margin-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=“style1.css">
</head>
<body> 2
• I have a file written on html
<h1 id=“text”>the color of this text is navy</h1> • I save the file as 1.html
• I insert the style1.css file using the
link element
• Take note the 1.html and
</body>
style1.css are in the same folder
</html> (for this example only to make it simple)
style1.css 1.html
<!DOCTYPE html>
<html>
body { <head>
background-color: lightblue; <link rel="stylesheet" href=“style1.css">
}
</head>
#text { <body>
color: navy;
margin-left: 20px; <h1 id=“text”>the color of this text is navy</h1>
}
</body>
</html>
style1.css 1.html
<!DOCTYPE html>
<html>
body { <head>
background-color: lightblue;
<link rel="stylesheet" href=“/compro/css/style1.css">
}
</head>
#text { <body>
color: navy;
margin-left: 20px; <h1 id=“text”>the color of this text is navy</h1>
}
</body>
</html>
• In this example style1.css is saved on C: > compro folder > css folder > style1.css
Hands On Demo
Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
• The internal style is defined </head>
inside the <style> element, <body>
inside the <head> section. <h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Hands On Demo </html>
Inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element.
• The style attribute can contain any CSS property.
• The value of the style attribute is the css declaration
(that is composed of )
css property name:css property value;
Hands On Demo
What will happen?
I have an external and internal style sheets (CSS)
Both have the same selector but has different declaration (or design)
What will be the final design?
External CSS internal CSS
style.css h1 {
h1 { color: magenta;
color: blue; }
}
HTML file
<h1> what is the color? </h1>
the last read style sheet will be used
If the internal style is defined after the link to the external style sheet, the <h1>
elements will be “magenta“ because the internal style was the last read
HTML file
<html>
External CSS <head>
style.css <link rel="stylesheet" type="text/css" href="style.css">
h1 { <style>
color: blue; h1 { 1st read
color: magenta;
} }
</style>
last read
</head>
<body>
<h1> what is the color? </h1>
</body>
</html>
This scenario occurs only
when multiple style sheets
with the same selectors are
used.
LESSON 21
