Unit-II

Unit - 2

Syntax of CSS

Syntax can be defined as a rule that defines the structure or the order of the statements used in
a programming language. Css syntax divided in to two different parts – selector and declaration.
Sector defines an HTML element to which the CSS style is applied and the declaration contains
the CSS properties as well as the value of these properties.

Syntax:

Selector

1st property : value;

2nd property : value;

3rd property : value;

Nth property : value;

The preceding syntax consists of a selector and CSS properties with their values. The selector is
the name of the element to which you want to apply the CSS properties.

Ex:

ol

List-style:lower-roman;
Margin:1.5em 0 1em 5%;
Padding:0;
Background:#fff;

Page No. : 1
 Unit-II

Float:left;
}

In the preceding code ol are the selectors of a CSS file. Each property is assigned a specific
value. For example the background property has #fff as value.

-------------*-------------

Types of CSS Selectors:

A selector is a pattern that is used to select an element to apply the CSS style rules. The
CSS rule is divided in to two parts: selectors and declaration. The declaration is a part that
appears within the braces of the CSS rule followed by the selector. The rules defined in the
declaration part are applied to the elements specified by the selector. The different types of
selectors are as follows:

1. The universal selector

2. The type selector
3. The class selector
4. The id selector
5. The child selector
6. The descendant selector
7. The adjacent sibling selector
8. The attribute selector
9. The query selector

[Link] Universal Selector

The universal selector selects all the elements that are present in an HTML document.
You can use this selector to apply the same rule to all the elements of an HTML document.

Syntax:

*{ }

Ex:

*{

Margin : 0;

Padding : 0;

Page No. : 2
 Unit-II

In the preceding code the margin and padding properties are set to 0 for all the
elements in the HTML document.

[Link] type selector

The type selector matches all the elements specified in a list with the given value to
determine the elements to which the CSS rules are to be applied.

Ex:

H1, h2, h3, p {font-family: sans-serif}

In the preceding code we have specified the font-family property for the different heading
elements (h1,h2 and h3) and for the paragraph element (p).

[Link] Class Selector

The class selector allows you to apply CSS rules to the elements whose value matches
with the class attribute specified in the class selector.

Ex:

<H1 class=”intro”>header 1 </H1>

You can use class selector in two ways.

i. )Applying the CSS rule to all the elements that have the class attribute of the same
value.

.intro { font-family: sans-serif}

In the above code a period is followed by a value. The value is followed by braces, which
embeds the CSS rule within it. The CSS rule is applied to all the elements having the class
attribute with intro as its value.

ii) Applying the CSS rule to the H1 elements whose class attribute contains intro as its
value.

[Link] { font-family: sans-serif}

[Link] ID selector

Page No. : 3
 Unit-II

The value of the id attribute is unique within a document. The selector is applied only to
the content of one element.

Ex:

<H1 id=”myheader”>Hello World</H1>

