0% found this document useful (0 votes)

12 views

Unit 2 CSS

Uploaded by

Hardik

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

12 views

Unit 2 CSS

Uploaded by

Hardik

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 133

Unit 2

CSS
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
the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used, layout designs,variations in display for
different devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.

Advantages of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML 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
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 cell phones or for
printing.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML
pages to make them compatible to future browsers.
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the W3C called the CSS
Working Group. The CSS Working Group creates documents called specifications. When a
specification has been discussed and officially ratified by the W3C members, it becomes a
recommendation.
These ratified specifications are called recommendations because the W3C has no control
over the actual implementation of the language. Independent companies and organizations
create that software.
NOTE − The World Wide Web Consortium, or W3C is a group that makes recommendations
about how the Internet works and how it should evolve.

CSS Versions
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.

CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding 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
any tag like <h1> or <table> etc.
 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 etc.
 Value − Values are assigned to properties. For example, color property can have
value 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 given value 1px solid #C00 is the value
of that property.
You can define selectors in various simple ways based on your comfort. Let me put these
selectors one by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example to give a color to
all level 1 headings −
h1 {
color: #36CFFF;
}
The Universal Selectors
Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type −
*{
color: #000000;
}

This rule renders the content of every element in our document in black.
The Descendant Selectors
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, style rule will apply to <em> element
only when it lies inside <ul> tag.
ul em {
color: #000000;
}
The Class Selectors
You can define style rules based on the class attribute of the elements. All the elements
having that 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 our
document. 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 class attribute set to black.
You can apply more than one class selectors to given element. Consider the following
example −
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>
The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements having
that 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 our
document. 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 descendant
selectors, For example −
#black h2 {
color: #000000;
}

In this example all level 2 headings will be displayed in black color when those headings will
lie with in tags having id attribute set to black.
The Child Selectors
You have seen the descendant selectors. There is one more type of selector, which is very
similar 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 direct child of <body> element.
Other paragraphs put inside other elements like <div> or <td> would not have any effect of
this rule.

The Attribute Selectors

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-".
Multiple Style Rules
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 the
following 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 them
in 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
properties will be explained in the coming chapters and you can find complete detail about
properties in CSS References

Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a
comma, as given in the following example −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

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 applied
to them.
You can combine the various id 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.

Embedded CSS - 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 −
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

It will produce the following result −

Attributes
Attributes associated with <style> elements are −

Attribut Value Description

e
type text/css Specifies the style sheet language as a content-type (MIME type). This
is required attribute.

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

Inline CSS - The style Attribute

You can use style attribute of any HTML element to define style rules. These rules will be
applied to that element only. Here is the generic syntax −
<element style = "...style rules....">
Attributes

Attribut Value Description

style style rules The value of style attribute is a combination of style declarations
separated by semicolon (;).

Example
Following is the example of inline CSS based on the above syntax −
<html>
<head>
</head>

<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>

It will produce the following result −

External CSS - 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 −
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
Attributes
Attributes associated with <style> elements are −

Attribute Value Description

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

text css
type). This attribute is required.

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

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

Example
Consider a simple style sheet file with a name mystyle.css having the following rules −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

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>
Imported CSS - @import Rule
@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
as well −
<head>
@import url("URL");
</head>
Example
Following is the example showing you how to import a style sheet file into HTML document −
<head>
@import "mystyle.css";
</head>
CSS Rules Overriding
We have discussed four ways to include style sheet rules in a an HTML document. Here is
the rule to override any Style Sheet Rule.
 Any inline style sheet takes highest priority. So, it will override any rule defined in
<style>...</style> tags or rules defined in any external style sheet file.
 Any rule defined in <style>...</style> tags will override rules defined in any external
style sheet file.
 Any rule defined in external style sheet file takes lowest priority, and rules defined in
this file will be applied only when above two rules are not applicable.
Handling old Browsers
There are still many old browsers who do not support CSS. So, we should take care while
writing our Embedded CSS in an HTML document. The following snippet shows how you
can use comment tags to hide CSS from older browsers −
<style type = "text/css">

</style>
CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it is
very easy to comment any part in style sheet. You can simple put your comments inside
/*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++
programming languages.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>

<body>
<p>Hello World!</p>
</body>
</html>

CSS - Measurement Units

CSS supports a number of measurements including absolute units such as inches,
centimeters, points, and so on, as well as relative measures such as percentages and em
units. You need these values while specifying various measurements in your Style rules
e.g. border = "1px solid red".
We have listed out all the CSS Measurement Units along with proper Examples −

Unit Description Example

% Defines a measurement as a percentage p {font-size: 16pt; line-height: 125%;}

relative to another value, typically an
enclosing element.

cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}

em A relative measurement for the height of a font

in em spaces. Because an em unit is
equivalent to the size of a given font, if you p {letter-spacing: 7em;}
assign a font to 12pt, each "em" unit would be
12pt; thus, 2em would be 24pt.

ex This value defines a measurement relative to

a font's x-height. The x-height is determined p {font-size: 24pt; line-height: 3ex;}
by the height of the font's lowercase letter x.

in Defines a measurement in inches. p {word-spacing: .15in;}

mm Defines a measurement in millimeters. p {word-spacing: 15mm;}

pc Defines a measurement in picas. A pica is

equivalent to 12 points; thus, there are 6 picas p {font-size: 20pc;}
per inch.

pt Defines a measurement in points. A point is body {font-size: 18pt;}

defined as 1/72nd of an inch.

px Defines a measurement in screen pixels. p {padding: 25px;}

CSS - Colors
CSS uses color values to specify a color. Typically, these are used to set a color either for
the foreground of an element (i.e., its text) or else for the background of the element. They
can also be used to affect the color of borders and other decorative effects.
You can specify your color values in various formats. Following table lists all the possible
formats −

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}

These formats are explained in more detail in the following sections −

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).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc
Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the
examples to use Hexadecimal notation.

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF
#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

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.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc
Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the
examples to use Hexadecimal notation.

Color Color HEX

#000

#F00

#0F0

#0FF

#FF0

#0FF

#F0F

#FFF

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.
Following is the example to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

Building Color Codes

You can build millions of color codes using our Color Code Builder. Check our HTML Color
Code Builder. To use this tool, you would need a Java Enabled Browser.

Browser Safe Colors

Here is the list of 216 colors which are supposed to be most safe and computer independent
colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use
because they ensure that all computers would display the colors correctly when running a
256 color palette −

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF

33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

CSS - Backgrounds
You can set the following background properties of an element −
 The background-color property is used to set the background color 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 a shorthand to specify a number of other
background properties.
Set the Background Color
Following is the example which demonstrates how to set the background color for an
element.
Live Demo
<html>
<head>
</head>

<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>

This will produce following result −

Set the Background Image

We can set the background image by calling local stored images as shown below −
Live Demo
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>
<html>

It will produce the following result −

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 background-repeat property if you don't want to
repeat an image, in this case image will display only once.
By default background-repeat property will have repeat value.
Live Demo
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>