Subject: Computer Studies
Topic: Using CSS in HTML
Std: VIII
CB/VIII/2122 Using CSS in HTML 1 of 16
CSS
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
CB/VIII/2122 Using CSS in HTML 2 of 16
Reasons for using CSS
• HTML was created to describe the content of a web page.
Example:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML
3.2 specification, it started a problem for web developers. Development
of large websites, where fonts and color information were added to
every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created
CSS.
CSS removed the style formatting from the HTML page.
CB/VIII/2122 Using CSS in HTML 3 of 16
CSS Syntax
selector property
value
h1 { color:red; font-size:14px ; }
property value
CB/VIII/2122 Using CSS in HTML 4 of 16
CSS Example
CB/VIII/2122 Using CSS in HTML 5 of 16
Some More Examples
p{
Paragraph is displayed in red
color:red; Aligned to center of the page
text-align:center; }
hr { color:sienna; height:5px; } Horizontal rule’s color and
thickness are set
body{ color:#0000FF;
background-color:yellow;
Text color, Background color and
background-image:url(“back.gif”); } color of text is specified
CB/VIII/2122 Using CSS in HTML 6 of 16
Including CSS in HTML
• Inline style
• Internal Style sheet
• External Style sheet
CB/VIII/2122 Using CSS in HTML 7 of 16
Inline style
Style attributes are added to the relevant tag itself.
Style attribute will have to be specified for every tag.
p
{ style=“color:blue;
margin-right:20px;”
}
CB/VIII/2122 Using CSS in HTML 8 of 16
Internal Style Sheet
Internal Style sheet is defined in the <head> section
of the HTML page inside the <style> tag.
<head>
<style type=“text/css”>
p { color:blue;
margin-right:20px; }
hr { color:sienna;}
</style>
</head
It is used for a single document which has a unique style.
CB/VIII/2122 Using CSS in HTML 9 of 16
External Style Sheet
External stylesheet is separate file saved with the extension .css in which
CSS codes are defined. A link is created to this file in the web page.
<head>
<link rel=“stylesheet”
type=“text/css” href=“style1.css”>
</head>
• Many HTML files can be linked to a single CSS file
• Global changes can be made by changing just one file
CB/VIII/2122 Using CSS in HTML 10 of 16
Spot the Differences
CB/VIII/2122 Using CSS in HTML 11 of 16
CSS Selectors
• element selector
p { color:red; text-align:center; }
• id selector
<style> #pg1 { color:red; } </style>
<p id=“pg1”> Hello world</p>
• class selector
<style> .cent { color:red; } </style>
<h1 class=“cent> Hello world</h1>
CB/VIII/2122 Using CSS in HTML 12 of 16
CSS Background properties
• Used to define background styles of an element
• background-color
• background-image
• background position
• background-repeat
h1{background-color:#b0c4de;}
body{background-image:url(“lotus.gif”);
background-repeat:no-repeat;
background-position:right top;}
CB/VIII/2122 Using CSS in HTML 13 of 16
CSS text properties
• color
body{color:red;} h1{ color:#00ff00;} p.ex{ color:rgb(0,0,255) ;}
• text-align
h1{text-align:right;} p.main{text-align:justify;}
• text-decoration
h2{text-decoration:underline;}
• text transform
p.main{text-transform:capitalize;}
• text indent
p{text-indent:50px;}
CB/VIII/2122 Using CSS in HTML 14 of 16
CSS Fonts
• font family
• font style
• font weight
Examples--
p.itc { font-style:italic; }
p.thick { font-weight:bold; }
p.thicker { font-weight:900; }
p { font-family: “Times New Roman”, Times, Calibri; }
CB/VIII/2122 Using CSS in HTML 15 of 16
HTML5
• latest standard for HTML
• used to deliver rich multimedia content without plugins
• supported on multiple platforms (PC, tablet, smartphone, smartTV)
• major browsers support HTML5
CB/VIII/2122 Using CSS in HTML 16 of 16
