Cascading Style Sheets: Prepared By: E.Swathi, Asst - Prof., CSE, CBIT 1

CASCADING STYLE SHEETS
Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 1

INTRODUCTION
• XHTML is concerned primarily with content rather than the details of how that content
is presented by browsers.
• To control the look and feel of HTML documents in an organized and efficient manner
with CSS.
• What is css?
 Styles define how to display HTML elements
 It makes the HTML document to display with different styles.
• To develop a large web sites, fonts and colors information were added to every single
page, became a long and expensive process. To solve this problem, the www
consortium (w3c) created CSS.
• In HTML 4.0 all formatting tags were removed from the html document, and stored in a
separate CSS file.
• CSS supported by all the browser.

CSS
SYNTAX OF CSS
• When we want to apply a nice red color as the background of a webpage,
Using HTML we could have done it like this:
<body bgcolor="#FF0000">
• With CSS the same result can be achieved like this:
body {background-color: #FF0000;}
• The above example shows the fundamental CSS model

CSS
• XHTML style sheets are called cascading style sheets because they can be defined at
three different levels to specify the style of a document.
• Lower level style sheets can override higher level style sheets, so the style of the
content of a tag is determined, in effect, through a cascade of style-sheet applications.
• There are three ways to apply style sheets
o Inline CSS: apply to the content of a single XHTML element
o Internal style sheet /document level style sheet: apply to the whole body of a document
o External style sheet: apply to the bodies of any number of documents.
• If no style sheet information is specified, the browser default property values are used.

1. Inline CSS
• It can be coded in the body of the web page as an attribute of an HTML tag.
• Inline style specifications appear within the opening tag and apply only to the content of
that tag.
• It applies to the specific element that contains it as an attribute
• This has highest priority over internal and external style sheets.
• Inline overrides styles that are defined in external or internal by using inline css.
• Syntax:
Style=“property:value_1;property:value_2;…..;”
• Example
<p style="background-color: red;color:white;">CBIT</p>

2. Internal/Document-level style sheet
• Document-level style specifications appear in the document head section and apply to
the entire body of the document.
• It is an effective way to impose a uniform style on the presentation of all of the content
of a document.
• The general form of the content of a style element is as follows:
• The type attribute of the <style> tag tells the browser the type of style specification,
which is always text/css.
• Each style rule in a rule list has two parts: a selector, which indicates the tag or tags
affected by the rule, and a list of property–value pairs.
• The form of a style rule is as follows:

2. Internal/Document-level style sheet
• Example:
<head>
<style>
p{ color:red;
text-align:center;
font-size:20px;
}
h2{color:green;
font -size:30px;
font-style:italic;
font-family:‟Times New Roman‟;
}
</style>
</head>
<body>
<p> helloworld</p>
<h2> this paragraph is styled with css</h2>
</body>

3. External style sheet
• To apply the style to many pages
• you can change the look of entire web site by changing one file.
• External CSS is a file that contains only CSS code and is saved with a “.css” file
extension
• Each html file should link to this file using <link> tag.
• rel. Specifies the relationship between the current document and the linked document.
• Format of style file:

3. External style sheet
• Advantages
- keeps web site design and content separate.
- reuse css code for entire website.
- changes will be done in a single file
1. create css file 2. Create html file and link to css

test.css <head>
body{ background-color:gray;} <link rel=“stylesheet” type=“text/css”
p{ color:blue;} href=“test.css”}
h3{color:white;} </head>
<body>
<p>CBIT in blue color</p>
<h3>CSE-2,3rdyear</h3>
</body>

Selector forms
• HTML has tags and CSS has selectors.
• Selectors are the names given to styles in internal and external style sheets.
• Types of selector forms
1. Simple selector forms
2. Class selector
3. Generic selector
4. id selector
5. Universal selector

1. Simple selector form
• It is a single element name
• Property values in the rule apply to all the occurrences of the named element.
• List of element names are separated by commas.
• Example
p{font –size:30pt;}
h1,h2{ font-size:40pt;}
• Selectors can also specify that the style should apply only to elements in certain
positions in the document. This is done by listing the element hierarchy in the selector,
with only white space separating the element names. For example, the rule
form em {font-size: 14pt;}
• This applies its style only to the content of emphasis elements that are nested in a form
element in the document. This is a contextual selector (sometimes called adescendant
selector).

2. Class selectors
• Class selectors are used to allow different occurrences of the same tag to use different
style specifications.
• A style class is defined in a style element by giving the style class a name, which is
attached to the tag‟s name with a period.
<body>
Example:
<h1>Welcome to My Homepage</h1>
<head>
<style>
<div class="intro">
.intro {
<p class="min">My name is jamesBond.</p>
background-color: yellow;
<p class="max">I live in hyderabad.</p>
}
</div>
p.min{font-size:30pt;
<p>My best friend is Mickey.</p>
font-style:italic;}
p.max{font-size:30pt;
</body>
font-style:italic;
font-color:green;}
</style>
</head>
3. Generic selectors
• A class of style specifications that applies to the content of more than one kind of tag.
• Defined without using tag name
• Use generic class name which must begin with a period.
• Eg:
.color{font-color:red;}
< h3 class=“color”>CBIT</h3>
<h2 class=“color”>CSE-2</h2>

