Overview and features of CSS3
•CSS3 or Cascading Style Sheets Level 3 is an
improved and refined version of CSS with certain
advanced features like media queries, transitions, 3D
transformations, shadows, gradients, border images,
and many more to make your website visually more
appealing.
•CSS3 helps create more complex designs that help
define the appearance of web pages.
•CSS3 is supported by almost all modern web
browsers like google chrome, firefox, safari, Opera,
etc.
New Features
1. New Selectors
2. Rounded Corners
3. Gradients
4. Shadow Effect
5. 2D and 3D Transforms
6. CSS Transitions
7. Multi-Column Layout
8. @fontface rules
9. Animation
10. Opacity
New Selectors
• Attribute Selectors: These selectors help you to
target elements based on attributes like class or
id.
Attribute^=“value” Select elements with specified attribute
whose value start with the specified
value.example [class^=“top”]{
Background-color:yellow;
}
Attribute*=“value” Select elements whose attribute value
contains the specified value. Example:
[class*=“te”]{Background-color:yellow;
}
Adjacent Sibling Selectors : The adjacent Sibling Selectors allow you
to target a component that is the
immediate successor of another element.
To target the first paragraph after a
heading, we can use the “h1+p” selector.
Child Selectors: These target elements that are direct
children of another element. For example,
to target the lists of an ordered list, we use
the selector “ol>li.”
Nth-child selectors : These are used depending on their
position within a parent element. For
example, “li: nth-child (even).”
Rounded Corners
• Border Radius was introduced in CSS3. Border
radius property is used to round the corners of
a rectangle or square elements, like images and
boxes without using third party markups/scripts
or CSS Tricks.
• Syntax:
• border-radius:top-left top-right bottom-right
bottom-left
• Example: • }
• <!DOCTYPE html> • </style>
• <html> • </head>
• <head> • <body>
• <title>span tag</title> • <div>
• <style> • <h2>Welcome To
• div{ CSS3</h2>
• border-radius: 20px 70px • <p>CSS is used to style a
90px 30px; webpage layout and
• border:2px solid red; • elements of a web page.
• background-color:yellow; • </p></div>
• width:400px; • </body>
• height: 200px; • </html>
Gradients:
It is used to display smooth transitions between two or more specified colors. We
can specify the starting and ending points within the element, as well as the
direction.
• We can find 2 types
1.Linear-gradient
2.Radial-gradient
• Linear-gradient:
• (Defined by down|up|right|left|diagonal)
Syntax: selector:Linear-gradient(direction,color-stop1,color-stop2,…)
Direction: top to bottom (default)
To right ,to left ,to bottom right (diagonal)
• Radial-gradient:
• (Defined by center)
Syntax:
Selector:radial-gradient(shape size at position start-color,….., last-color);
• Example linear-gradient bottom,yellow,red);
• <!DOCTYPE html> • }
• <html> • </style>
• <head> • </head>
• <title>span tag</title> • <body>
• <style> • <div>
• div • <h2>Welcome To
• { CSS3</h2>
• text-align:center; • <p>CSS is used to style a
• height:200px; webpage layout and
elements of a web page.
• width:200px;
• </p></div>
• border:2px solid blue;
• </body>
• background:linear-
gradient(to • </html>
• Example: radial-gradient gradient(yellow,red,green);
• <!DOCTYPE html> • }
• <html> • </style>
• <head> • </head>
• <title>span tag</title> • <body>
• <style> • <div>
• div • <h2>Welcome To
• { CSS3</h2>
• text-align:center; • <p>CSS is used to style a
• height:200px; webpage layout and
elements of a web page.
• width:200px;
• </p></div>
• border:2px solid blue;
• </body>
• background:radial-
• </html>
2D and 3D Transforms
