UNIT 3.

Cascading Style Sheets 9 hours

Introduction and Levels of Style Sheets, need for CSS, introduction to CSS, basic syntax, and
structure, using CSS, background images, colors, and properties, manipulating texts, using fonts,
borders and boxes, margins, padding lists, positioning using CSS, CSS2, Style Specification
Formats, Style classes, Properties and Property values, color, the <span> and <div> tags

WhatisCSS?
Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the
color of thetext, the style of fonts, the spacing between paragraphs, how columns
are sized and laid out,what background images or colors are used, as well as a
variety of other effects.
CSS is easy to learn and understand but it provides a powerful control over the
presentationof an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML.

AdvantagesofCSS/NeedofCSS
• CSS saves time - You can write CSS once and then reuse the same sheet
in multipleHTML pages. You can define a style for each HTML element
and apply it to as many web pages as you want.
• Pages load faster - If you are using CSS, you do not need to write
HTML tag attributes every time. Just write one CSS rule of a tag and
apply it to all the occurrences of that tag. So, less code means faster
download times.
• Easy maintenance - To make a global change, simply change the style,
and all the elements in all the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cellphones or for printing.
Page 1
 • Global web standards – Now HTML attributes are being deprecated
and it is being recommended to use CSS. So it’s a good idea to start using
CSS in all the HTML pages to make them compatible with future
browsers.

CSSVersions
Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation
in December 1996. This version describes the CSS language as well as a simple
visual formatting model for all the HTML tags.
CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This
version adds support for media-specific style sheets e.g. printers and aural
devices, downloadable fonts, element positioning and tables.

A CSS comprises of style rules that are interpreted by the browser and then
applied to thecorresponding elements in your document. A style rule is made of
three parts:
• Selector: A selector is an HTML tag at which a style will be applied.
This could be anytag like <h1> or <table> etc.
• Property: A property is a type of attribute of HTML tag. Put simply,
all the HTMLattributes are converted into CSS properties. They could
be color, border, etc.
• Value: Values are assigned to properties. For example, color property
can have thevalue either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows:

selector { property: value }

Example: You can define a table border as follows:

