Scribd
Upload
77 views

Unit-4 Unit-4: Cascading Style Sheet

The document discusses Cascading Style Sheets (CSS) which is used to style and lay out HTML elements. CSS allows control of elements' color, size, spacing and more across multiple web pages by defining styles in separate CSS files or internally in HTML. CSS selectors like class, id and element select the HTML elements to which styles apply. Common CSS properties control fonts, text alignment, background colors and other visual aspects of web pages.

Uploaded by

DOT LINE
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
77 views

Unit-4 Unit-4: Cascading Style Sheet

The document discusses Cascading Style Sheets (CSS) which is used to style and lay out HTML elements. CSS allows control of elements' color, size, spacing and more across multiple web pages by defining styles in separate CSS files or internally in HTML. CSS selectors like class, id and element select the HTML elements to which styles apply. Common CSS properties control fonts, text alignment, background colors and other visual aspects of web pages.

Uploaded by

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

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 */

 text-align: center;

 }

 /* 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 {

 text-align: 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 {

 text-align: center;

 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>

You might also like