CSS

CSS Introduction
CSS stands for Cascading Style Sheets. It is a style sheet language that describes the
look and document's formatting written in the markup language. It helps us to add
new looks to our old HTML documents. By making some changes in the CSS code, we
can easily change the look of the website. It provides an additional feature to HTML.
CSS reduces the work by controlling the layout of multiple web pages. CSS is easy to
maintain and has good community support.

It is generally used with HTML to change the style of web pages and user interfaces. It
can also be used with any kind of XML documents, including plain XML, SVG, and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces
for web applications and user interfaces for many mobile applications.

Both HTML and CSS are client-side web scripting languages that are used for creating
web pages. There are many ways that create the difference between HTML and CSS,
such as the implementing methods, their syntactical structure, ease of use, and the
features like attributes.

Benefits of CSS
• CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
• Easy Maintenance: To make a global change simply change the style,
and all elements in all the webpages will be updated automatically.
• Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
• 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.
• Offline Browsing: CSS can store web applications locally with the help
of an offline cache. Using this we can view offline websites.
CSS versions release years:

History of CSS Versions

CSS 1

CSS 1 is the very first version of the cascading style sheet and recommendation of W3C. It was launched
in 1996 with the capabilities of font properties. It is also used for adding color to the background and
text side. In CSS 1, there were text alignment functionalities. It also has capabilities of padding,
positioning, and generic classifications. But now, this version is outdated and not maintained by W3C.

CSS2

W3C developed the next version of CSS and named it CSS2, and launched it in 1998. It has more
features and functionalities than the previous version. And now users could use new features like
relative, absolute, and also fixed positioning. There were media types, and bidirectional text features
were also there. This version also saw many revisions in the same, and updates came as CSS2.1.

CSS3

CSS3 is the latest version of CSS officially by W3C, and it was launched in 1999.
It has a vast collection of font types, and you can use any font type from Google
and Typecast. Also, this version is divided into many modules that make it easy
to handle, and it also saves time formatting the web pages. Currently, most
companies and organizations use CSS3 and HTML5 for their web development and
designing tasks.

What is CSS3?
The first version of CSS didn’t exist until after HTML had been around for a
few years, becoming official in 1996. Like HTML5 and its relationship to
earlier versions of HTML, CSS3 is a natural extension of the versions of CSS
that preceded it. CSS3 is more powerful than earlier versions of CSS and
introduces numerous visual effects, such as drop shadows, text shadows,
rounded corners, and gradients.

What is the difference between html and CSS?

The difference between the HTML and CSS are tabulated as follows:

On the basis of HTML CSS

Definition HTML is the markup language It is the stylesheet language used to

that describes the structure of describe the presentation and design of
web pages. web pages, including colors, layouts, and
others.

Dependency We cannot use the structure It is independent of HTML and can be

format and HTML syntax in CSS used with any XML-based markup
style sheets. language.

Implementation It is for web page structure and It is mainly for design and presentation.
content.

Architecture HTML uses tags that are It consists of selectors that are declared
surrounding the content of any using block statement syntax.
web page element.

Approach We use it mainly to develop the Mainly it is used for page style formats,
basic content of the web page. designing of the web, layouts, and many
more.

Support HTML has a lot of community It also has large community support and
support that helps to utilize a huge backup for continuous
different web page structure improvements in web designing.
approaches.

The other common differences between HTML and CSS are given as follows:

o HTML is easy to learn with a clear syntax, whereas the CSS sometimes create
complications in code and get messy.
 o HTML files can include the CSS code, but it is not the same with CSS because CSS can
never contain the HTML codes.
o HTML uses tags, whereas the CSS uses selectors.
o HTML is used to create web pages, whereas the CSS controls the layout and styling of
web pages.

Browser-Specific Prefixes
Browser vendors sometimes add prefixes to experimental or
nonstandard CSS properties and JavaScript APIs, so developers
can experiment with new ideas while—in theory—preventing
their experiments from being relied upon and then breaking web
developers’ code during the standardization process. Developers
should wait to include the unprefixed property until browser
behavior is standardized.

CSS vendor prefixes, also sometimes known as or CSS browser

prefixes, are a way for browser makers to add support for new
CSS features before those features are fully supported in all
browsers. This may be done during a sort of testing and
experimentation period where the browser manufacturer is
determining exactly how these new CSS features will be
implemented. These prefixes became very popular with the rise
of CSS3 a few years ago.

The major browsers use the following prefixes:

• -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS

browsers (including Firefox for iOS); basically, any WebKit based
browser)
• -moz- (Firefox)
• -o- (Old, pre-WebKit, versions of Opera)
• -ms- (Internet Explorer and Microsoft Edge)

Sample usage:

-webkit-transition: all 4s ease;

-moz-transition: all 4s ease;