The following code shows the id selector which is represented by a hash symbol(#) and
followed by the value of the id attribute:

#myHeader{ font-family: sans-serif}

[Link] Child Selector

The child selector matches the element that is an immediate child of another element.
In the child selector, greater than symbol(>) is used as the combinator.

TD>b{ font-family: sans-serif}

A combinatory is a symbol such as >,< and + which allows the relationship between two
elements. In the preceding code the B element is the immediate child of the TD element. The
CSS rule is applied to all the B elements that are immediate children of TD elements.

[Link] Descendant Selector

A descendant element is an element that is nested inside another element.

Ex:

Table b {font-family: sans-serif}

CSS rule is applied to all the elements that are nested within the table element.

7. The Adjacent Sibling Selector

The adjacent sibling selector selects all the elements that are adjacent siblings of a
specified element. Sibling elements must have the same parent element. The word adjacent
means no other element could exist between the adjacent sibling elements.

H2+p {font-family: sans-serif}

<H2>heading</H2>

<p>the selector above matches this paragraph</p>

<p>the selector above does not match this paragraph</p>

Page No. : 4
 Unit-II

In the above code the first paragraph matches the adjacent sibling selector, H2+P
because the P element is an adjacent sibling to the H2 element. The second paragraph does not
match the selector. Although it is a sibling of the H2 element, it is not adjacent to the element.

8. The Attribute Selectors

The CSS attribute selects elements on the basis of some specific attributes. Table shows
the most common attribute selectors.

Name Syntax Match

Hyphen [attribute Matches if the element has an attribute with a value
selector |=value] followed by a hyphen
Existence [attribute] Matches if the element has a specific attribute
selector
Equality [attribute=value] Matches if the element has an attribute with a specific
Selector value
Space selector [attribute~=value] Matches if the attribute has an attribute with space
separated with the value
9. The Query Selector

The querySelector() and querySelectorAll() methods accept CSS selectors as parameters

and return the matching element node in the document tree. The querySelector() method
helps in querying the entire document or a specific element of the document.

-------------*-------------

Inserting CSS in an HTML document

A CSS stylesheet can be linked to an HTML document in a variety ways, where each way
has its own advantages and disadvantages. The following are three ways to apply CSS style to
your HTML document:

• The Internal Style Sheet

• The External Style Sheet
• The inline style

The Internal Style Sheet

The internal style sheet is written within the HEAD element of the HTML document. The
style is applied only to the documents in which it is defined and not referenced by other web
document. The syntax of internal style sheet is written as follows:

<STYLE type=”text/css”>

Page No. : 5
 Unit-II

selector { property: value; }

</STYLE>

The preceding syntax contains the starting and ending tags of the STYLE element. The
STYLE element contains a type attribute with value text/css. The opening and closing tags of the
STYLE element embeds the style declaration. The declaration consists of a selector by curly
braces. The curly braces hold a property followed by a colon, which is further followed by a
value and finally that value is followed by a semicolon.

Ex:

<HEAD>

<STYLE type=”text/css”>

P { font-family: sans-serif; color: #c00; }

H1 { font-family: sans-serif; color: #f00; }

</STYLE>

</HEAD>

Advantages of Internal stylesheet

1. Affects only the page in which they are placed.

2. Allows you to change the style of the same HTML file in which you are working.

Disadvantages

1. Affects only the page to which they are applied. If you want to use same styles in several
documents you need to repeat them for every page.
2. Increases the page load time because the entire CSS file needs to be implemented first
to apply CSS.

The External Style Sheet

In the External Style Sheet, the CSS file is written outside the HTML document and the
references of the CSS file is placed in the HTML document. The style sheet rules are saved into a
text file with the .css extension. Once you have a stylesheet document you can link it with your
web pages in the following two ways.

Page No. : 6
 Unit-II

• Linking – HTML Link element which is used to link a style sheet. This element has
three attributes – rel, type and href. The rel attribute specifies what you are
linking. The type specifies the MIME type for the browser and the href attribute
specifies the path of the .css file as shown below.

<LINK rel=”style sheet” type=”text/css” href=”[Link]”/>

• Importing – helps you in accessing the style rules from other CSS style sheets.
The @import keyword is used followed by the uniform resource identifier(URI)
of the style sheet to which you want to import the style rules.
<STYLE TYPE=”text/css”>
@import url(“[Link]”)
H1 {color:blue}
</STYLE>
In addition to the @import rule the @media rule of CSS helps you in applying the
styles to the media device depending on the type of the device a page is
displaying.
<STYLE TYPE=”text/css”>
@media screen
{
body { font-size: 13px }
}
</STYLE>

Advantages of external style sheets

1. Allows you to control the look and feel of several documents in one go and do not need
to define a specific style for every element.
2. Allows you to easily group your styles in a more efficient way.

Disadvantages

1. Increases the downloaded time as the entire CSS file has to be downloaded to apply the
style to the HTML document.
2. Displays the web page only after the entire style sheet is loaded.

The Inline style

The inline style properties are written in a single line separated by semicolons. These
properties are placed inside the style attribute of the HTML element

<P style =”background:#ccc; color:#fff; border: solid black 1px;”>

Page No. : 7
 Unit-II

In the preceding code p element is styled.

Advantages of Inline Style

1. Provides highest precedence over internal and external style sheets. Therefore if you
want some styles to be compulsorily applied use the inline style.
2. Provides an easy and quick approach to add a style sheet in a web page.

Disadvantages

1. Makes a document difficult to maintain and increases the download time.

2. Does not allow to style pseudo-elements which are used to add special effects to the
selectors.
-------------*-------------

Backgrounds in CSS

Background of a web page is the area on which the content of the web page such as
text, tables, border and images is displayed. CSS provides you various properties to set the
background of a webpage. These properties are as follows:

• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position
• Background-clip
• Background-origin
• Background-size
• Background-quantity
• Background-spacing
• Background

The background-color property

The background-color property is used to set the color of the background area on which
an element is displayed. The background-color property takes any of the following three values:

• Color name
• Hexadecimal equivalence of the color
• RGB color value

Page No. : 8
 Unit-II

Ex:

H1 { background-color: #FFFFFF;}

Apart from the three values the background-color property can also take two more
values. They are transparent and inherit.

The background-image property

The background-image property is used to set an image in the background of an

element. With background-image property you can virtually set background image for all
elements. The background-image property is specified using two values either url, to specify the
image or none, when no image is used.

Ex:

Body { background-image: url(“[Link]”);}

P { background-image: none; }

The background-repeat property

The background-repeat property allows you to tile the background images along x-axis
and y-axis of an element. This property is used along with the background-image property only.
The background-repeat property can take either of the following values:

• Repeat-x – tiles an image horizontally

• Repeat-y – tiles an image vertically
• Repeat – tiles an image both horizontally and vertically
• No-repeat – does not tile an image

Ex:

<BODY style=”background: url (‘pic_2.gif’); background-repeat: repeat-y :”>

The background-attachment property

The background-attachment property is used to fix or scroll the background image along
with the text and other content displayed on it.

This property takes either of the two values: fixed or scroll. If the value is set to fixed,
the background image does not move with the text when the webpage is scrolled. If the value is
set to scroll, the background image scrolls along with the text written over it.

Page No. : 9
 Unit-II

Ex:

Body {background-image:url(‘[Link]’); background-attachment: scroll;}

The background-position property

The background-position property sets the position of a background image on a web

page. This property is used along with the background-image property. You can set position by
any of the following tasks:

• Representing position in pixels, as shown in the following

Body {background-image: url(‘[Link]’); background-position: 200px 200px;}
• Representing position in percentage as shown in following
Body {background-image: url(‘[Link]’); background-position: 50% 50%;}
• Representing position by words such as left, right and center for x-axis and top,down
and center for y-axis as shown in the following
Body {background-image: url(‘[Link]’); background-position: left bottom;}

The background-clip property

The background-clip property is to determine whether the background image extends in

to the border or not. It takes either the border-box or padding-box value. When you use the
border-box value, the background image extends to the border. This is the default value of the
background-clip property.

<p style=”background-color: orange;border: 2em blue;border-style: dotted double;-webkit-

background-clip: border-box;”>

In case of the value padding-box, the background image does not stretch to the border.

<p style=”background-color: orange;border: 2em blue;border-style: dotted double;-webkit-

background-clip: padding-box;”>

The background-origin property

The background-origin property is used to determine the starting position of the

background image in a box like shape. There are three value that can be specified with the
background-origin property.

• Padding-box: specifies the position of the background image in relation to the outer
edge of the padding or inner edge of the border. This is the default value of the
background-origin property.

Page No. : 10
 Unit-II

• Border-box: specifies the position of the background image in relation to the outer edge
of the border.
• Content-box: specifies the position of the background image in relation to the outer
edge of the content or inner edge of the padding.

The background-size property

The background size property is used to specify the size of the image that is used as a
background for an element. You can specify the size by using any of the following values:

• The auto keyword – sets the image to its original size.

Background-size: auto;
• The length parameter – sets an image of specified size in terms of height and width.
Background-size: 15px;
• The percentage parameter – sets the size of an image with respect to the specified
height and width of the area in which the image has to be displayed.
Background-size: 50%

The background-quantity property

The background-quantity property is used to specify the number of times to repeat an

image. It takes the following values:

• The infinite keyword – repeats an image infinitely.

Background-quantity: infinite;
• The integer parameter – repeats an image the specified number of times.
Background-quantity: 5;

The background-spacing property

The background-spacing property is used to specify the distance between the images
that are repeated in the background of an element. It takes the value to specify the horizontal
and vertical space, related to the coordinates specified by the background-position property.

<body style=”background-image: url(‘[Link]’);background-repeat: repeat-x;backfround-

spacing: 20px 50px;”>

If you specify the single value this value gives the horizontal and vertical spacing both. If
you give two values the first value gives the horizontal spacing and the second gives the vertical
spacing.

Page No. : 11
 Unit-II

The background property

The background property is the shortcut of specifying several background properties at

the same place in a style sheet. It can be used to specify the values for the background-color,
background-image, background-repeat, background-attachment, background-position and
background-size properties.

Ex:

- Body {background: green}

Colors is specified for background

- P {background: url(“[Link]”) blue 50% repeat fixed}

All properties are specified individually, which includes an image, color, image size,
image repetition and its attachment.

- E {background: orange url(“[Link]”)

Specifies that both a background color and a background image are set.

-------------*-------------

Font properties in CSS

In HTML you can change the size, style and family of fonts using various CSS properties.
Various types of functions in font are given below:

• Font-family
• Font-size
• Font-size-adjust
• Font-stretch
• Font-style
• Font-variant
• Font-weight
• Font

The font-family Property

The font-family property is used to specify the name of a font family to apply the
specified font style on the text.

Ex:

Page No. : 12
 Unit-II

Body{

Font-family: sans-serif;

H1

Font-family: sans-serif, monospace;

In the preceding code we have the font-family property of the BODY element as sans-serif.

The font-size property

The font-size property is used to change the size of the text.

P{

Font-size: 10px;

The font size can be specified in the following three different ways:

• Using absolute values

• Using relative values
• Using a percentage value

The absolute values

Absolute value refers to the absolute size of the font. Absolute sizes are predefined fized
sizes that cannot be changed by a user. The following font sizes are under the absolute
values:

• Xx-small
• X-small
• Small
• Medium
• Large
• X-large
• Xx-large
Page No. : 13
 Unit-II

The xx-small is the smallest text size, xx-large is the largest text size.

Ex:

P{

Font-size:x-small;

The relative values

Relative values refer to the values that are not fixed value and are calculated on
the basis of the current font values.

Ex:

P{

Font-size:larger;

The percentage value

You can also increase or decrease the font size of the text by specifying a
percentage value in the font-size property.

Ex:

P{

Font-size:20%;

The font-size-adjust property

The font-size-adjust property is used to change the aspect value of the text on a web
page. The aspect value is the ratio between the font height of a lowercase letter and the actual
height of the font.

Ex:

P{

Font-size-adjust:0.5;
Page No. : 14
 Unit-II

The font-stretch property

The font-stretch property is used to change the width of a font. You can expand the
width by using the following values:

• Ultra-condensed
• Extra-condensed
• Condensed
• Semi-condensed
• Normal
• Semi-expanded
• Expanded
• Extra-expanded
• Ultra-expanded

Ex:

P{

Font-stretch:condensed;

The font-style property

The font-style property is used to specify the style of the font. The possible values of the
font-style property are normal, italic and oblique.

Ex:

P{

Font-style:italic;

The font-variant property

The font-variant property is used to display a font as normal or in small caps.

Ex:

P{
Page No. : 15
 Unit-II

Font-variant:small-caps;

The font-weight property

The font-weight property is used to specify the weight of the font, such as the font
boldness or thickness.

Ex:

P{

Font-weight:bold;

The font property

Instead of defining all the properties such as font-style, font-weight and font-style
separately, you can specify the values of all these property in the font property.

Ex:

P{

Font:bold italic 30px verdana;

-------------*-------------

Properties of Text in CSS

In CSS you can change the color and direction of the text. You can change the indentation of the
text. You can also underline, overline or strikeout the text as per the requirement.

CSS text properties

Properties Description
Color Specifies the color of the text in a web page
Direction Specifies the direction of the text.
Ltr – changes the flow of the text from left to right
Rtl – changes the flow of the text from right to left
Letter-spacing Specifies the height of a line
Line break Defines a set of line breaking rules to be used with text

Page No. : 16
 Unit-II

Line-height Specifies the height of the line

Text align Sets the horizontal align of the text
Center – changes the text in the middle
Justify – fits the text in the containing element
Left – aligns the text in the left side of the element
Right – aligns the text in the right side of the element
Text- Underline – underlines the text
decoration Overline – draws the line over the text
Linethrough – strikes out the text
Blink – makes the text to blink
None – does not alter the original text
Text-shadow Specifies the shadow effects to be applied on the text
Text-transform Capitalize – transforms the first letter of each word in the text into uppercase
letter
Lowercase – transforms the text into lowercase
Uppercase – transforms the text into uppercase
None – does not make any changes in the original text
Text-wrap Specifies the wrapping of the text In an element

-------------*-------------

Creating Boxes using CSS

The following are the areas of the box as shown in figure.

• Content area – displays the content of a document such as text and images. This is
bounded by a rectangle is called as the content edge. The content area appears inside
the padding area.
• Padding area – specifies the area around the content area. This is bounded by the
padding edge.
• Border area – specifies the area around the padding area. This is bounded by the border
edge.
• Margin area – specifies the area around the border area. This is bounded by the margin
edge.

Exploring Box dimensions

All HTML elements in a box model are represented as rectangular boxes. The
dimensions of the box model are calculated by using the height and width of the content area.
Each box is associated with a content area and many optional areas, such as padding, border
and margin.

Page No. : 17
 Unit-II

Each box model has the following four edges:

The content edge – surrounds a rectangle specified by the width and height of the box.
This is called as inner edge. The four content edges represent the content area of the box.

The padding edge – surrounds the padding box. If the padding has 0 width the padding
edge becomes the content edge. The four padding edges represent the padding area of the
box.

The border edge – surrounds the border of the box. If the border has 0 width the border
edge becomes a padding edge. The four border edges represent the border area of the box.

The margin edge – surrounds the margin of the box. If the border has 0 width the
margin edge becomes a border edge. The four border edges represent the margin area of the
box.

-------------*-------------

Exploring Padding Properties

Padding in the box model specifies the distance between the border of an element and
the content within it. The padding is affected by the background color of an element. The value
of padding cannot be negative. The shorthand property in padding is used to change all the
padding properties such as padding-top, padding-bottom, padding-right and padding-left at
once.

Syntax:

Page No. : 18
 Unit-II

Padding: value;

Padding can be set along with the values:

• Length – specifies fixed padding in the pt and em units

• Percentage – specifies padding in percentage
• Auto – specifies default padding from the top, bottom, left or right direction.

Ex:

#container{

Padding-top:7px;

Padding-left:25%;

Padding-right:auto;

Padding-bottom:45px;

Border:2px solid 000000;

-------------*-------------

Creating Border using CSS

The border specifies a space between the padding and content in the box model. The
border properties in CSS define the width, color and style of border area of the box. The syntax
to set the border is as follows:

Border 1px double value;

The following are the properties of the border

• Border-width
• Border-color
• Border-style
• Border-shorthand
• Border-radius
• Border-image
• Box-shadow

The border-width property

Page No. : 19
 Unit-II

The border width property specifies the width of the border area. The width is specified
in pixels.

Syntax:

Border-width: value;

The border can either have the following values

• Thin – defines a thin border

• Medium – defines a medium border
• Thick – define a thick border
• Length – defines the thickness of the border
• Inherit – defines the width is inherited from the parent element

➢ The border-top-width property – sets the width of the top border of an element.
Negative values are not allowed in this property.
Syntax:
Border-top-width: value;
➢ The border-right-width property – sets the width of the right border of an element.
Negative values are not allowed in this property.
Syntax:
Border-right-width: value;
➢ The border-bottom-width property – sets the width of the bottom border of an
element.
Syntax:
Border-bottom-width: value;
➢ The border-left-width property – sets the width of the left border of an element.
Syntax:
Border-left-width: value;

The border-color property

The border color property specifies the color of the border. Border colors are defined
using one of the following values:

Name – defines the name of the color, such as red and blue

Red green Blue (RGB) – defines a RGB value such as (100,0,0)

Hex – Specifies the hex value, such as #00ff00

Page No. : 20
 Unit-II

Syntax:

Border-color: value;

The following are the possible values of border-color property

Inherit – specifies the border color property is inherited from the parent element

Transparent – defines the border color should be transparent

Color – sets the border color to the specified color value

➢ The border-top-color – sets the color of the top border of an element.

Syntax:

Border-top-color : value;

➢ The border-right-color – sets the color of the top border of an element

Syntax:

Border-right-color : value;

➢ The border-bottom-color – sets the color of the bottom border of an element

Syntax:

Border-bottom-color : value;

➢ The border-left-color – sets the color of the left border of an element

Syntax:

Border-left-color : value;

➢ The border-color shorthand property – refers to the shorthand form of border-top,

border-right, border-bottom and border-left properties. If a single value is provided
it is applied to all sides of the box. If two values are provided the first value is applied
to top and bottom borders and the second value is applied to right and left borders.
If three values are specified the first value is applied to top, the second value is
applied to right and left borders and the third value is applied to the bottom
borders. If four values are provided the first value is applied to the top, the second
value is applied to the right, the third value is applied to the bottom and the fourth
value is applied to the left of the box.

Page No. : 21
 Unit-II

The border-style property

The border style property indicates the format of the border such as solid, dashed or
double.

Syntax:

Border-style: value;

The border style property can be used with four directions, top, bottom, left and right which
are given as follows:

➢ The border-top style – sets the style of the top border of an element
➢ The border-right style – sets the style of the right border of an element
➢ The border-bottom style – sets the style of the bottom border of an element
➢ The border-left style – sets the style of the left border of an element
➢ The border-style shorthand – sets the same width,style and color on all borders of
an element.

The border-radius property

The border-radius property is used to give round corners to a box like shape.

➢ Border-top-left-radius – specifies a round corner in the top left direction of a border

➢ Border-top-right-radius – specifies a round corner in the top right direction of a border
➢ Border-bottom-left-radius – specifies a round corner in the bottom left direction of a
border
➢ Border-bottom-right-radius – specifies a round corner in the bottom right direction of a
border.

The border-image property

The border-image property enables you to insert images in border edges and border
corners.

➢ Border-image-source – specifies an image instead of using a border style.

Syntax:
Border-image-source: none | <image>;
➢ Border-image-slice – specifies inward offsets from the top,right,bottom and left
edges.
Syntax:

Page No. : 22
 Unit-II

Border-image-slice: [<number> | <percentage> {1,4} && fill?;

➢ Border-image-width – specifies the width of the image used for the border.
Syntax:
Border-image-width: [<length> | <percentage> | <number> | auto ] {1,4};
➢ Border-image-repeat: specifies the images for the sides and the middle part of the
border image are scaled and tiled.
Syntax:
Border-image-repeat: [stretch|repeat|round]{1,2};

-------------*-------------

Margin Properties in CSS

The blank area around the border of an element is called margin. It is used to create a
extra space around an element. The margin property is used to set all the sides of an element
such as top,right,bottom and left.

Syntax:

Margin: value;

The following are the possible values of the margin property:

➢ Auto – defines margin

➢ Length – defines a fixed margin in px,pt and cm.
➢ % - defines margin in percentage.
➢ Inherit – defines margin should be inherited from the parent element.

A box has four sides.

Margin-top

Margin-bottom

Margin-right

Margin-left

Page No. : 23
 Unit-II

Ex:

#container

Margin-top: 7px;

Margin-left:25%;

Margin-right:auto;

Margin-bottom:45px;

-------------*-------------

Floating boxes:

A floating box is a box that can display the content of an element in left or right
direction with respect to the content of another element.

Syntax:

Float: left | right | none | <page-floats>

Ex:

IMG { float; left; }

-------------*-------------

Positioning an Element in CSS

CSS provides a property position which controls the position of elements with respect to
the normal flow of the content on a web page.

Syntax:

Position: [value];

The position property takes the following values:

Page No. : 24
 Unit-II

• Relative – specifies relative position of an element with respect to the normal flow of
the content
• Absolute – specifies the position of a block element with respect to the normal flow of
the content
• Fixed – fixes the position of an element with respect to the normal flow of the content
• Static – specifies the normal position of an element
• Inherit – specifies that an element uses the same settings of position as of its parent
element.

Ex:

P{

Position:fixed;

CSS also provide some properties

Top-offsets an element in the top direction of a web page

Bottom – offsets an element in the bottom direction of a web page

left – offsets an element in the left direction of a web page

right – offsets an element in the right direction of a web page

Ex:

P{

Position:fixed;

Top:10px;

Right:5px;

-------------*-------------

Page No. : 25
 Unit-II

Note : Next topic features of CSS3 is not for internal exam-II. It

is for external examination

Features of CSS 3
Eventually, CSS 3 -- along with HTML5 -- are going to be the future of the web. You should
begin making your Web pages compatible with these latest specifications. In this article, I
explore 10 of the exciting new features in CSS 3, which is going to change the way developers
who used CSS2 build websites.

1. CSS 3 Selectors
In addition to the selectors that were available in CSS2, CSS 3 introduces some new selectors.
Using these selectors you can choose DOM elements based on their attributes. So you don't need
to specify classes and IDs for every element. Instead, you can utilize the attribute field to style
them.

The most useful attributes for selectors are:

CSS

1<div class="code"><style>
2 p[title^="car"] {color: red;}
3 img[src*="birth"] {border:3px solid green;}
4</style></div>

HTML

1<div class="code"><img src="happy_birthdays.jpg" />

2<p title="container">I am displaying a container. And this attribute won't match me. </p>
3<p title="carousel">This carousel will match</p></div>

Output

Apparently, the new CSS 3 selectors make styling different elements on a webpage pretty easy.

2. CSS 3 Rounded Corners

Page No. : 26
 Unit-II

Rounded corner elements can spruce up a website, but creating a rounded corner requires a
designer to write a lot of code. Adjusting the height, width and positioning of these elements is a
never-ending chore because any change in content can break them.

CSS 3 addresses this problem by introducing the border-radius property, which gives you the
same rounded-corner effect and you don't have to write all the code. Here are examples for
displaying rounded corners in different places of a website.

CSS

<div class="code"> .box{ border: 2px solid orange; border-

1
radius : 25px; width: 100px; padding: 10px; text-align:center; }</div>

HTML

1<div class="code"><div class="box">Submit</div></div>

Output

With the introduction of rounded corners, CSS 3 eliminates the need for including external
images or using any sort of JavaScript code to position the images. All you need is the border-
radius property.

3. CSS 3 Border Image

Another exciting feature in CSS 3 is the ability to swap out a border with an image. The property
border-image allows you to specify an image to display instead of a plain solid-colored border.

CSS

<div class="code">#col{border-
1
image:url(border_image.png) 100 100 100 100 round round; border-width: 10px;}</div>

HTML

1<div class="code"><div id="col">my content</div></div>

4. CSS 3 Box Shadow

Page No. : 27
 Unit-II

A box shadow allows you to create a drop shadow for an element. Usually this effect is achieved
using a repeated image around the element. However, with the property box-shadow this can be
achieved by writing a single line of CSS code.

After previously removing this property from the CSS 3 Backgrounds and Borders Module, the
W3C added it back in the last working draft.

CSS

<div class="code">.shadow{ background-color: #EEEEEE; box-

1
shadow:3px 3px 3px 2px #797979; height: 50px; width: 100px; padding: 5px;}</div>

HTML

1<div class="code"><div class="shadow"> my content </div></div>

Output

5. CSS 3 Text Shadow

The new text-shadow property allows you to add drop shadows to the text on a webpage. Prior
to CSS 3, this would be done by either using an image or duplicating a text element and then
positioning it. A similar property called box-shadow is also available in CSS 3.

CSS

1<div class="code">p{ text-shadow: #aaa 2px 2px 2px; }</div>

HTML

1<div class="code"><p>My text is more beautiful, than a normal webfont</p></div>

Output

Page No. : 28
Unit-II

Page No. : 29