4. Id selector
• An id selector allows the application of a style to one specific element.
• Style the element with id as an attribute.
• Syntax
#idname{property:value-list}
• example <head>
<style>
#firstname {
}
</style>
</head>
<body>
<div>
<p id="firstname">My name is Donald.</p>
</div>

</body>
5. Universal selectors
• Denoted by an asterisk(*)
• Applies style to all the elements in a document
• Example <head>
<style>
*{color:red;} *{
}
</style>
</head>
<body>
<div>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
</body>

6. Pseudo classes
• A pseudo-class is used to define a special state of an element.
• For example, it can be used to:
 Style an element when a user mouses over it
 Style visited and unvisited links differently
 Style an element when it gets focus
Example:
<head>
<style type="text/css">
input:hover{color:red;}
input:focus{color:green;}
</style>
</head>
<body>
<form>
your name:<input type="text" name="text"/>
</form
</body>
The box model
• All the html elements can have borders .
• We can style these borders with different colors and width.
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside thePrepared
border. The margin
by: E.Swathi, Asst.Prof.,is transparent
CSE, CBIT 17
Borders
Border-style Dotted/dashed/double/null
(Border-top-style,
Border-bottom-style
Border-left-style
Border-right-style)
Border-width Thin/medium(default)/ thick/value in px
(Border-left-width
Border-right-width
Border-top-width
Border-bottom-width)
Border-color Color name
(border-top-color,
border-bottom-color,
border-left-color,
border-right-color)

Margins and padding
• Padding is the space between the content of an element and its border.
• The margin is the space between the border of an element and the element‟s neighbor.
• The margin properties are named margin, which applies to all four sides of an element:
margin-left, margin-right, margin-top, and margin-bottom.
• The padding properties are named padding, which applies to all four sides: padding-left,
padding-right, padding-top, and padding-bottom.

Box model example
Example:
<style>
div {
background-color: lightgrey;
width: 400px;
border: 10px solid green;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model</p>
<div>This text is the actual content of the box.
We have added a 25px padding,
25px margin and a 25px green border.
</div>
</body>
<div> tag
- <div> tag is used to group the html elements together.
- used to make sections in html document
- Like container which encapsulate other html elements.
Example:
<div style="background-color:red;
border:10px solid green;
padding:20px;
font-size:20px">
<p>Welcome to div tag</p>
<p>CBIT,CSE-2</p>
</div>

<span> tag
• Span tag is similar to div tag
• Span tag is used to group and apply styles to inline elements
Example:
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is text with different color
<span style = "color:#FF0000;"> This
is a paragraph</span>
This is a paragraph</p>
<p>
<span style = "color:#8866ff;">This is
another paragraph</span></p>
</body>
</html>
Font Properties
• The font-family property is used to specify a list of font names. The browser uses the
first font in the list that it supports. For example, the property:
font-family: Arial, Helvetica, Futura
• The font-size property does what its name implies. For example, the following property
specification sets the font size for text to 10 points:
font-size: 10pt
• The default value of the font-variant property is normal, which specifies the usual
character font. This property can be set to small-caps to specify small capital characters.
Font-variant:small-caps
• The font-style property is most commonly used to specify italic, as in
font-style: italic
• The font-weight property is used to specify the degree of boldness, as in
font-weight: bold
Besides bold, the values normal (the default), bolder, and lighter can be specified.

Font Properties
• Font Shorthands
 font: bold 14pt „Times New Roman‟ Palatino
specifies that the font weight should be bold, the font size should be 14 points, and
either Times New Roman or Palatino font should be used, with precedence given to
Times New Roman.

Text Decoration
• The text-decoration property is used to specify some special features of text. The
available values are line-through, overline, underline, and none, which is the default.
• EX:
p.max{text-decoration:line-through}

List Properties
• The list-style-type property is used to specify the shape of the bullets and sequence of
values.
• The list-style-type property of an unordered list can be set to disc, circle, square, or
none. The default property value for bullets is disc.
• List-style-image property creates an image as a bullet. Its value is specified with the url
form.

List Properties
• The list-style-type property can be used to specify the types of sequence values.

Color
• The color property is used to specify the foreground color of XHTML elements.
• Only 17 colors are guaranteed to be correctly displayed by all browsers on all color
monitors. This collection is called as named colors.

Alignment of Text
• The text-indent property can be used to indent the first line of a paragraph. This
property takes either a length or a percentage value.
Eg: p.indent{text-indent : 0.5in}
• The text-align property, for which the possible keyword values are left, center, right,
and justify, is used to arrange text horizontally.
Eg: p{text-align : right}

Refernces:
1. Robert W Sebesta, “Programming the World Wide Web”, Pearson Education
2. www.w3schools.com
3. https://www.tutorialspoint.com/web_development_tutorials.htm

Cascading Style Sheets: Prepared By: E.Swathi, Asst - Prof., CSE, CBIT 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets: Prepared By: E.Swathi, Asst - Prof., CSE, CBIT 1

Uploaded by

Copyright:

Available Formats

CASCADING STYLE SHEETS

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 1

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 2

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 3

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 4

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 5

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 6

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 7

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 8

1. create css file 2. Create html file and link to css

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 9

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 10

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 11

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 13

<p>My best friend is Mickey.</p>

<p>My best friend is Mickey.</p>

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 15

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 18

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 19

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 21

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 23

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 24

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 25

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 26

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 27

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 28

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 29

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 30

You might also like