Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers

I BSC VI SEM Web Technologies
UNIT – II
Cascading Style Sheets
Introduction, using Styles, simple examples, your own styles, properties and values in styles, style sheet,
formatting blocks of information, layers.
……………………………………………………………………………………………………………………………
1. Introduction
What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External style sheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and
screen sizes.
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 declarations separated by semicolons.
 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.
2. Using Styles:: 3. Simple Example
In the following example all <p> elements will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>
<head>
<style> p
{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Advantages and Disadvantages of CSS

CSS stands for Cascading Style Sheet. It allows you to specify how documents are presented to users by using various style properties
for a given HTML element. CSS properties are the key to altering the styling of HTML elements in your web documents.
Advantages:
Save time
It flexibility to set the properties of an component. You can write CSS code and then the same code can be applied to the HTML
components groups, and also can be reused in different HTML pages.
Easy to Maintain
It gives an easy mode to update document formatting and manage consistency across various documents. By doing one
change to the website's CSS file, all the web pages’ elements will be updated automatically.
Pages load faster
it empowers multiple pages to share formatting, and reduce complexity and redundancy in the structural content. It
significantly reduces the file transfer size, which helps to lode page faster.
Page 1
Superior styles to HTML

It has more extensive presentation capabilities than HTML, so you can give far superior look to your HTML pages in
contrast with the HTML elements and attributes.
Multiple Device Compatibility
It allows the HTML document to be improved for more than kind of device. Using it the same HTML document can be
presented in various review styles for various rendering devices.
Disadvantages:
Come in various levels
CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.
Discontinuity
With CSS, what works with one browser might not always work with another. The web developers need to test for
compatibility, running the program across multiple browsers.
Absence of security
There exists a scarcity of security.
Various Types of CSS

There are the following three types of CSS:
1. Inline CSS.
2. Internal / Embedded CSS.
3. External CSS.
Inline CSS
For Inline CSS every style content is in HTML elements. It is used for a limited section. Whenever our requirements are very small we
can use inline CSS.
It will affect only single elements. In HTML we require that various HTML tag's views are different so then we use inline
Cascading Style Sheets. There are disadvantage of inline Cascading Style Sheets. It must be specified on every HTML tag. There is
very much time consumed by that and it is not the best practice for a good programmer and the code will be quite large and very
complex.
Inline CSS examples are given below:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
Internal CSS
In internal CSS the style of CSS is specified in the <head> section. This is internal CSS, it affects all the elements in the body
section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body. For that we can use
style in the head tag.
This style performs an action in the entire HTML body.
<html>
<head>
<style>
body {background-color: powderblue;}
h1{color: blue;}
p{color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
In External CSS we create a .css file and use it in our HTML page as per our requirements. Generally external Cascading Style Sheets
are used whenever we have many of HTML attributes and we can use them as required; there is no need to rewrite the CSS style again
and again in a complete body of HTML that inherits the property of the CSS file.
Example:
Page 2
styles.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
HTML Program
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
4. Defining your own styles
Styles are defined by simple rules. A style can contain as many rules as you want and with processing HTML.
1. Cascading styles:
Conventionally styles are cascaded (overridden). This means that you do not have to use just a single set of rules inside a
document, you can import as many styles as you like.
2. Style Rule:
A style rule has two parts: The selector and a set of declarations. The selector is used to create a link between the rule and the HTML
tag.
The declaration part has two parts: a property and a value. Selectors can be placed into classes so that a tag can be formatted in
variety of ways. Declarations must be separated using colons and terminated using semicolon.
3. Classes
A class is defined a set of styles which can be applied as user choice. Choices can be applied to a single type of element or may be
anonymous and hence applicable to any element.
If you want to apply a style to a particular element use the following syntax .
Selector.classname{property: value; property: value}
<selector class=”classname”>
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
4. Anonymous classes
Sometimes you want to apply a piece of formatting too many different elements within a page but not necessarily to the entire page.
Such classes are called anonymous classes. It has the following syntax
Page 3
.classname
{
Property: value;
Property: value;
}
<selector1 class=”classname”>..........................<selector1>
<selector2 class=”classname”>...........................<selector2>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Including style sheets
We can include style sheets in our HTML page in two way (i) by linking (ii) by importing
(i) By linking
We can link our .css file in the head section of a HTML page using the following syntax
<link rel=”style sheet” href=”URL” type=”text/css” media=”screen”>
The href is hyperlink to your style sheet. rel tells to the browser what type of link you’re using.
type tells to the browser what type of document you’re including, the ‘type’ statement gives the relevant MIME type.
Finally it is useful, although not compulsory, to tell the browser how the document will be used. HTML Specifies a Varity of ways of
using a document a document, including screen viewing, printing and as a presentations. Use the ‘media’ attribute to describe the
type of use.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" media=”screen”>
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body></html>
(ii) By importing
[<style type=”text/css”>]
 </style>
These lines are both needed if you intended to use more than one style sheet. The first sheet is included as if it were the only one; any
further style sheets have to be imported.
Example:
<link rel="stylesheet" type="text/css" href="mystyle.css" media=”screen”>
<style type=”text/css”>
Page 4
 </style>
5. Properties and Values

There are number of style properties, including properties that control lists and positing floating elements like images.
(i) Font properties:
font-family: family name;
Fonts are identified by giving the name of a specific font.
font-style: normal | italic | oblique;
This property provides the style to the font.
font-weight: normal | bold | bolder | lighter;
The font-weight property selects the weight or darkness of the font. Values of the property range from 100 to 900
in increments of 100.
font-size: small | medium | large | smaller | larger;
This property is used to set the relative or physical size of the font used.
Example:
<html>
<head>
<title> Font properties </title>
<style type=”text/css”> h1{
font-family:arial;
font-style: italic;
}
P{
Font-weight: bold
Font-size:100px;
}
</style>
</head>
<body>
<h1> demo from css properties </h1>
<p> this paragraph represents font size and font weight</p>
</body>
</html>
(ii) Backgrounds and color properties

Color:<value>
Background-color:<value> | transparent
Background-image: URL | none
 The color of any attribute can be changed. Value should be given as hexadecimal values.
 Backgrounds for the whole page or individual element can have their color set from the style sheet. Elements can also have
transparent backgrounds.
 Instead of a color an image can be used, identified by its URL.
Example:
<html>
<head>
<title> Font properties </title>
<style type=”text/css”> h1{
background-color: white;
color: black;
}
P{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1> demo from css background and color properties </h1>
Page 5
<p> this paragraph represents font size and font weight</p>

</body>
</html>
(iii) Text Properties
Text properties are used to effect the presentation, spacing and layout of text. The basic properties includes such as
decoration, indentation, word spacing, letter spacing, spacing between lines, horizontal and vertical text alignment.
text-decoration: none | underline | overline| line-through| blink; text-
transformation: none | uppercase | lowercase| capitalize; text-align: left |
right | center | justify;
text-indentation: length | percentage; line-
height : length | percentage; letter-
spacing: length | percentage; word-
spacing: length | percentage;
Example
<html>
<head>
<title> text properties </title>
<style type=”text / css”> a{
text-decoration: overline;
text-transformation: uppercase; text-align: left;
text-indentation: 12px;
}
</style>
</head>
<body>
<a href=”D:/CSS Demo/Mycss.html> This hypertext has text properties </a>
</body>
</html>
(IV) Box Properties
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
Margin: length | percentage | auto {1,4}

Border-width: thin | thick | medium | length {1,4}
Padding: length | percentage {1,4}
Border-color: value {1,4}
Border-style: none | dotted | solid | double | groove
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 the border. The margin is transparent
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px; padding:
10px; border: 5px solid
Page 6
gray; margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
v) Units and URLs
a) lengths
These can be either absolute or relative. A relative length can be either positive or negative, which is indicated by preceding the
value with an optional + or –
Relative units that can be used are: em, ex, px Allowable
absolute units are: in, cm, mm, pt, pc
b) URLs can be used in style sheets just as they can in HTML documents. The format of the URL reference is url(location)
6. Formatting Blocks of Information
A webpage may consist of more than one block. We can format all the blocks with single style or separate style for each and every
block. This can be achieved in three ways
1. Using style class
2. Using <div> tag
3. Using <span> tag
1. Using class
A class is defined a set of styles which can be applied as user choice. Choices can be applied to a single type of element or may be
anonymous and hence applicable to any element.
If you want to apply a style to a particular element use the following syntax Selector.classname{property: value;
property: value}
<selector class=”classname”>
<!DOCTYPE html>
<html>
<head>
<style> p.a
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="a">This heading will not be affected</h1>
<p class="a">This paragraph will be red and center-aligned.</p>
</body>
</html>
Anonymous classes
Sometimes you want to apply a piece of formatting too many different elements within a page but not necessarily to the entire page.
Instead of defining styles to individual elements we are creating a style class that can be applicable any number of tags in your HTML
document. Such classes are called anonymous classes. It has the following syntax
.classname
{
Property: value;
Property: value;
}
<selector1 class=”classname”>..........................<selector1>
<selector2 class=”classname”>...........................<selector2>
Example:
<!DOCTYPE html>
Page 7
<html>
<head>
<style>
.a {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="a">Red and center-aligned heading</h1>
<p class="a">Red and center-aligned paragraph.</p>
</body>
</html>
2. Using <div> tag
An element in an HTML document is either a block element or an inline element. A block would be something like a
paragraph, while an inline might be something like text, a figure or an individual character i.e., part of block. Each of these can be
manipulated separately, rather than applying the formatting to the element itself, a <div> ….. </div> pair of tags are wrapped around
the elements. Any formatting that needs adding is placed inside the <div> tag. The <div> tag has the following syntax:
<div class=”any element”>
<p> ……. </p>
<p>.................</p>
<hr>
</div>
Example:
<html>
<head>
<title> div tag css demo </title>
<head>
<style type=”text / css”>
.a
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div class “a”>
<h3> this is heading inside division </h3>
<p> The div tag is known as Division tag. The Div tag is used in HTML to make divisions of content in the web page like (text,
images, header, footer, navigation bar etc).</p>
</div>
</body>
</html>
3. Using <span> tag:
The <span> tag has very similar properties to the <div> tag. If you want to group text
without using elements use a <span> tag. It has the following syntax
<span [id=”…..”][class=”…..” | style=”…..”]>……. </span>
What is the difference between <span> and <div>?
Span as an in-line element and a div as a block level element.
Span:
The span element basically occupies only the amount of space required by the element , it will not take the whole space/width of the
web page .
Second thing is span doesn't breaks the line , i.e. all the spans will be shown in single line in a web page as shown in the
Page 8
screenshot below.
Div:
The div element occupies all the width available to it on the web page and every time a new div element is made it breaks the line
and starts in a new line.
<html>
<head>
<title>Span tag</title>
</head>
<body>
<p>web technologies
<span style="color:green;background-color:red;">Web Technology</span></p>
<p>Web Technologies
<div style="color:red;background-color:yellow;">Web Technology</div></p>
</body>
</html>
6. Layers in CSS
The page layout that a browser creates results from layering text and images on the top of each other. This lets web designers use
images as the backgrounds of their pages and then place further images and text over them. By extending the idea slightly we can
place text items and images on top of each other in multiple layers.
Netscape has extended the HTML standard by adding the layer tag. The layer tag is browser specific and it use leads to confusion with
the more general idea of layers. The following are the properties and values of layers.
Z-index: n
The browser maintains a stack of layers of content.
Position: absolute | relative
The placement of the layer may be absolute or relative. The default is absolute.
Left: n, Top: n
The location of the division in pixels. We can specify the position of their top-left corner.
Width: n, Height: m
The size of division in pixels defaults to the document of space needed to display the content
of the division.
Example:
<html>
<head><title>layers</title></head>
<body>
<div style="left:100px;
top:300px;
position:absolute;
color:magenta;
background-color:yellow;
font-size:thin-groove;">
<p>some more text here</p>
</div>
top:260px;
position:absolute;
color:magenta;
background-color:green;
</div>
top:230px;
position:absolute;
color:magenta;
background-color:red;
Page 9
</div>
</body>
</html>
Unit-II
Important Questions
Short Questions:
1. Write about advantages and disadvantages of CSS.
2. Briefly Explain about Properties and values in CSS.
3. Explain difference between Span and div
Essay Questions:
1. What is CSS? Why use CSS? CSS Syntax? Various types of CSS?
2. Explain about formatting blocks of information?
3. Expalin about layers in CSS in detail write with Example Program?
Page 10

Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers

Uploaded by

Copyright:

Available Formats

Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers

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

Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers

Uploaded by

Copyright:

Available Formats

I BSC VI SEM Web Technologies

 The selector points to the HTML element you want to style.

Advantages and Disadvantages of CSS

Superior styles to HTML

Various Types of CSS

</style>

5. Properties and Values

(ii) Backgrounds and color properties

<p> this paragraph represents font size and font weight</p>

Margin: length | percentage | auto {1,4}

You might also like