Scribd
Upload
2K views

What Is CSS?

CSS (Cascading Style Sheets) is used to define styles for web pages, including design and layout. It allows formatting to be defined once and applied to multiple pages, saving work. CSS was created by W3C to solve problems with HTML tags controlling formatting. There are different ways to insert CSS including external, internal, and inline styles. CSS rules contain selectors that point to elements to style and declaration blocks with properties and values to control formatting.

Uploaded by

Wahid shah
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2K views

What Is CSS?

CSS (Cascading Style Sheets) is used to define styles for web pages, including design and layout. It allows formatting to be defined once and applied to multiple pages, saving work. CSS was created by W3C to solve problems with HTML tags controlling formatting. There are different ways to insert CSS including external, internal, and inline styles. CSS rules contain selectors that point to elements to style and declaration blocks with properties and values to control formatting.

Uploaded by

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

What is CSS?

 CSS stands for Cascading Style Sheets.


 CSS describes how HTML elements are
to be displayed on screen or in other
media .
 CSS saves a lot of work.it can control
the layout of multiple web pages all at
once( i.e. with the help of External style
sheets).
Why CSS?
 HTML was never designed to contain tags
for formatting a web page.
 HTML was created to describe the content
of a web page like:
<h1> this is a heading</h1>
 When tags like <font> and color attributes
were added to the HTML 3.2 specification ,
it started a nightmare for web developers.
Why CSS?
 Development of large websites, where
fonts and color were added to every single
page, became a long and expensive
process.
 To solve this problem CSS was created by
World Wide Web Consortium (W3C).
 CSS is used to defines styles for your web
pages, including the design and layout.
CSS syntax

 A CSS rule-set consists of a selector and a declaration


block.
 The selector points to the HTML element you want to
style.
 The declaration block contains one or more declaration
separated by semicolon.
 Each declaration includes a CSS property name and a
value ,separated by a colon.
 A CSS declaration always ends with a semicolon and
declaration blocks are surrounded by curly braces.
CSS comments
/* This is a single-line comment */
text-align: center;

/* This is
a multi-line
comment */

CSS color:
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"
CSS Selectors

 CSS selectors are used to select HTML elements based


on their element name, id, class and attribute.

The Element Selector:


 The element selector selects elements based on the
element name.
P{
Text-align :center;
Color: red;
}
CSS Selectors
The id Selector:
 The id selector uses the id attribute of an HTML element
to select a specific element.
 The id of an element should be 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.
#Para1{
Text-align :center;
Color: red;
}
CSS Selectors

The Class Selector:


 The Class Selector selects elements with a specific class
attribute.
 To select elements with a specific class , write a period (.
) character followed by the name of the class.
.center{
Text-align :center;
Color: red;
}
CSS Selectors

The specific Class Selector:

 You can also specify that only specific HTML elements


should be affected by a class.
P.center{
Text-align :center;
Color: red;
}
CSS Selectors

The Grouping Selectors:


 If you have elements with the same style definitions,
then you can group selectors.
 To group selectors, separate each selector with a
comma.
h1,p1,p2{
Text-align :center;
Color: red;
}
Three ways to insert CSS
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style

1.External style sheet


Make a file and rename it with .css and no
w link to html page by adding the below
code in head portion
<link rel="stylesheet" type="text/css href="mys
tyle.css">
Three ways to insert CSS
Internal style sheet
 An internal style sheet may be used if one single page h
as a unique style.
 Internal styles are defined within the <style> element, ins
ide the <head> section of an HTML page.
<style type=“text/css”>
h1 {
color: blue
margin-left: 20px;
}
</style>
Three ways to insert CSS
Inline style
 An inline style may be used to apply a unique sty
le for a single element.
 To use inline styles , add the style attribute to th
e relevant element.
<p style="color:red;margin-left:20px;">paragraph</
p>

You might also like