WEB TECHNOLOGY

UNIT 2
CASCADING STYLE SHEETS (CSS)
Getting Started With CSS
Learning objectives:
After the Completion of this unit you should be able to know
 What a style sheet is and how it actually styles a web page
 The importance of CSS.
 How to create a style sheet and link an html document to the style sheet.
 The basic building blocks of any style sheet: rules, selectors, properties
and values.
 How External Style Sheets are stored in CSS files
 Three ways of inserting a style sheet
 Different selectors using CSS
 Define background properties ,Background colour & images handling
 Font family, Style and Size using CSS
 Designing Tables using CSS
Structure

3.1 Introduction of CSS

3.1.1 Definition
3.1.2 Advantages
3.1.3 Parts of CSS
3.2 CSS Syntax
3.2.1 Rules / Principle of CSS
3.2.2 Parts of style sheet
3.3 CSS Selectors
3.3.1 The element selectors
3.2.2 The ID selectors
3.2.3 The Class selectors
3.3.4 Universal Selector
3.3.5 Attribute Selector
3.4 Ways to Insert CSS
3.4.1 External style sheet
3.4.2 Internal style sheet
3.4.3 Inline style
3.5 Background image handling
3.5.1 Repeat the Background Image
3.5.2 Set the background image position
3.6 Background colour management using CSS
3.6.1 CSS color hex code
3.6.2 CSS color -short hex code
3.6.3 CSS color RGB value
3.7 Text management using CSS
3.7.1 Set the text color
 3.7.2 Set the text direction
3.7.3 Set the space between character
3.7.4 Set the space between word
3.7.5 Set the text indent
3.7.6 Set the text alignment
3.7.7 Decorating the text
3.7.8 Set the text cases
3.8 Font management using CSS
3.81. Set the font family
3.8.2 Set the style
3.8.3 Set the font variant
3.8.4 Set the font weight
3.8.5 Set the Font size
3.9 Managing Hyperlinks using CSS
3.9.1 Set the color of Visited link
3.9.2 Change the Color of Links when Mouse is Over
3.9.3 Change the color of active link
3.10 Managing Lists using CSS
3.10.1 The list style type Property
3.10.2 The list-style-position Property
3.11 Designing Tables using CSS
3.11.1 The empty cells Property
3.11.2 The border-spacing Property
3.12 Working with the BOX Model
3.12.1 The Height and Width Properties
3.12.2 The line height property
3.12.3 The max height property
3.12.4 The max width property
3.13 Designing Borders using CSS
3.13.1 The border color property
3.13.2 The border-style Property
3.14 Designing outline using CSS
3.14.1 The outline width property
3.14.2 The outline style
3.14.3 The outline-color property
3.15 Setting Page Margin using CSS
3.15.1 The Margin Property
3.15.2 The Margin Bottom Property
3.15.3 The Margin left Property
3.16 Let us sum up
3.17 Reference
3.18 Check Your Progress-possible answers
Introduction of CSS
CSS stands for Cascading Style Sheets. It 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 the
text, 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 works with HTML and other Markup Languages (such as XHTML and
XML) to control the way the content is presented. Cascading Style Sheets is a
means to separate the appearance of a webpage from the content of a webpage.

Definition

Cascading Style Sheets (CSS) is a simple mechanism used to format the

layout of Web Pages and adding style (e.g., fonts, colors, spacing...) to web
documents that previously could only be defined in a page's HTML.
CSS describes how HTML elements are to be displayed on screen, paper, or in
other media. It can control the layout of multiple web pages all at once.

Advantages

The advantages of CSS are:

❖ CSS saves time - You can write CSS once and then reuse the same sheet
in multiple HTML pages.
❖ Pages load faster – Increases Download Speed
❖ Easy maintenance - To make a global change, all the elements in all the
web pages will be updated automatically.
❖ Superior styles to HTML – It is 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.
❖ Global web standards - Now HTML attributes are being deprecated and
it is being recommended to use CSS

What is the “Cascade” part of CSS?

The cascade part of CSS means that more than one style sheet can be
attached to a document, and all of them can influence the presentation. For
example, a designer can have a global style sheet for the whole site, but a local
one for say, controlling the link color and background of a specific page. Or, a
user can use own style sheet if s/he has problems seeing the page, or if s/he just
prefers a certain look.
1
CSS Syntax

A CSS style rule is made of three parts:

1. Selector: A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1>, <p> or <table> etc.
2. Property: A property is a type of attribute of HTML tag. Put simply, all
the HTML attributes are converted into CSS properties. They could be
color, border, bgcolor etc.
3. Value: Values are assigned to properties. For example, color property can
have the value either red or #F1F1F1 etc.

