Scribd
Upload
19 views11 pages

Cascading Style Sheets

This document provides an overview of Cascading Style Sheets (CSS), detailing its syntax, structure, and types of style sheets including inline, internal, and external styles. It includes examples of how to implement CSS in HTML documents and explains the components of CSS syntax, which consists of selectors and declarations. The document emphasizes the flexibility of CSS in modifying styles and layouts for web pages.

Uploaded by

Thanushree V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views11 pages

Cascading Style Sheets

This document provides an overview of Cascading Style Sheets (CSS), detailing its syntax, structure, and types of style sheets including inline, internal, and external styles. It includes examples of how to implement CSS in HTML documents and explains the components of CSS syntax, which consists of selectors and declarations. The document emphasizes the flexibility of CSS in modifying styles and layouts for web pages.

Uploaded by

Thanushree V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

UNIT- 04

CASCADING
STYLE
SHEETS
0 INTRODUCTION
1

TABLE OF
0
CONTENTS 2
CSS SYNTAX

03 LEVELS OF STYLE
SHEET

STYLE SPECIFICATION
04 FORMAT
INTRODUCTION

CSS

It is commonly used to define styles and layouts of Web Pages written in HTML and XHTML
Example :
<html>
<head>
<title>CSS Example</title>
</head>
<p style="background-color: yellow; color: red; border: 1px solid black; font-size: 30px;
font-family: calibri“> The css file contains the style code for the structure such as headings,
Paragraphs and links. The style Patterns and Layouts defined in a css file can be modified
by making the required changes in the code of the css file.
</p>
</body>
</html>
CSS SYNTAX
CSS syntax consists of 2 parts:
1. Selector
2. Declaration
* Property
* Value
Syntax: Selector{Declaration}
Ex: P { background-colour : red }

Selector Property Value


Example:
<html>
<head>
<title>CSS Example</title>
<style>
P{
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p>The css file contains the style code for the structure such as headings, Paragraphs and links.
The style Patterns and Layouts defined in a css file can be modified by making the required
changes in the code of the css file.
</p>
</P>
</body>
</html>
LEVELS OF STYLE SHEETS
Style Sheets are used to link the html and css file
There are 3 types of Style Sheets,
1. In-line Style Sheet
2. Internal Style Sheet
3. External Style Sheet
IN-LINE STYLE SHEET
• Style attribute is used to add inline styles
• It is used to apply the style for a single element

Ex: <p style=“color-red; font-size:14px>Hello World</P>


INTERNAL STYLE SHEET
• Internal styles are defined using <style> tag
• Internal styles should be declared in the head section
• It is used only for one html page
Ex:
<style>
P{
color: red;
font-size: 14px;
}
</style>
EXTERNAL STYLE SHEET
• External styles should be saved with .css extension
• External css file should not have any HTML tags
• <link> tag is used to link external css file to html file
• An external stylesheet can be used in more than one html file

Ex: <link rel=“stylesheet” href=“style.css”>


Example:

<html>
<head>
<title>Ways of writing CSS</title>
<style> //Internal Css
h2{
color: green;
}
</style>
<link rel=“stylesheet” href=“h3.css”/> //External Css
</head>
<body>
<h2> Welcome to CSS </h2>
<h2> CSS Presentation </h2>
<h3> VIDYAVAHINI FIRST GRADE AND PG COLLEGE </h3>
<p style=“color: black; font-size: 14px”> Hello World </P> //In-line Css
</body>
</html>
Css file
h3
{
Color: blue;
}

You might also like