Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

css-intro

The document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in styling HTML documents and its efficiency in managing multiple web pages. It covers various CSS selectors, including element, id, class, and group selectors, as well as methods for inserting styles such as inline, internal, and external CSS. Examples are provided for each type of selector and styling method to illustrate their application in web design.

Uploaded by

SANJEET KUMAR
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

css-intro

The document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in styling HTML documents and its efficiency in managing multiple web pages. It covers various CSS selectors, including element, id, class, and group selectors, as well as methods for inserting styles such as inline, internal, and external CSS. Examples are provided for each type of selector and styling method to illustrate their application in web design.

Uploaded by

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

Course :BCA/IT Sem : IV

Lesson : Introduction Of CSS


(CSS)
SEC-2

By : DR. KHUSHBU KUMARI


Dept. Of CA/IT
CSS
Cascading Style Sheets
What is CSS

• CSS describes the style of an HTML


document.
• CSS stands for Cascading Style Sheets
• CSS saves a lot of work. It can control
the layout of multiple web pages all at
once
• A CSS rule-set consists of a selector and a
declaration block:

Selector Declaration

P {color: green ;font-size:20;}

Value
Attribute

• CSS selectors are used to "find" (or select) the HTML


elements for styling.
CSS Selectors

1. Element Selector
 used to select an element for styling.
Example:

P
{
text-align:right;
color: blue;
}
2. Id Selector
• Id selectors are used to do styling of selected Id’s.

Example:
#paragraph1
{
text-align: right;
color : blue;
}
3. Class Selector
• Used for styling of particular class.
Example:

.class1
{
text-align: center;
color: blue;
}
Group Selector
• Group selectors used for styling of multiple
elements or selectors.
Example:

h1,h2,P
{
text-align: center;
color: blue;
}
• There are three ways of inserting
a style sheet:

Inline CSS
Internal CSS
External CSS
Inline Styling
• An inline style may be used to apply a unique style for a
single element.
Example:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">Welcome</h1>

</body>
</html>
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.
Example:
<!DOCTYPE html>
<head>
<style>
body {
background-color: blue;
}

h1 {
color: red;
margin-left: 20px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

</body>
</html>
External CSS
• With an external style sheet, the look of an entire website can be changed 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.

Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=“style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External File :“style.css”
Body{
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

You might also like