Scribd
Upload
1 views

Chap 5 - CSS

Chapter 5 introduces CSS (Cascading Style Sheets), which is used to style web pages and control the layout of multiple pages simultaneously. It covers two main types of CSS: Internal CSS, defined within the HTML document, and External CSS, linked through a separate .css file for use across multiple HTML documents. The chapter includes examples demonstrating how to implement both types of CSS and highlights the advantages of using External CSS for consistency across web pages.

Uploaded by

Rizwan Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
1 views

Chap 5 - CSS

Chapter 5 introduces CSS (Cascading Style Sheets), which is used to style web pages and control the layout of multiple pages simultaneously. It covers two main types of CSS: Internal CSS, defined within the HTML document, and External CSS, linked through a separate .css file for use across multiple HTML documents. The chapter includes examples demonstrating how to implement both types of CSS and highlights the advantages of using External CSS for consistency across web pages.

Uploaded by

Rizwan Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 16

Chapter 5

CSS
CSS Introduction
• CSS stands for Cascading Style Sheet
• It is the language we use to style a Web page
• CSS describes how HTML elements are to be
displayed i.e. it is used to format the layout of
a webpage.
• CSS saves a lot of work. It can control the
layout of multiple web pages all at once (i.e.
we define CSS file only once but it applies to
many web pages
• CSS files extension is .css
Types of CSS
Most commonly 2 types of CSS used:
•Internal CSS
•External CSS
Internal CSS
• It defines a style for a single HTML page.
• Internal CSS is defined in the <head> section
of an HTML page, within a <style> element
Example - Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;}
h1 {color: white;}
p {color: red;}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>
Output
.

This is a heading
This is a paragraph.
About Internal CSS
• Style Sheet is defined between <style> and
</style>
• Background Color of screen
background-color: lightblue;
• Color names are standard e.g. light-blue is
incorrect
• h1 {color: white;}: Heading of color is white
• p {color: red;}: Paragraph is in red color
• Within <body> these styles are applied
External CSS
It is used when you want to define styles for
multiple web pages
Example 1 - External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is heading 1</h1>
<p>This is paragraph 1</p>
</body>
</html>
-------------------------------------------------------------------------
Write this above program in a text editor and save it as
myexternal1.html
Example 1 - External CSS cont…
Here you have to define a file mystyle.css
-------------------------------------------------------------------------
body {
background-color: lightblue;
}
h1 {
color: white;
margin-left: 20px;
p {color: red;}
}
-------------------------------------------------------------------------
Write the above program in a text editor and save it as
mystyle.css
Example 1 - External CSS cont…
• With the following “link” element, we are
connecting (relating) our HTML page with CSS
• <link rel="stylesheet" type="text/css" href="mystyle.css">
here word “text” is used because out HTML page contains text
• When you run myexternal1.html, it will
automatically adopt the style from mystyle.css
• In CSS files, "px" stands for "pixels", which is a
fixed unit of measurement representing a
single dot on the screen.
• margin-left: tells the browser, how much space
to be given on left margin
Output
.

This is heading 1
This is paragraph 1
Example 2 - External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is heading 2</h1>
<p>This is paragraph 2</p>
</body>
</html>
-------------------------------------------------------------------------
Write this above program in a text editor and save it as
myexternal2.html
Output
.

This is heading 2
This is paragraph 2
Advantage of External CSS
• Note that both programs myexternal1.html
& myexternal2.html are using the same
style sheet mystyle.css

myexternal1.htm
l
mystyle.css
myexternal1.htm
l
• This is the main advantage of External CSS,
you can write a large number of HTML
programs which may use one CSS file
.

End of Chap 5

You might also like