Scribd
Upload
60 views

CBSE - VIII - CS - Using CSS in HTML

The document discusses using CSS in HTML. It explains that CSS stands for Cascading Style Sheets and is used to describe how HTML elements are displayed. CSS allows controlling layout and formatting across multiple web pages. Reasons for using CSS include separating formatting from HTML content for easier maintenance of large websites. The document also covers CSS syntax, including selectors and properties, and methods for including CSS like inline, internal, and external stylesheets.

Uploaded by

prarthanaprao10
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
60 views

CBSE - VIII - CS - Using CSS in HTML

The document discusses using CSS in HTML. It explains that CSS stands for Cascading Style Sheets and is used to describe how HTML elements are displayed. CSS allows controlling layout and formatting across multiple web pages. Reasons for using CSS include separating formatting from HTML content for easier maintenance of large websites. The document also covers CSS syntax, including selectors and properties, and methods for including CSS like inline, internal, and external stylesheets.

Uploaded by

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

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

You might also like