table{ border :1px solid #C00; }

Here table is a selector and border is a property and the given value 1px solid
#C00 is thevalue of that property.
You can define selectors in various simple ways based on your comfort.

TheTypeSelectors

Page 2
 This is the same selector we have seen above. Again, one more example to give a
color to alllevel 1 headings:

h1 {
color: #36CFFF;

TheUniversalSelectors
Rather than selecting elements of a specific type, the universal selector quite
simply matchesthe name of any element type:

* {
color: #000000;

}
This rule renders the content of every element in our document in black.

TheDescendantSelectors
Suppose you want to apply a style rule to a particular element only when it lies
inside a particular element. As given in the following example, the style rule will
apply to <em> element only when it lies inside the <ul> tag.

ul em {
color: #000000;

The ClassSelectors

You can define style rules based on the class attribute of the elements. All the
elements havingthat class will be formatted according to the defined rule.

.black {
color: #000000;

This rule renders the content in black for every element with class attribute set to
black in ourdocument. You can make it a bit more particular. For example:

Page 3
 h1.black {
color: #000000;

This rule renders the content in black for only <h1> elements with class attribute set to black.
You can apply more than one class selectors to a given element. Consider the
followingexample:

<p class="center bold">

This para will be styled by the classes center and bold.

</p>

TheID Selectors
You can define style rules based on the id attribute of the elements. All the
elements havingthat id will be formatted according to the defined rule.

#black {
color: #000000;

This rule renders the content in black for every element with id attribute set to
black in ourdocument. You can make it a bit more particular. For example:

h1#black {

color: #000000;

This rule renders the content in black for only <h1> elements with id attribute set to black.
The true power of id selectors is when they are used as the foundation for
descendantselectors. For example:

Page 4
 #black h2 {
color: #000000;

In this example, all level 2 headings will be displayed in black color when those
headings willlie within tags having id attribute set to black.

TheChildSelectors
You have seen the descendant selectors. There is one more type of selector,
which is verysimilar to descendants but have different functionality. Consider the
following example:

body > p {
color: #000000;

This rule will render all the paragraphs in black if they are a direct child of the
<body> element. Other paragraphs put inside other elements like <div> or <td>
would not have anyeffect of this rule.

TheAttributeSelectors
You can also apply styles to HTML elements with particular attributes. The
style rule below will match all the input elements having a type attribute with a
value of text:

input[type="text"]{
color: #000000;
}

The advantage to this method is that the <input type="submit" /> element is
unaffected, andthe color applied only to the desired text fields.
There are following rules applied to attribute selector.
• p[lang] - Selects all paragraph elements with a lang attribute.
• p[lang="fr"] - Selects all paragraph elements whose lang attribute has

Page 5
 a value ofexactly "fr".
• p[lang~="fr"] - Selects all paragraph elements whose lang attribute
contains theword "fr".
• p[lang|="en"] - Selects all paragraph elements whose lang attribute
contains valuesthat are exactly "en", or begin with "en-".

MultipleStyleRules

You may need to define multiple style rules for a single element. You can define
these rules to combine multiple properties and corresponding values into a single
block as defined in thefollowing example:

h1 {
color: #36C;

font-weight:
normal; letter-
spacing: .4em;
margin-bottom:
1em;
text-transform: lowercase;

Here all the property and value pairs are separated by a semicolon (;). You can
keep themin a single line or multiple lines. For better readability, we keep them
in separate lines.
For a while, don't bother about the properties mentioned in the above block. These
propertieswill be explained in the coming chapters and you can find the complete
detail about propertiesin CSS References.

GroupingSelectors
You can apply a style to many selectors if you like. Just separate the selectors
with a comma,as given in the following example:

Page 6
 h1, h2, h3
{ color:
#36C;
font-weight:
normal; letter-
spacing: .4em;

This define style rule will be applicable to h1, h2 and h3 element as well. The
order of the list is irrelevant. All the elements in the selector will have the
corresponding declarations appliedto them.
You can combine the various class selectors together as shown below:

#content, #footer, #supplement {

position:
absolute; left:
510px; width:
200px;

There are four ways to associate styles with your HTML document. Most
commonly used methods are inline CSS and External CSS.

LEVELS OF CSS

1. EmbeddedCSS-The<style>Element
You can put your CSS rules into an HTML document using the <style> element.
This tag is placed inside the <head>...</head> tags. Rules defined using this
syntax will be applied to all the elements available in the document. Here is the
generic syntax:

Page 7
 <head>
<style type="text/css"
media="..."> Style Rules
............
</style>
</head>

Attributes

Attributes associated with <style> elements are:

Attribute Value Descriptio

n

type text/css Specifies the style sheet language as a content-type

(MIME type). This is a required attribute.

media screen Specifies the device, the document will be displayed

tty on. Default value is all. This is an optional attribute.
tv
projection
handheld
print
braille,
atural, all
Example

<head>
<style type="text/css"
media="all"> h1{
color: #36C;
background-image:url(“background.gif”);

}
</style>
</head>
Following is an example of embed CSS based on the above syntax
Page 8
 2.InlineCSS-Thestyle Attribute

You can use style attribute of any HTML element to define style rules. These
rules will beapplied to that element only. Here is the generic syntax:

<element style="...style rules ">

Attributes

Attribute Value Description

style style The value of style attribute is a combination of style declarations

rules separated by semicolon (;).

Example
Following is the example of inline CSS based on the above syntax:
<h1 style ="color:#36C; background-image:url(“background.gif”);"> This is
inline CSS </h1>

It will produce the following result:

This is inline CSS

3.ExternalCSS-The<link>Element

The <link> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all
the Style rules within this text file and then you can include this file in any HTML
document using <link>element.
Here is the generic syntax of including external CSS file:

Page 9
 <head>
<link type="text/css" href="..." media="..." />
</head>

Attributes
Attributes associated with <style> elements are:

Attribute Value Description

type text/css Specifies the style sheet language as a content-type (MIME

type). This attribute is required.

href URL Specifies the style sheet file having Style rules. This attributeis a
required.

media screen Specifies the device the document will be displayed on. Default
tty value is all. This is an optional attribute.
tv
projection
handheld
print
braille
aural
all

Example
Consider a simple style sheet file with a name mystyle.css having the following rules:

Page 10
 h1, h2, h3
{
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
background-image:url(“background.gif”);

Now you can include this file mystyle.css in any HTML document as follows:

<head>
<link type="text/css" href="mystyle.css" media="all" />
</head>

ImportedCSS-@importRule

@import is used to import an external stylesheet in a manner similar to the <link>

element.Here is the generic syntax of @import rule.

<head>
<@import "URL";
</head>

Here URL is the URL of the style sheet file having style rules. You can use
another syntax aswell:
<@import url("URL");
</head>

Example
Following is the example showing you how to import a style sheet file into an HTML document:

Page 11
 <head>
@import "mystyle.css";
</head>

How to use margin, border and padding in the box model ?

The box model specifies how the HTML elements are organized & modeled in the browser engine along
with deriving the CSS properties that define the dimension for the HTML elements. The box model can be
described as a rectangular box that is generated for the HTML elements which forms a document tree. The
box model has 4 main properties – margin, border, padding & content, which help to create the design and
determine the layout of web pages. These properties can be given as:
content: This is one of the main part of the box model that contains text, images, videos, links, etc, which
can be resized using the height and width property.
padding: It is the property used to create space around the content inside the bordered region.
border: It covers the area under content, including the padding around the content.
margin: This property refers to creating space around the element ie., around the border area.
A simple box model contains a content, border, and the external space outside the border the box requires.
This external space is given by margin, which separates the box from other boxes. When we create a box
container, we can specify the distance between the border and inside content, which is given by padding.
The width and color of the border can be given by the border attribute.
Example: This example describes the basics of the Box model in CSS.
HTML

<!DOCTYPE html>
<html>

<head>
<title>Box</title>
<style>
.box {
background-color: rgb(233, 141, 20);
background-image:url(“background.gif”);
margin-top: 80px;
margin-left: 5rem;
width: 20rem;
color: blueviolet;
text-align: center;
font-size: 50px;
border: 7px solid red;
padding: 6rem;
}

body {

Page 12
 background-color: yellow;
}
</style>
</head>

<body>
<div class="box">
Welcome to GeeksforGeeks
</div>
</body>

</html>

Output:

CSS Box model

Consider the below code example for setting the width & height property of an element:
.box {
margin: 100px 20px 50px 370px;
width: 350px;
height: 50px;
font-size: 50px;
border: 10px solid red;
padding: 160px;
}
The total height and width of the box can be found after adding the following properties as:

Page 13
Box width = width + (left padding + right padding) + (left border + right border) + (left margin + right
margin)
Box height = height + (top padding + bottom padding) + (top border + bottom border) + (top margin +
bottom margin)
Thus, Total width = 350+(160+160)+(10+10)+(370+20) = 1080px
and Total height = 50+(160+160)+(10+10)+(100+50) = 540px
Padding property: CSS paddings are used to create space around the element, inside any defined border. We
can set different paddings for individual sides(top, right, bottom, left). It is important to add border
properties to implement padding properties.

Syntax:
padding: "padding-top|padding-right|padding-bottom|padding-left";
It consists of 4 components:
padding-top: Specifies padding width in the box above the content
padding-right: Specifies padding width in the box at the right of the content
padding-bottom: Specifies padding width in the box below the content
padding-left: Specifies padding width in the box at the left of the content
Example:

padding: 20px 30px 50px 70px;

We can also write

padding: 40px;
This sets default padding of 40px on all four directions inside the box.

Border property: It is a combination of three properties.

Syntax:
border : "width style color | initial | inherit";
Property values:
width: This specifies the thickness of the border
style: This specifies the outlook of the border, be it solid, dashed, dotted, double, groove, inset, etc.
color: This specifies the color of the border
The default value is initial.
Example:
border: 10px solid red;
Margin property: It has four individual margin properties:
Syntax:
margin: "top-margin right-margin bottom-margin left-margin";
top-margin: Specifies margin width at the top of the box
right-margin: Specifies margin width at the right of the box
bottom-margin: Specifies margin width at bottom of the box
left-margin: Specifies margin width at the left of the box
We can write individually or in a single line.
Example:
margin: 100px 20px 50px 370px;
If we write
margin: 20px;
Page 14
It sets a default margin of 20px on all 4 sides of the reference object
We can understand the box model from the following examples:
Example 1: This example describes the Padding and Border properties.
HTML

<!DOCTYPE html>

<head>
<title>Padding</title>
<style>
.main {
font-size: 38px;
font-weight: bold;
Text-align: center;
}

.box {
margin-left: 500px;
border: 50px solid #059900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;

.box1 {
font-size: 42px;
font-weight: bold;
color: #000000;
margin-top: 60px;
background-color: #d9c5db;
}
</style>
</head>

<body>
<div class="main">CSS Padding and Border</div>
<div class="box">
<div class="box1">GeeksforGeeks</div>
</div>
</body>

</html>

Output:

Page 15
Green Border and white padding around the content area
Example 2: The following code illustrates the Margin property of the box model.
HTML

<!DOCTYPE html>

<head>
<title>Padding</title>
<style>
.main {
font-size: 38px;
font-weight: bold;
Text-align: center;
}

.box {
margin-left: 500px;
border: 50px solid #059900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
margin-top: 180px;
}

.box1 {
font-size: 42px;
font-weight: bold;
color: #000000;
margin-top: 60px;
}
</style>

Page 16
</head>

<body>
<div class="main">CSS Margin Property</div>
<div class="box">
<div class="box1">GeeksforGeeks</div>
</div>
</body>

</html>

Output:

Differences between <div> and <span> tag:

<div> <span>
The <div> tag is a block level element. The <span> tag is an inline element.
It is best to attach it to a section of a web It is best to attach a CSS to a small section of a line in a
page. web page.
It accepts align attribute. It does not accept align attribute.
This tag should be used to wrap a section, for This tag should be used to wrap any specific word that
highlighting that section. you want to highlight in your webpage.

HTML <div> tag: The div tag is known as Division tag. The div tag is used in HTML to make divisions of
content on the web page like (text, images, header, footer, navigation bar, etc). Div tag has both
opening(<div>) and closing (</div>) tags and it is mandatory to close the tag. As we know Div tag is a
block-level tag. In this example, the div tag contains the entire width. It will be displayed div tag each time
on a new line, not on the same line.
Page 17
Example:

html

<!DOCTYPE html>
<html>

<head>
<title>Div tag</title>

<style>
div {
color: white;
background-color: #009900;
margin: 2px;
font-size: 25px;
}
</style>
</head>

<body>
<div> div tag </div>
<div> div tag </div>
<div> div tag </div>
<div> div tag </div>
</body>

</html>

Output:

HTML <span> tag: The HTML span element is a generic inline container for inline elements and content. It
used to group elements for styling purposes (by using the class or id attributes). A better way to use it when
no other semantic element is available. The span tag is very similar to the div tag, but div is a block-level tag
and span is an inline tag.

Example:

html

Page 18
<!DOCTYPE html>
<html>

<head>
<title>span tag</title>
</head>

<body>
<h2>Welcome To GFG</h2>

<!-- Inside paragraph applying span tag

with different style -->
<p><span style="background-color:lightgreen">
GeeksforGeeks</span> is A Computer Science Portal
where you can<span style="color:blue;">
Publish</span> your own <span
style="background-color:lightblue;">articles</span>
and share your knowledge with the world!!
</p>
</body>

</html>

Output:

Page 19