CSS pseudo-elements and generated content allow targeting text that is not in the DOM tree, like first letters or lines. Pseudo-elements represent document structure outside the DOM, while pseudo-classes reflect attributes or states. Common pseudo-elements include ::first-letter, ::first-line, and ::selection. CSS3 introduced the double colon syntax to differentiate pseudo-elements from pseudo-classes.

1. CSS-3

2. Pseudo-elements and
Generated Content
In addition to pseudo-classes, CSS gives us access to pseudo-elements.
Pseudoelements allow you to target text that’s part of the document,
but not otherwise targetable in the document tree. Pseudo-classes
generally reflect some attribute or state of the element that is not
otherwise easily or reliably detectable in CSS. Pseudoelements, on the
other hand, represent some structure of the document that’s outside of
the DOM. For example, all text nodes have a first letter and a first line,
but how can you target them without wrapping them in a span? CSS
provides the ::first-letter and ::first-line pseudo-elements that match
the first letter and first line of a text node, respectively. These can
alternatively be written with just a single colon: :first-line and :first-
letter.

3. Why bother with the
double colon?
The double colon is the correct syntax, but the single colon is better
supported. IE6, IE7, and IE8 only understand the single-colon notation.
All other browsers support both. Even though :first-letter, :first-line,
:first-child, :before, and :after have been around since CSS2, these
pseudo-elements in CSS3 have been redefined using double colons to
differentiate them from pseudoclasses.

4. ::selection
::selection
{
background:;
color:;
}
The ::selection pseudo-element matches
text that is highlighted

5. Rounded Corners: border-radius
border-radius: 25px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 40px;
The border-radius property lets you create rounded corners without the need for
images or additional markup. To add rounded corners to our box, we simply add:

6. Linear Gradients
Syntax:
background-image: linear-gradient( … );
background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);
Linear gradients are those where colors transition across a straight line: from top
to bottom, left to right, or along any arbitrary axis.

7. Multiple Background Images
background-image:
url(firstImage.jpg),
url(secondImage.gif),
url(thirdImage.png);
In CSS3, there’s no need to include an element for every background image; it
provides us with the ability to add more than one background image to any
element, even to pseudo-elements.
background: url(firstImage.jpg) no-repeat 0 0,
url(secondImage.gif) no-repeat 100% 0,
url(thirdImage.png) no-repeat 50% 0;

8. Background Properties:
In CSS3, there’s no need to include an element for every background image; it
provides us with the ability to add more than one background image to any
element, even to pseudo-elements.
background-color: transparent;
background-image: none;
background-position: 0 0;
background-size: auto;
background-repeat: repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;

9. transition-property
The transition-property lists the CSS properties of the element that should be transitioned. Properties
that can be made to transition include background, border, and box model properties. You can
transition font sizes and weights, but not font 184 HTML5 CSS3 for the Real World families.
background-color and background-position
border-color, border-spacing, and border-width
bottom, top, left, and right
clip
color
crop
font-size and font-weight
height and width
letter-spacing
line-height
margin
max-height, max-width, min-height, and min-width
opacity

10. transition-property
The transition-property lists the CSS properties of the element that should be transitioned. Properties
that can be made to transition include background, border, and box model properties. You can
transition font sizes and weights, but not font 184 HTML5 CSS3 for the Real World families.
outline-color, outline-offset, and outline-width
padding
text-indent
text-shadow
vertical-align
visibility
word-spacing
z-index

11. The column-gap Property
The column-gap property specifies the width of the space between columns
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;

12. What are Media Queries?
Before CSS3, a developer could specify a media type for a stylesheet using the media attribute. So
you might have come across a link element
link rel=stylesheet href=print.css media=print
Syntax:
link rel=stylesheet href=style.css media=screen and (color)

13. Media Queries
media feature Logic to identify use case for CSS. Options outlined below
aspect-ratio Describes the aspect ratio of the targeted display area of the output device.
aspect-ratio Describes the aspect ratio of the targeted display area of the output device.
aspect-ratio Describes the aspect ratio of the targeted display area of the output device.
aspect-ratio Describes the aspect ratio of the targeted display area of the output device.
height The height media feature describes the height of the output device's rendering surface
max-width CSS will not apply on a screen width wider than specified
width The width media feature describes the width of the rendering surface of the output device
(such as the width of the document window, or the width of the page box on a printer).
resolution Indicates the resolution (pixel density) of the output device

14. Media Queries
Basic Example:
@media screen and (min-width: 720px)
{
body {
background-color: skyblue;
}
}

15. Grid
Grid layout is a new and powerful CSS layout system that allows to divide a web page content into
rows and columns in an easy way
Basic Example
The CSS Grid is defined as a display property. It applies to a parent element and its immediate
children only
section class=container
div class=item1item1/div
div class=item1item2/div
div class=item1item3/div
div class=item1item4/div
/section
.container {
display: grid; }

16. Grid
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
.container .item1 { grid-column: 1; grid-row: 1;
}
.container .item2 { grid-column: 2; grid-row: 1;
}
.container .item3 { grid-column: 1; grid-row: 2;
}
.container .item4 { grid-column: 2;
grid-row: 2;
}

17. Animation:
!DOCTYPE html
html lang=en
head
style
@keyframes rainbow-background {
0% { background-color: #ff0000; }
8.333% { background-color: #ff8000; }
16.667% { background-color: #ffff00; }
25.000% { background-color: #80ff00; }
33.333% { background-color: #00ff00; }
41.667% { background-color: #00ff80; }
50.000% { background-color: #00ffff; }
58.333% { background-color: #0080ff; }
66.667% { background-color: #0000ff; }

18. 75.000% { background-color: #8000ff; }
83.333% { background-color: #ff00ff; }
91.667% { background-color: #ff0080; }
100.00% { background-color: #ff0000; }
}
.RainbowBackground {
animation: rainbow-background 5s infinite;
}
/style
titleDocument/title
/head
body
div class=RainbowBackground
h1Rainbow/h1
/div
/body
/html

19. Animation Properties:
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;