The format or syntax of CSS is:

Selector {property:

Example:You can define a heading as follows:

h1 {color: red; font-size :15px}

Selector Property Value Property Value

Here h1 is a selector , color and font-size are properties and the

given value red, and 15px are the value of that property.
 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.
Rules/ Principle of CSS
1. Every statement must have a selector and a declaration. The declaration
comes immediately after the selector and is contained in a pair of curly
braces.
2. The declaration is one or more properties separated by semicolons.
3. Each property has a property name followed by a colon and then the value
for that property. There are many different types of values, but any given
property can only take certain values as set down in the specification.
4. Sometimes a property can take a number of values, as in the font-family.
The values in the list should be separated by a comma and a space.
5. Sometimes a value will have a unit as well as the actual value, as in the
1.3em. You must not put a space between the value and its unit.
6. As with HTML, white space can be used to make your style sheet easier to
read and write.

2
 Parts of style sheet
A style sheet consists of one or more rules that describe how
document elements should be displayed. A rule in CSS has two parts: the
selector and the declaration. The declaration also has two parts, the
property and the value. Let's take a look at a rule for a heading 1 style: h1
{ font-family: verdana, "sans serif"; font-size: 1.3em } This expression is a
rule that says every h1 tag will be verdana or other sans-serif font and the
fontsize will be 1.3em. Let's take a look at the different parts of this rule.

Selector
{
property1: some value;
property2: some value;
}
The declaration contains the property and value for the selector. The property is
the attribute you wish to change and each property can take a value. The property
and value are separated by a colon and surrounded by curly braces:
body { background-color: black}
If the value of a property is more than one word, put quotes around that value:
body { font-family: "sans serif"; } If you wish to specify more than one property,
you must use a semi-colon to separate each property. This rule defines a
paragraph that will have blue text that is centered.
p { text-align: center; color: blue }
You can group selectors. Separate each selector with a comma. The example
below groups headers 1, 2, and 3 and makes them all yellow. h1, h2, h3 {
color: yellow}

Check your progress 1

Q1. Write the abbreviation of CSS?
Answer:

Q2. Write the three parts of CSS syntax?

Answer:

3
CSS Selectors
You can define selectors in various simple ways based on your comfort. Let me
put these selectors one by one. Three types of CSS Selectors
1. The Element selectors
2. The ID Selectors
3. The Class Selectors
The Element selectors
A CSS declaration always ends with a semicolon, and declaration groups
are surrounded by curly brackets: example -
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line,
like this:
p
{
color:red;
text-align:center;
}
The ID selectors
The id selector is used to specify a style for a single, unique element.The
id selector uses the id attribute of the HTML element, and is defined with a
"#". Example –
Imagine within the body element of our html page, we have the following
paragraph element
<p id=”welcome”>Welcome to the 1st CSS
Document </p>
We can then create a CSS rule with the id selector:

#welcome
{
color:red;
text-align:center;
}
The Class selectors
The class selector is used to specify a style for a group of elements. Unlike
the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the
same class. The class selector uses the HTML class attribute, and is
defined with a ".". In the example below, all HTML elements with
class="center" will be center-aligned:

Imagine within the body element of our html page, we have the following
header element
<h2 class=”center”>Summary</h2>
We can then create a CSS rule with the class selector:
.center {text-align:center;}

4
 You can also specify that only specific HTML elements should be affected
by a class. In the example below, all p elements with class="center" will
be center-aligned: example
p.center {text-align:center;}
Some of the other selectors are used in CSS, they are :
Universal selector
An asterisk (*) is the universal selector for CSS. It matches a single
element of any type. Omitting the asterisk with simple selectors has the
same effect. For instance, *.warning and. warning are considered equal.
Rather than selecting elements of a specific type, the universal selector
quite simply matches the name of any element type: Example-
*
{
Color:#000000;
}
This rule renders the content of every element in our document in black.
Attribute Selector
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, and the 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 a value of exactly "fr".
➢ p[lang~="fr"] - Selects all paragraph elements whose lang attribute
contains the word "fr".
➢ p[lang|="en"] - Selects all paragraph elements whose lang attribute
contains values that are exactly "en", or begin with "en-".

Check your progress 2

Q1. What are the 3 types of selectors?.
Answer:

Q2. What is universal selector ?.

Answer:

5
Ways to insert CSS

There are three ways of inserting a style sheet:

1. External style sheet
2. Internal style sheet
3. Inline style
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. The
<link> tag goes inside the head section:
<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. An
example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Notes : Do not leave spaces between the property value and the units! "margin-
left:20 px" (instead of "margin- left:20px") will work in IE, but not in Firefox or
Opera.

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:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back1.gif");}
</style>
</head>
Inline style sheet
An inline style loses many of the advantages of style sheets by mixing content
with presentation. Use this method sparingly! To use inline styles you use the style
attribute in the relevant tag. The style attribute can contain any CSS property. The
example shows how to change the color and the left margin of a paragraph:

6
 <p style="color:sienna;margin-left:20px">This is a
paragraph.</p>

Background image handling

The background-image property specifies an image to use as the background of an
element. By default, the image is repeated so it covers the entire element. The
background image for a page can be set like this:body {background-
image:url('paper.gif');}
Example
<html>
<head>
<Title>This is my Internal css page</Title>
<style type="text/css">
body
{
background-image:url
("C:/Users/SAI/Desktop/Desktop/100MSDCF/11.
jpg");
}
</style>
</head>
<body>
Background Image
</body>
</html>

The output of the above example is :

7
 You can set the following background properties of an element:
➢ The background-image property is used to set the background image of
an element.
➢ The background-repeat property is used to control the repetition of an
image in the background.
➢ The background-position property is used to control the position of an
image in the background.
➢ The background-attachment property is used to control the scrolling of
an image in the background.
➢ The background property is used as shorthand to specify a number of other
background properties.
Repeat the Background Image
The following example demonstrates how to repeat the background image
if an image is small. You can use no-repeat value for the background-repeat
property if you don't want to repeat an image. In this case, the image will display
only once. By default, the background-repeat property will have a repeat value.
<table style="background-image:url(/images/pattern1.gif); background-repeat:
repeat;">
<tr><td>
This table has background image which repeats multiple times.
</td></tr>
</table>
The following example which demonstrates how to repeat the background image
vertically.
<table style="background-image:url(/images/pattern1.gif); background-repeat:
repeat-y;">
<tr><td>
This table has background image set which will repeat vertically. </td></tr>
</table>
The following example demonstrates how to repeat the background image
horizontally.
<table style="background-image:url(/images/pattern1.gif); background-repeat:
repeat-x;">
<tr><td>
This table has background image set which will repeat horizontally. </td></tr>
</table>
Set the Background Image Position
The following example demonstrates how to set the background image position
100 pixels away from the left side.
<table style="background-image:url(/images/pattern1.gif);
background-position:100px;">
<tr><td>
Background image positioned 100 pixels away from the left.
</td></tr>
</table>

8
 Check your progress 3

Q1. How many ways to build style sheet ? what are they ?
Answer:

Q2. Write the background properties of CSS.

Answer:

Background colour Management using CSS

The background-color property specifies the background color of an
element. The background color of a page is defined in the body selector: Example

body {background-color:#b0c4de;}
<p style="background-color:yellow;">
This text has a yellow background color. </p>

With CSS, a color is most often specified by:

1. a HEX value - like "#ff0000"
2. an RGB value - like "rgb(255,0,0)"
3. a color name - like "red"
In the example below, the h1, p, and div elements have different background
colors:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Example

9
CSS Colors - Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two digits
(RR) represent a red value, the next two are a green value (GG), and the last are
the blue value (BB). Each hexadecimal code will be preceded by a pound or hash
sign ‘#’. Following are the examples to use Hexadecimal notation.

CSS Colors - Short Hex Codes

This is a shorter form of the six-digit notation. In this format, each digit is
replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes
#66AA77.

10
CSS Colors - RGB Values

This color value is specified using the rgb( ) property. This property takes
three values, one each for red, green, and blue. The value can be an integer
between 0 and 255 or a percentage. NOTE: All the browsers does not support
rgb() property of color, so it is recommended not to use it.

Text Management using CSS

CSS is a language that describes the style of an HTML document. You can set the
following text properties of an element:

➢ The color property is used to set the color of a text.

➢ The direction property is used to set the text direction.
➢ The letter-spacing property is used to add or subtract space between the
letters that make up a word.
➢ The word-spacing property is used to add or subtract space between the
words of a sentence.
➢ The text-indent property is used to indent the text of a paragraph.
➢ The text-align property is used to align the text of a document.
➢ The text-decoration property is used to underline, overline, and
strikethrough text.
11
 ➢ The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
➢ The white-space property is used to control the flow and formatting of
text.
➢ The text-shadow property is used to set the text shadow around a text.

Set the Text Color

The following example demonstrates how to set the text color. Possible
value could be any color name in any valid format.
<p style="color:red;">This text will be written in red. </p>

Set the Text Direction

The following example demonstrates how to set the direction of a text.
Possible values are ltr or rtl.
<p style="direction:rtl;">This text will be rendered from right to left </p>

Set the Space between Characters

The following example demonstrates how to set the space between

characters. Possible values are normal or a number specifying space.

<p style="letter-spacing:5px;">This text is having space between letters.

</p>

Set the Space between Words

The following example demonstrates how to set the space between words.
Possible values are normal or a number specifying space.

<p style="word-spacing:5px;">This text is having space between words.

</p>

Set the Text Indent

The following example demonstrates how to indent the first line of a
paragraph. Possible values are % or a number specifying indent space.

<p style="text-indent:1cm;">
This text will have first line indented by 1cm and this line will
remain at its actual position this is done by CSS text-indent
property.
</p>

Set the Text Alignment

The following example demonstrates how to align a text. Possible values

are left, right, center, justify.

<p style="text-align:right;"> This will be right aligned. </p>

<p style="text-align:center;"> This will be center aligned. </p>
<p style="text-align:left;"> This will be left aligned. </p>
12
Decorating the Text

The following example demonstrates how to decorate a text. Possible

values are none, underline, overline, line-through, blink.

<p style="text-decoration:underline;"> This will be underlined </p>

<p style="text-decoration:line-through;"> This will be striked through.
</p>
<p style="text-decoration:overline;"> This will have a over line. </p>
<p style="text-decoration:blink;">This text will have blinking effect </p>

Set the Text Cases

The following example demonstrates how to set the cases for a text.
Possible values are none, capitalize, uppercase, lowercase.

<p style="text-transform:capitalize;"> This will be capitalized </p>

<p style="text-transform:uppercase;"> This will be in uppercase </p>
<p style="text-transform:lowercase;"> This will be in lowercase </p>

Example
:

13
 The output of the above program is :

Font Management using CSS

A font is the combination of typeface and other qualities, such as size, pitch,
and spacing. For example, Times Roman is a typeface that defines the shape
of each character. Within Times Roman, however, there are many fonts to
choose from -- different sizes, italic, bold, and so on.You can set the following
font properties of an element:

➢ The font-family property is used to change the face of a font.

➢ The font-style property is used to make a font italic or oblique.
➢ The font-variant property is used to create a small-caps effect.
➢ The font-weight property is used to increase or decrease how bold or light
a font appears.
➢ The font-size property is used to increase or decrease the size of a font.
➢ The font property is used as shorthand to specify a number of other font
properties.

Set the Font Family

Following is the example, which demonstrates how to set the font family
of an element. Possible value could be any font family name.

14
 <p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system. </p>

Set the Font Style

The following example demonstrates how to set the font style of an

element. Possible values are normal, italic and oblique.

<p style="font-style:italic;">This text will be rendered in italic

style </p>
Set the Font Variant
The following example demonstrates how to set the font variant of an
element. Possible values are normal and small-caps.

<p style="font-variant:small-caps;"> This text will be rendered as small

caps </p>
Set the Font Weight
The following example demonstrates how to set the font weight of an
element. The font-weight property provides the functionality to specify
how bold a font is. Possible values could be normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900.
<p style="font-weight:bold;"> This font is bold. </p>
<p style="font-weight:bolder;"> This font is bolder. </p>
<p style="font-weight:900;"> This font is 900 weight. </p>

Set the Font Size

The following example demonstrates how to set the font size of an
element. The font-size property is used to control the size of fonts.
Possible values could be xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger, size in pixels or in %.

<p style="font-size:20px;"> This font size is 20 pixels </p>

<p style="font-size:small;"> This font size is small </p>
<p style="font-size:large;"> This font size is large </p>

Set the Font Size Adjust

The following example demonstrates how to set the font size adjust of an
element. This property enables you to adjust the x-height to make fonts
more legible. Possible value could be any number.

<p style="font-size-adjust:0.61;">This text is using a font-size-adjust

value. </p>
Set the Font Stretch

The following example demonstrates how to set the font stretch of

an element. This property relies on the user's computer to have an
expanded or condensed version of the font being used.

15
 Possible values could be normal, wider, narrower, ultra-condensed,
extra-condensed, condensed, semi-condensed, semi-expanded,
expanded, extra-expanded, ultra-expanded.
<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a condensed or expanded version of the font being
used. </p>
Example:-

The output of the above program is :

16
Managing hyperlinks using CSS
An element in an electronic document that links to another place in the same
document or to an entirely different document. A hyperlink, or simply a link, is a
reference to data that the reader can directly follow either by clicking, tapping, or
hovering. A hyperlink points to a whole document or to a specific element within
a document. Hypertext is text with hyperlinks. The text that is linked is called
anchor text. You can set the following properties of a hyperlink:

➢ The :link signifies unvisited hyperlinks.

➢ The :visited signifies visited hyperlinks.
➢ The :hover signifies an element that currently has the user's mouse pointer
hovering over it.
➢ The :active signifies an element on which the user is currently clicking.

Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective. Also, a:active MUST come after a:hover in the CSS
definition as follows:

<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

Set the Color of Links

The following example demonstrates how to set the link color. Possible
values could be any color name in any valid format.

<style type="text/css">
a:link {color:#000000}
</style>

<a href="/html/index.htm">Black Link</a>

Set the Color of Visited Links

The following example demonstrates how to set the color of the visited
links. Possible values could be any color name in any valid format.

<style type="text/css">
a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>

17
Change the Color of Links when Mouse is Over
The following example demonstrates how to change the color of links
when we bring a mouse pointer over that link. Possible values could be
any color name in any valid format.
<style type="text/css">
a:hover {color: #FFCC00}
</style>

<a href="/html/index.htm">Bring Mouse Here</a>

Change the Color of Active Links

The following example demonstrates how to change the color of active

links. Possible values could be any color name in any valid format.

<style type="text/css">
a:active {color: #FF00CC}
</style>

<a href="/html/index.htm">Click This Link</a>

Check your progress 4

Q1. What is the representation of 6 digit Hexa code ?
Answer:

Q2. What are the different properties of Font ?

Answer:

Q3. Write the different properties of Hyperlink ?

Answer:

Managing List using CSS

Lists are very helpful in conveying a set of either numbered or bulleted points.
This chapter teaches you how to control list type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control lists:

➢ The list-style-type allows you to control the shape or appearance of the

marker.
➢ The list-style-position specifies whether a long point that wraps to a
second line should align with the first line or start underneath the start of
the marker.
➢ The list-style-image specifies an image for the marker rather than a bullet
point or number.
➢ The list-style serves as shorthand for the preceding properties.

18
 ➢ The marker-offset specifies the distance between a marker and the text in
the list.

The list-style-type Property

The list-style-type property allows you to control the shape or style of a bullet
point (also known as a marker) in case of unordered lists and the style of
numbering characters in ordered lists. Here are the values, which can be used for
an unordered list:

Value Description
None NA
disc A filled-in
(default) circle
Circle An empty
circle
Square A filled-in
square

Here are the values, which can be used for an ordered list:

Value Description Example

Decimal Number 1,2,3,4…..
decimal- 0 before the number 01, 02,
leading- …..
zero
lower- Lowercase alphanumeric a, b, c, ….
alpha characters
upper- Uppercase alphanumeric A, B, C,
alpha characters D, E..
lower- Lowercase Roman i, ii, iii, iv,
roman numerals v
upper- Uppercase Roman I, II, III,
roman numerals IV, V

Here is an example:

19
 The output of the above program is :

The list-style-position Property

The list-style-position property indicates whether the marker should
appear inside or outside of the box containing the bullet points. It can have
one of the two values:

Value Description
None NA
Inside If the text goes onto a second line, the text will wrap
underneath the marker. It will also appear indented to where
the text would have started if the list had a value of outside.
Outside If the text goes onto a second line, the text will be aligned
with the start of the first line (to the right of the bullet).

20
Example :
<html>
<head>
<Title>This is my inline css page</Title>
</head>
<body>
<ul style="list-style-type:circle; list-stlye-
position:outside;"><li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;list-style-
position:inside;"><li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;list-stlye-
position:outside;"><li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;list-style-position:inside;">

<li>Maths</li>
<li>Social Science</li><li>Physics</li>
</ol>
</body>
</html>

The output of the above program is :

21
Designing Tables using CSS
Tables are an excellent way to organize and display information on a page. You
can set the following properties of a table:

• The border-collapse specifies whether the browser should control the

appearance of the adjacent borders that touch each other or whether each
cell should maintain its style.
• The border-spacing specifies the width that should appear between table
cells.
• The caption-side captions are presented in the <caption> element. By
default, these are rendered above the table in the document. You use the
caption-side property to control the placement of the table caption.
• The empty-cells specify whether the border should be shown if a cell is
empty.
• The table-layout allows browsers to speed up the layout of a table by
using the first width properties it comes across for the rest of a column
rather than having to load the whole table before rendering it.

The order-collapse Property

This property can have two values collapse and separate. The following
example uses both the values:

<html>
<head>
<Title>This is my inline css page</Title>
</head>
<body>
<style type="text/css">
table.one
{border-collapse:collapse;}
table.two
{border-collapse:separate;}
td.a
{
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b
{
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
22
 </style>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table><br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>

The output of the above program is :

The border-spacing Property

The border-spacing property specifies the distance that separates the

adjacent cells’ borders. It can take either one or two values; these should be units
of length. If you provide one value, it applies to both vertical and horizontal
borders. Or you can specify two values, in which case, the first refers to the
horizontal spacing and the second to the vertical spacing:
NOTE: Unfortunately, this property does not work in Netscape 7 or IE 6.
Now let's modify the previous example and see the effect:

23
 <style type="text/css">
table.one
{
border-collapse:separate; width:400px;
border-spacing:10px;
}
table.two
{
border-collapse:separate; width:400px;
border-spacing:10px 50px;
}
</style>
<table class="one" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table><br />
<table class="two" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>

The empty-cells Property

The empty-cells property indicates whether a cell without any content should have
a border displayed. This property can have one of the three values - show, hide,
or inherit. Here is the empty-cells property used to hide borders of empty cells in
the <table> element.

Example:

<html>
<head>
<Title>This is my inline css page</Title>
</head>
<body>
<style type="text/css">
table.empty
{
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty
{
padding:5px;
border-style:solid;
24
 border-width:1px;
border-color:#999999;}
</style>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td><td class="empty">value</td></tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td><td class="empty"></td>
</tr>
</table>
</body>
</html>

The output of the above program is :

Check your progress 5

Q1. What is the different properties of table in css ?

Answer:

Q2. What are the different values of ordered and unordered list in css ?
Answer:

25
Working with Box Model
You have seen the border that surrounds every box i.e. element, the padding that
can appear inside each box, and the margin that can go around them. In this
chapter, we will learn how to change the dimensions of boxes. We have the
following properties that allow you to control the dimensions of a box.
➢ The height property is used to set the height of a box.
➢ The width property is used to set the width of a box.
➢ The line-height property is used to set the height of a line of text.
➢ The max-height property is used to set a maximum height that a box can
be.
➢ The min-height property is used to set the minimum height that a box can
be.
➢ The max-width property is used to set the maximum width that a box can
be.
➢ The min-width property is used to set the minimum width that a box can
be.

The Height and Width Properties

The height and width properties allow you to set the height and width for boxes.
They can take values of a length, a percentage, or the keyword auto. Here is an
example:

The output of the above program is:

26
The line-height Property

The line-height property allows you to increase the space between lines of text.
The value of the line-height property can be a number, a length, or a percentage.
Here is an example:

The output of the above program is

The max-height Property

The max-height property allows you to specify the maximum height of a box. The
value of the max-height property can be a number, a length, or a percentage.

NOTE: This property does not work in either Netscape 7 or IE 6.

Here is an example:

27
 The output of the above program is

The max-width Property

The max-width property allows you to specify the maximum width of a box. The
value of the max-width property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
Here is an example:

28
 The output of the above program is

Designing borders using CSS

The border properties allow you to specify how the border of the box representing
an element should look. There are three properties of a border you can change:

➢ The border-color specifies the color of a border.

➢ The border-style specifies whether a border should be solid, dashed line,
double line, or one of the other possible values.
➢ The border-width specifies the width of a border.

The border-color Property

The border-color property allows you to change the color of the border
surrounding an element. You can individually change the color of the bottom, left,
top and right sides of an element's border using the properties:

➢ border-bottom-color changes the color of bottom border.

➢ border-top-color changes the color of top border.
➢ border-left-color changes the color of left border.
➢ border-right-color changes the color of right border.
29
 The following example shows the effect of all these properties:

The output of the above program is :

The border-style Property

The border-style property allows you to select one of the following styles of
border:
➢ none: No border. (Equivalent of border-width:0;)
➢ solid: Border is a single solid line.
➢ dotted: Border is a series of dots.
➢ dashed: Border is a series of short lines.
➢ double: Border is two solid lines.
30
 ➢ groove: Border looks as though it is carved into the page.
➢ ridge: Border looks the opposite of groove.
➢ inset: Border makes the box look like it is embedded in the page.
➢ outset: Border makes the box look like it is coming out of the canvas.
➢ hidden: Same as none, except in terms of border-conflict resolution for table
elements.

You can individually change the style of the bottom, left, top, and right borders of
an element using the following properties:

➢ border-bottom-style changes the style of bottom border.

➢ border-top-style changes the style of top border.
➢ border-left-style changes the style of left border.
➢ border-right-style changes the style of right border.

The following example shows all these border styles:

It will produce the following result:

31
Designing outline using CSS
Outlines are very similar to borders, but there are few major differences as well:
➢ An outline does not take up space.
➢ Outlines do not have to be rectangular.
➢ Outline is always the same on all sides; you cannot specify different values
for different sides of an element.

NOTE: The outline properties are not supported by IE 6 or Netscape 7. You can
set the following outline properties using CSS.

➢ The outline-width property is used to set the width of the outline.

➢ The outline-style property is used to set the line style for the outline.
➢ The outline-color property is used to set the color of the outline.
➢ The outline property is used to set all the above three properties in a single
statement.

The outline-width Property

The outline-width property specifies the width of the outline to be added to the
box. Its value should be a length or one of the values thin, medium, or thick, just
like the border-width attribute. A width of zero pixels means no outline. Here is
an example:

32
 The above program will produce the following result:

The outline-style Property

The outline-style property specifies the style for the line (solid, dotted, or dashed)
that goes around an element. It can take one of the following values:
➢ none: No border. (Equivalent of outline-width:0;)
➢ solid: Outline is a single solid line.
➢ dotted: Outline is a series of dots.
➢ dashed: Outline is a series of short lines.
➢ double: Outline is two solid lines.
➢ groove: Outline looks as though it is carved into the page.
➢ ridge: Outline looks the opposite of groove.
➢ inset: Outline makes the box look like it is embedded in the page.
➢ outset: Outline makes the box look like it is coming out of the canvas.
➢ hidden: Same as none.

33
 Here is an example:

The above program will produce the following result:

The outline-color Property

The outline-color property allows you to specify the color of the outline. Its value
should either be a color name, a hex color, or an RGB value, as with the color and
border-color properties. Here is an example:

34
 The above program will produce the following result:

Setting Page Margin using CSS

The margin property defines the space around an HTML element. It is
possible to use negative values to overlap content. The values of the margin
property are not inherited by the child elements. Remember that the adjacent
vertical margins (top and bottom margins) will collapse into each other so that the
distance between the blocks is not the sum of the margins, but only the greater of
the two margins or the same size as one margin if both are equal.
We have the following properties to set an element margin.

35
 ➢ The margin specifies a shorthand property for setting the margin
properties in one declaration.
➢ The margin-bottom specifies the bottom margin of an element.
➢ The margin-top specifies the top margin of an element.
➢ The margin-left specifies the left margin of an element.
➢ The margin-right specifies the right margin of an element.

The Margin Property

The margin property allows you to set all of the properties for the four
margins in one declaration. Here is the syntax to set margin around a paragraph:
<style type="text/css">
p {margin: 15px}
all four margins will be 15px

p {margin: 10px 2%}

top and bottom margin will be 10px, left and right margin will be 2% of the total
width of the document.

p {margin: 10px 2% -10px}

top margin will be 10px, left and right margin will be 2% of the total width of the
document, bottom margin will be -10px

p {margin: 10px 2% -10px auto}

top margin will be 10px, right margin will be 2% of the total width of the
document, bottom margin will be -10px, left margin will be set by the browser
</style>

Here is an example:

36
 The above program will produce the following result:

The margin-bottom Property

The margin-bottom property allows you to set the bottom margin of an element. It
can have a value in length, %, or auto.
Here is an example:

The above program will produce the following result:

37
The margin-left Property

The margin-left property allows you to set the left margin of an element. It can
have a value in length, %, or auto. Here is an example:

The above program will produce the following result

38
 Check your progress 6

Q1. Write the different properties of the dimensions of a box.

Answer:

Q2. Write the three properties of border.

Answer:

Q3. Write the few major difference of outline in CSS.

Answer:

Q4. What is a margin property?

Answer:

Q5. Write the border-style property in CSS.

Answer:

Let us sum up
In this unit we have understood what is CSS, advantages of CSS,
Parts of CSS, CSS syntax, CSS selectors, ways to insert CSS, background
image handling, background colour management, text management,
font management, managing hyperlinks, managing lists, designing tables,
working with box model, designing borders, designing outline,
setting page margin

Reference

1. W3Schools.com
2. Google.com
3. Tutorialpoints.com

Check your progress possible answers

Check your progress 1

Q1. Write the abbreviation of CSS?

Answer

CSS stands for Cascading Style Sheets. It is a simple design language intended to
simplify the process of making web pages presentable.

39
 Q2. Write the three parts of CSS syntax?
Answer
CSS style is made of three parts:
1. Selector: A selector is an HTML tag at which a style will be applied. This could
be any tag like <h1>, <p> or <table> etc.
2. Property: A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color, border,
bgcolor etc.
3. Value: Values are assigned to properties. For example, color property can have
the value either red or #F1F1F1 etc.

Check your progress 2

Q1. What are the 3 types of selectors.

Answer

Three types of CSS Selectors

1. The Element selectors
2. The ID Selectors
3. The Class Selectors

Q2. What is universal selector ?.

Answer
Universal selector
An asterisk (*) is the universal selector for CSS. It matches a single element of any
type. Omitting the asterisk with simple selectors has the same effect. For
instance, *.warning and.warning are considered equal. Rather than selecting elements
of a specific type

Check your progress 3

Q1. How many ways to build style sheet ?what are they ?
Answer
There are three ways of inserting a style sheet:
1. External style sheet
2. Internal style sheet
3. Inline style

40
 Q2. Write the background properties of CSS
Answer

You can set the following background properties of an element:

➢ The background-image property is used to set the background image of an element.

➢ The background-repeat property is used to control the repetition of an image in the
background.
➢ The background-position property is used to control the position of an image in the
background.
➢ The background-attachment property is used to control the scrolling of an image in
the background.
➢ The background property is used as shorthand to specify a number of other
background properties.
Check your progress 4

Q1. What is the representation of 6 digit Hexa code ?

Answer
A hexadecimal is a 6 digit representation of a color. The first two digits (RR)
represent a red value, the next two are a green value (GG), and the last are the blue
value (BB). Each hexadecimal code will be preceded by a pound or hash sign ‘#’.
Following are the example to use Hexadecimal notation.
#66AA77

Q2. What are the different properties of Font ?

Answer
Font properties of an element:
➢ The font-family property is used to change the face of a font.
➢ The font-style property is used to make a font italic or oblique.
➢ The font-variant property is used to create a small-caps effect.
➢ The font-weight property is used to increase or decrease how bold or light a font
appears.
➢ The font-size property is used to increase or decrease the size of a font.
➢ The font property is used as shorthand to specify a number of other font properties.

Q3. Write the different properties of Hyperlink ?

Answer
Properties of a hyperlink:
➢ The :link signifies unvisited hyperlinks.
➢ The :visited signifies visited hyperlinks.
➢ The :hover signifies an element that currently has the user's mouse pointer hovering
over it.
➢ The :active signifies an element on which the user is currently clicking.

41
 Check your progress 5

Q1. What is the different properties of table in css ?

Answer
Following properties of a table:

• The border-collapse specifies whether the browser should control the appearance of
the adjacent borders that touch each other or whether each cell should maintain its
style.
• The border-spacing specifies the width that should appear between table cells.
• The caption-side captions are presented in the <caption> element. By default, these
are rendered above the table in the document. You use the caption-side property to
control the placement of the table caption.
• The empty-cells specify whether the border should be shown if a cell is empty.
• The table-layout allows browsers to speed up the layout of a table by using the first
width properties it comes across for the rest of a column rather than having to load the
whole table before rendering it.

Q2. What are the different values of ordered and unordered list in CSS ?
Answer

The values, for an unordered list:

disc (default),Circle,Square.

The values, for an ordered list:

Decimal,decimal-leading-zero,lower-alpha,upper-alpha,lower-roman,upper-roman.

Check your progress 6

Q1. Write the different properties of the dimensions of a box.

Answer
Properties of dimensions of a box.

➢ The height property is used to set the height of a box.

➢ The width property is used to set the width of a box.
➢ The line-height property is used to set the height of a line of text.
➢ The max-height property is used to set a maximum height that a box can be.
➢ The min-height property is used to set the minimum height that a box can be.
➢ The max-width property is used to set the maximum width that a box can be.
➢ The min-width property is used to set the minimum width that a box can be.

42
 Q2. Write the three properties of border.
Answer
There are three properties of a border:

➢ The border-color specifies the color of a border.

➢ The border-style specifies whether a border should be solid, dashed line, double line,
or one of the other possible values.
➢ The border-width specifies the width of a border

Q3. Write the few major difference of outline in CSS.

Answer
There are few major differences are :
➢ An outline does not take up space.
➢ Outlines do not have to be rectangular.
➢ Outline is always the same on all sides; you cannot specify different values for
different sides of an element.
Q4. What is a margin property?
Answer
Following properties to set an element margin.

1. The margin specifies a shorthand property for setting the margin properties in
one declaration.
2. The margin-bottom specifies the bottom margin of an element.
3. The margin-top specifies the top margin of an element.
4. The margin-left specifies the left margin of an element.
5. The margin-right specifies the right margin of an element
Q5. Write the border-style property in CSS.
Answer
The border-style property :
➢ none: No border. (Equivalent of border-width:0;)
➢ solid: Border is a single solid line.
➢ dotted: Border is a series of dots.
➢ dashed: Border is a series of short lines.
➢ double: Border is two solid lines.
➢ groove: Border looks as though it is carved into the page.
➢ ridge: Border looks the opposite of groove.
➢ inset: Border makes the box look like it is embedded in the page.
➢ outset: Border makes the box look like it is coming out of the canvas.
➢ hidden: Same as none, except in terms of border-conflict
resolution for table elements.

43