Presented By: K.

Dhanamjay
Assistant Professor
Department of CSE

Cascading Style Sheets(CSS) is used to define and

control the presentation of your Webpages.

CSS describes the way HTML elements are

presented to the user, its color, border, dimensions
etc.
 CSS3 has been split into "modules". It contains the
"old CSS specification" (which has been split into
smaller pieces). In addition, new modules are added.
Some of the most important CSS3 modules are:
• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface
Most of the new CSS3 properties are implemented in
modern browsers.
 Features of CSS3
The features of the CSS3 are as follows:
1. Selectors:
– Selectors allow the designer to select on more precise levels of the web page. They are
structural pseudo-classes that perform partial matches to help match attribute and
attribute values.
2. Text Effects and Layout:
– With CSS3, we can change the justification of text, whitespace adjustment of the
document, and style the hyphenation of words.
3. First-Letter and First-Line Pseudo-Classes:
– adjusting the spacing between characters to achieve a visually pleasing effect and large
decorative capital letter at the starting of a paragraph.
4. Paged Media and Generated Content:
– CSS 3 has additional choices in Paged Media, such as page numbers and running headers
and footers.
5. Multi-Column Layout:
– This feature includes properties to allow designers to present their content in
multiple columns with options like the column-count, column-gap, and column-
width.
 Using CSS3 Borders

• The CSS3 provides two new properties for styling the borders of an element in a
more elegant way — the border-image property for adding the images to borders,
and the border-radius property for making the rounded corners without using any
images.
Adding color as a border

Adding image as a border

 CSS3 Background
CSS3 provides several new properties to manipulate the background of an element
like background clipping, multiple backgrounds, and the option to adjust the
.
background size The background-size property can be used to specify the size of
the background images.
Multiple images
 CSS3 Gradients
• The CSS3 gradient feature provides a flexible solution to
generate smooth transitions between two or more colors.
– Gradients are available in two styles: linear and radial.
Top to Bottom linear-gradient(direction, color-stop1, color-stop2, ...)

Left to Right
Radial Gradients
 CSS3 Drop Shadows
• The CSS3 gives you ability to add drop shadow effects to the elements like you do
in Photoshop without using any images.
– box-shadow Property

The components of the box-shadow property

offset-x
offset-y
Blur-radius
color