Scribd
Upload
34 views20 pages

19-CSS-Intoduction-types - Id and Class Selectors - Backgournd Properties-22-01-2024

This document discusses Cascading Style Sheets (CSS) and provides examples of how to use CSS to style HTML elements. It covers inline styles, internal and external style sheets, the CSS syntax of selectors and declarations, and properties for backgrounds, text formatting, and positioning. Examples are given for id and class selectors, and the cascading order of multiple style sheets is explained.

Uploaded by

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

19-CSS-Intoduction-types - Id and Class Selectors - Backgournd Properties-22-01-2024

This document discusses Cascading Style Sheets (CSS) and provides examples of how to use CSS to style HTML elements. It covers inline styles, internal and external style sheets, the CSS syntax of selectors and declarations, and properties for backgrounds, text formatting, and positioning. Examples are given for id and class selectors, and the cascading order of multiple style sheets is explained.

Uploaded by

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

BITE304L

Cascading Style Sheets(CSS)


Cascading Style Sheets(CSS)
 Introduction to Cascading Style Sheets
 Inline Styles
 Style Sheets
 Grouping & Short Hand Properties
 Inheritances
 Classes
 Link
 Cascading Styles
 Dynamic Style.
 Box model
 Positioning

2 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


Cascading Style Sheets (CSS)
 CSS are a way to control the look and feel of your HTML
documents in an organized and efficient manner.
 CSS defines HOW HTML elements are to be displayed.
 Development of large web sites, where fonts and color
information were added to every single page, became a long and
expensive process.
 To solve this problem, the World Wide Web Consortium (W3C)
created CSS.
 In HTML 4.0, all formatting could be removed from the HTML
document, and stored in a separate CSS file.
 Styles are normally saved in external .css files. External style
sheets enable you to change the appearance and layout of all the
pages in a Web site, just by editing one single file!

3 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


CSS Parts
 A CSS rule has two main parts: a selector, and one or more
declarations:

 The selector is normally the HTML element you want to style.


 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each
property has a value.
 A CSS declaration always ends with a semicolon, and declaration
groups are surrounded by curly brackets.

4 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


Comments
 Comments are ignored by browsers.
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

5 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


CSS Demo
<html>
<body>
<head>
<h1>CSS example!</h1>
<style type="text/css">
<p>This is a
body paragraph.</p>
{ background-color:#d0e4fe; } </body>
h1 </html>
{ color:orange;
text-align:center; }
p
{ font-family:"Times New Roman";
font-size:20px; }
</style> </head>
6 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024
Three Ways to Insert CSS
 External style sheet
 Internal style sheet
 Inline style

7 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


External Style Sheet
 An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing one
file. Each page must link to the style sheet using the <link> tag.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
 An external style sheet can be written in any text editor. The file should not contain
any html tags.Your style sheet should be saved with a .css extension.
hr{color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
 Note: Do not leave spaces between the property value and the units! "margin-
left:20 px"

8 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


Internal Style Sheet
 An internal style sheet should be used when a single
document has a unique style.You define internal styles in the
head section of an HTML page, by using the <style> tag, like
this:
<head>
<style type="text/css">
hr {color:red;}
p {margin-left:20px;}
body {background-
image:url("images/back40.gif");}
</style>
</head>

9 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


Inline Styles
 An inline style loses many of the advantages of style sheets by
mixing content with presentation.
 To use inline styles you use the style attribute in the relevant
tag. The style attribute can contain any CSS property.
<p style="color:red;margin-left:20px">This is a
paragraph.</p>

10 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


Multiple Style Sheets
 If some properties have been set for the same selector in
different style sheets, the values will be inherited from the
more specific style sheet.
 For example, properties for the h3 selector:
External style sheet Internal style sheet internal style sheet
h3 h3 also links to the
{ { external style sheet
color:red; text-align:right; as final:
text-align:left; font-size:20pt; color:red;
font-size:8pt; } text-align:right;
} font-size:20pt;

11 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


Cascading Order
 Browser default
 External style sheet
 Internal style sheet (in the head section)
 Inline style (inside an HTML element)
 So, an inline style (inside an HTML element) has the highest
priority, which means that it will override a style defined inside
the <head> tag, or in an external style sheet, or in a browser (a
default value).
 Note: If the link to the external style sheet is placed after the
internal style sheet in HTML <head>, the external style sheet
will override the internal style sheet!

12 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


The id Selector
The id selector is used to specify a style for a single, unique element.
<body>
<html> <p id="para1">Hello World!</p>
<head> <p>This paragraph is not affected by the
<style type="text/css"> style.</p>
#para1 <p id="para2"> The id selector uses the
{ text-align:center; id attribute of the HTML element, and
color:red; } is defined with a "#".The style rule
#para2 below will be applied to the element
with id="para2" </p>
{ text-align:right;
</body>
color:blue; }
</html>
</style> </head>

13 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


The class Selector
 It is used to specify a style for
<html>
a group of elements. <head>
 It uses the HTML class <style type="text/css">
attribute, and is defined with .redcenter
a ".“ { text-align:center;
 Eg: .center {text- color:red; }
align:center;}
</style></head>
 You can also specify that only
<body>
specific HTML elements
should be affected by a class. <h1 class="redcenter">Center-
aligned heading</h1>
 Eg: p.center {text-
align:center;} <p class="redcenter">Center-
aligned paragraph.</p>
</body></html>
14 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024
CSS - Background Properties
 CSS background properties are used to define the
background effects of an element.
 CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position

15 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


background-color
 body {background-color:#b0c4de;}
 p {background-color:#e0ffff;}
 div {background-color:#b0c4de;}
 h4 { background-color: white; }
 ul { background-color: rgb( 149, 206, 145); }

16 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


background-image
 By default, the image is repeated so it covers the entire element
body {background-image:url(“paper.gif ”);}
 You can have a background image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
p { background-image: url(“smallPic.jpg”);
background-repeat: repeat; }
h4 { background-image: url(“../smallPic.jpg”);
background-repeat: repeat-y;}
ol { background-image: url(“../image/smallPic.jpg”);
background-repeat: repeat-x;}
ul { background-image: url(“c:/IWP/image/smallPic.jpg”);
background-repeat: no-repeat;}

17 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


Background-attachment
 You may choose to have your background scroll naturally, or
to have it in a fixed position.
 body {
background-image: url(smallPic.jpg);
background-attachment: fixed; }
 body {
background-image: url(smallPic.jpg);
background-attachment: scroll;}

18 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


background-position
 If you would like to define where exactly an image appears within
an HTML element, you may use CSS's background-position.
 Three different ways of defining position:
 length, percentages, and keywords.
 p{ background-image: url(smallPic.jpg);
background-position: 20px 10px; }
h4 { background-image: url(smallPic.jpg);
background-position: 30% 30%; }
ol { background-image: url(smallPic.jpg);
background-position: top center; }
 The location of the image will be (A)px from the left of the screen
and (B)px from the top of the screen.

19 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024


Background - Shorthand property
 To shorten the code, it is also possible to specify all the properties in
one single property. This is called a shorthand property.
body {background:#ffffff url(“img_tree.png”) no-repeat right top;}
 When using the shorthand property the order of the property values
are:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 It does not matter if one of the property values is missing, as long as the
ones that are present are in this order.
20 R.Vijayan/ Asso Prof / SITE / VIT University 1/22/2024

You might also like