-ms-transition: all 4s ease;

transition: all 4s ease;

Some browsers have a different syntax for certain properties

than others do, so don’t assume that the browser-prefixed
version of a property is exactly the same as the standard
property. Also, Firefox uses different values than the standard
ones.

The reason that you always end your declaration with the
normal, non-prefixed version of the CSS property is so that when
a browser does support the rule, it will use that one. The later
rules take precedence over earlier ones if the specificity is the
same, so a browser would read the vendor version of a rule and
use that if it does not support the normal one, but once it does,
it will override the vendor version with the actual CSS rule.

It might feel annoying and repetitive to have to write the

properties 2-5 times to get it to work in all browsers, but it’s a
temporary situation. For example, just a few years ago, to set a
rounded corner on a box you had to write:

-moz-border-radius: 10px 5px;

-webkit-border-top-left-radius: 10px;

border-radius: 10px 5px;

But now that browsers have come to fully support this feature,
you really only need the standardized version:

border-radius: 10px 5px;

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.

CSS Selector
CSS selectors are used to select the content you want to style. Selectors
are the part of CSS rule set. CSS selectors select HTML elements according
to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
6. Child selector
 7. Descendant selector
8. Attribute selector

1) CSS Element Selector

The element selector selects the HTML element by name.

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

Output:

This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a
specific element. An id is always unique within the page so it is chosen to
select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Take an example with the id "para1".

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello World</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

Output:

Hello World

This paragraph will not be affected.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It
is used with a period character . (full stop symbol) followed by the class
name.

Note: A class name should not be started with a number.

example with a class "center":

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

Output:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be
affected then you should use the element name with class selector.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
 color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

Output:

This heading is not affected

This paragraph is blue and center-aligned.

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the
elements on the pages.

<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
 </body>
</html>

Output:

This is heading

This style will be applied on every paragraph.

Me too!

And me!

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style
definitions.

Grouping selector is used to minimize the code. Commas are used to

separate each selector in grouping.

Let's see the CSS code without group selector.

h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p{
text-align: center;
color: blue;
}
As you can see, you need to define CSS properties for all the elements. It
can be grouped in following ways:

h1,h2,p {
text-align: center;
color: blue;
}

Let's see the full example of CSS group selector.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World(In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>

CSS Child Selector

Use the child selector, if you want to select all elements immediate
children of a specified element.
div > p

Example
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>Para 1 in the div.</p>
<!-- This is not a Child -->
<span><p>Para 2 in the div.</p></span>
</div>
<p>Para 3 outside the div.</p>
</body>
</html>

Output

Descendant Selector
The descendant selector in CSS is used to match all elements that are
descendants of a specified element.

Example
<!DOCTYPE html>
<html>
<head>
<style>
 div p {
background-color: orange;
}
</style>
</head>
<body>
<div>
<p>Para 1 in the div</p>
<p>Para 2 in the div</p>
</div>
<p>Para 3 outside the div.</p>
</body>
</html>

Output

Attribute Selectors
Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes or

attribute values.

CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified

attribute.
The following example selects all <a> elements with a target attribute:

Example
a[target] {
background-color: yellow;
}

Program:
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>

<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

Output:
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified
attribute and value.

The following example selects all <a> elements with a target="_blank"

attribute:

Example
a[target="_blank"] {
background-color: yellow;
}

CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an
attribute value containing a specified word.

The following example selects all elements with a title attribute that
contains a space-separated list of words, one of which is "flower":

Example
[title~="flower"] {
border: 5px solid yellow;
}
CSS [attribute|="value"] Selector
The [attribute|="value"] selector is used to select elements with the
specified attribute, whose value can be exactly the specified value, or the
specified value followed by a hyphen (-).

Note: The value has to be a whole word, either alone, like class="top", or
followed by a hyphen( - ), like class="top-text".

Example
[class|="top"] {
background: yellow;
}

CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements with the
specified attribute, whose value starts with the specified value.

The following example selects all elements with a class attribute value that
starts with "top":

Note: The value does not have to be a whole word!

Example
[class^="top"] {
background: yellow;
}

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute
value ends with a specified value.

The following example selects all elements with a class attribute value that
ends with "test":

Note: The value does not have to be a whole word!

Example
[class$="test"] {
background: yellow;
}

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute
value contains a specified value.

The following example selects all elements with a class attribute value that
contains "te":

Note: The value does not have to be a whole word!

Example
[class*="te"] {
background: yellow;
}

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

CSS3 – Colors
CSS3 has Supported additional color properties as follows −

