Unit-4 Unit-4: Cascading Style Sheet

Unit-4
CASCADING STYLE
SHEET
&
CSS 3
WHAT IS 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.
 External stylesheets are stored in CSS files

CSS SYNTAX
EX.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p{
 color: red;
 text-align: center;
 }
 </style>
 </head>
 <body>
 <p>Hello World!</p>
 <p>These paragraphs are styled with CSS.</p>
 </body>
 </html>
CSS COMMENTS
 Comments are used to explain the code, and may help when you edit the
source code at a later time.
 Comments are ignored by browsers.
Ex.
 <style>
 p{
 color: red;
 /* This is a single-line comment */
 }
 /* This is
 a multi-line
 comment */
 </style>
TYPES OF STYLE SHEETS
 Three Ways to Insert CSS.
 There are three ways of inserting a style

sheet:
External CSS
Internal CSS
Inline CSS
1. EXTERNAL CSS
 With an external style sheet, you can change the look of an entire
website by changing just one file!
 Each HTML page must include a reference to the external style
sheet file inside the <link> element, inside the head section.
 Ex,
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
 The external .css file should not contain any HTML tags.
 Here is how the "mystyle.css" file looks like:
 "mystyle.css“
 body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
2.INTERNAL CSS
 An internal style sheet may be used if one single HTML page has
a unique style.
 The internal style is defined inside the <style> element, inside the
head section.
 Ex.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
 background-color: linen;
 }
 h1 {
 color: maroon;
 margin-left: 40px;
 }
 </style>
 </head>
 <body>
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 </body>
 </html>
3.INLINE CSS
 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.
 Ex.
 <!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>
CLASS & ID SELECTOR
 The class selector selects HTML elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by
the class name.
 EX.
 <html>
 <head>
 <style>
 .center {
 color: red;
 }
 </style>
 </head>
 <body>
 <h1 class="center">Red and center-aligned heading</h1>

 <p class="center">Red and center-aligned paragraph.</p>
 </body>
 </html>
THE CSS ID SELECTOR
 The id selector uses the id attribute of an HTML element
to select a specific element.
 The id of an element is unique within a page, so the id
selector is used to select one unique element!
 To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
EX. ID
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #para1 {
 color: red;
 }
 </style>
 </head>
 <body>
 <p id="para1">Hello World!</p>

 <p>This paragraph is not affected by the style.</p>
 </body>
 </html>
CSS FONT PROPERTIES
Ex. CSS Font Families
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p.serif {
 font-family: "Times New Roman", Times, serif;
 }
 p.sansserif {
 font-family: Arial, Helvetica, sans-serif;
 }
 </style>
 </head>
 <body>
 <h1>CSS font-family</h1>
 <p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
 <p class="sansserif">This is a paragraph, shown in the Arial font.</p>
 </body>
 </html>

Unit-4 Unit-4: Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Unit-4 Unit-4: Cascading Style Sheet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit-4 Unit-4: Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Unit-4

 CSS describes how HTML elements are to be displayed

 CSS saves a lot of work. It can control the layout of

 External stylesheets are stored in CSS files

 /* This is a single-line comment */

 There are three ways of inserting a style

 <h1 style="color:blue;text-align:center;">This is a heading</h1>

 <h1 class="center">Red and center-aligned heading</h1>

 <p id="para1">Hello World!</p>

 font-family: "Times New Roman", Times, serif;

 <p class="sansserif">This is a paragraph, shown in the Arial font.</p>

You might also like