• RGBA colors
• HSL colors
• HSLA colors
• Opacity
RGBA stands for Red Green Blue Alpha.It is an extension of CSS2,Alpha specifies
the opacity of a color and parameter number is a numerical between 0.0 to 1.0. A
Sample syntax of RGBA as shown below −
#d1 {background-color: rgba(255, 0, 0, 0.5);}
#d2 {background-color: rgba(0, 255, 0, 0.5);}
#d3 {background-color: rgba(0, 0, 255, 0.5);}
HSL stands for hue, saturation, lightness.Here Huge is a degree on the color wheel,
saturation and lightness are percentage values between 0 to 100%. A Sample syntax
of HSL as shown below −
#g1 {background-color: hsl(120, 100%, 50%);}
#g2 {background-color: hsl(120, 100%, 75%);}
#g3 {background-color: hsl(120, 100%, 25%);}
HSLA stands for hue, saturation, lightness and alpha. Alpha value specifies the
opacity as shown RGBA. A Sample syntax of HSLA as shown below −
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
#g2 {background-color: hsla(120, 100%, 75%, 0.3);}
#g3 {background-color: hsla(120, 100%, 25%, 0.3);}
opacity is a thinner paints need black added to increase opacity. A sample syntax of
opacity is as shown below −
#g1 {background-color:rgb(255,0,0);opacity:0.6;}
#g2 {background-color:rgb(0,255,0);opacity:0.6;}
#g3 {background-color:rgb(0,0,255);opacity:0.6;}
The following example shows rgba color property.

<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>

<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "p2">Green</p>
<p id = "p3">Blue</p>
</body>
</html>

It will produce the following result –

The following example shows HSL color property.

<html>
<head>
<style>
#g1 {background-color:hsl(120, 100%, 50%);}
#g2 {background-color:hsl(120,100%,75%);}
#g3 {background-color:hsl(120,100%,25%);}
</style>
</head>

<body>
<p>HSL colors:</p>
<p id = "g1">Green</p>
<p id = "g2">Normal Green</p>
<p id = "g3">Dark Green</p>
</body>
</html>

The following example shows HSLA color property.

<html>
<head>
<style>
 #d1 {background-color:hsla(120,100%,50%,0.3);}
#d2 {background-color:hsla(120,100%,75%,0.3);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
</style>
</head>

<body>
<p>HSLA colors:</p>
<p id = "d1">Less opacity green</p>
<p id = "d2">Green</p>
<p id = "d3">Green</p>
</body>
</html>

It will produce the following result –

The following example shows Opacity property.

<html>
<head>
<style>
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
#m2 {background-color:rgb(0,255,0);opacity:0.6;}
#m3 {background-color:rgb(0,0,255);opacity:0.6;}
</style>
</head>

<body>
<p>HSLA colors:</p>
<p id = "m1">Red</p>
<p id = "m2">Green</p>
<p id = "m3">Blue</p>
</body>
</html>

It will produce the following result –

CSS Background
CSS background property is used to define the background effects on element. There are 5
CSS background properties that affects the HTML elements:

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

1) CSS background-color
The background-color property is used to specify the background color of the element.

You can set the background color like this:

<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
 <h2>My first CSS page.</h2>
<p> This is an example of CSS background-color.</p>
</body>
</html>

Output:

My first CSS page.

This is an example of CSS background-color.

2) CSS background-image
The background-image property is used to set an image as a background of an element. By
default the image covers the entire element. You can set the background image for a page like
this.

Ex:<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("smiley.jpg");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

o/p:
3) CSS background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

Ex:<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
o/p:
background-repeat: repeat-y;

Ex:<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
o/p:
4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or
scroll with the rest of the page in browser window. If you set fixed the background image then
the image will not move during scrolling in the browser. Let?s take an example with fixed
background image.

1. background: white url('bbb.gif');

2. background-repeat: no-repeat;
3. background-attachment: fixed;

5) CSS background-position
The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center

2. top

3. bottom

4. left

5. right

1. background: white url('good-morning.jpg');

2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;

CSS - Cursors
The cursor property of CSS allows you to specify the type of cursor that should be displayed
to the user.

One good usage of this property is in using images for submit buttons on forms. By default,
when a cursor hovers over a link, the cursor changes from a pointer to a hand. However, it
does not change form for a submit button on a form. Therefore, whenever someone hovers
over an image that is a submit button, it provides a visual clue that the image is clickable.

The following table shows the possible values for the cursor property −

Sr.No. Value & Description

 1
Auto

Shape of the cursor depends on the context area it is over. For example an I over text, a hand
over a link, and so on...

2
crosshair

A crosshair or plus sign

3
default

An arrow

4
pointer

A pointing hand (in IE 4 this value is hand)

5
move

The I bar

6
e-resize

The cursor indicates that an edge of a box is to be moved right (east)

7
ne-resize

The cursor indicates that an edge of a box is to be moved up and right (north/east)

8
nw-resize

The cursor indicates that an edge of a box is to be moved up and left (north/west)

<html>
<head>
</head>

<body>
<p>Move the mouse over the words to see the cursor change:</p>

<div style = "cursor:auto">Auto</div>

<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>

<div style = "cursor:pointer">Pointer</div>

<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
 <div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>

</body>
</html>

It will produce the following result –

CSS - Text
This chapter teaches you how to manipulate text using CSS properties. You can set 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.
• 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.

<html>
<head>
</head>
 <body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>

It will produce the following result –

Set the Text Direction

The following example demonstrates how to set the direction of a text. Possible values
are ltr or rtl.

<html>
<head>
</head>

<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>

It will produce the following result –

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

<html>
<head>
</head>

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

It will produce the following result –

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.

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

This will produce following result –

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.

<html>
<head>
</head>

<body>
<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>
</body>
</html>

It will produce the following result –

Set the Text Alignment
The following example demonstrates how to align a text. Possible values are left, right,
center, justify.

<html>
<head>
</head>

<body>
<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>
</body>
</html>

This will produce following result –

Decorating the Text
The following example demonstrates how to decorate a text. Possible values are none,
underline, overline, line-through, blink.

<html>
<head>
</head>

<body>
<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>
</body>
</html>

This will produce following result –

Set the Text Cases

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

<html>
<head>
</head>

<body>
 <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>
</body>
</html>

This will produce following result –

CSS - Lists
Lists are very helpful in conveying a set of either numbered or bullet 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.

The list-style-type Property

The list-style-type property allows you to control the shape or style of bullet point (also
known as a marker) in the 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 −
 Sr.No. Value & Description

1
none

NA

2
disc (default)

A filled-in circle

3
circle

An empty circle

4
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,5

decimal-leading-zero 0 before the number 01, 02, 03, 04, 05

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV, V

lower-greek The marker is lower-greek alpha, beta, gamma

lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D, E

Here is an example −

<html>
<head>
</head>

<body>
<ul style = "list-style-type:circle;">
 <li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style = "list-style-type:square;">

<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style-type:decimal;">

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

<ol style = "list-style-type:lower-alpha;">

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

<ol style = "list-style-type:lower-roman;">

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

It will produce the following result –

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 the two values −

Sr.No. Value & Description

1
None

NA

2
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.

3
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).

Here is an example −

<html>
<head>
</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>
It will produce the following result –

The list-style-image Property

The list-style-image allows you to specify an image so that you can use your own bullet
style. The syntax is similar to the background-image property with the letters url starting the
value of the property followed by the URL in brackets. If it does not find the given image then
default bullets are used.

Here is an example −

<html>
<head>
</head>

<body>
<ul>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result –

The list-style Property
The list-style allows you to specify all the list properties into a single expression. These
properties can appear in any order.

Here is an example −

<html>
<head>
</head>

<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style: outside upper-alpha;">

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

It will produce the following result –

CSS - Fonts
You can set 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.

<html>
<head>
</head>

<body>
<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>
</body>
</html>

This will produce following result −

Set the Font Style

Following is the example, which demonstrates how to set the font style of an element.
Possible values are normal, italic and oblique.

<html>
<head>
 </head>

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

This will produce following result −

Set the Font Variant

The following example demonstrates how to set the font variant of an element. Possible
values are normal and small-caps.

<html>
<head>
</head>

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

This will produce following result −

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.

<html>
<head>
</head>

<body>
<p style = "font-weight:bold;">
This font is bold.
</p>

<p style = "font-weight:bolder;">

This font is bolder.
</p>

<p style = "font-weight:500;">

This font is 500 weight.
</p>
</body>
</html>

This will produce following result −

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 %.

<html>
<head>
</head>

<body>
<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>
</body>
</html>

This will produce following result −

Shorthand Property
You can use the font property to set all the font properties at once. For example −

<html>
<head>
</head>

<body>
<p style = "font:italic small-caps bold 15px georgia;">
Applying all the properties on the text at once.
</p>
</body>
</html>

This will produce following result −

CSS - Links
You can set following properties of a hyper link −

We will revisit the same properties when we will discuss Pseudo-Classes of CSS.

• 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>
Now, we will see how to use these properties to give different effects to hyperlinks.

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.

<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
 <body>
<a href = "">Link</a>
</body>
</html>

It will produce the following black link −

Set the Color of Visited Links

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

<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>

<body>
<a href = ""> link</a>
</body>
</html>

It will produce the following link. Once you will click this link, it will change its color to green.
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.

<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>

<body>
<a href = "">Link</a>
</body>
</html>

It will produce the following link. Now, you bring your mouse over this link and you will see
that it changes its color to yellow.

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.

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

<body>
<a href = "">Link</a>
</body>
</html>

It will produce the following link. It will change its color to pink when the user clicks it.