Selectors

A CSS selector is used to style the HTML element(s). CSS selectors select HTML elements based on their id, class, type, attribute and so on. CSS selectors select HTML elements based on their id, class, type, attribute, and so on.
CSS selectors are classified into four categories:

• Simple selectors
• Combinator selectors
• Pseudo selectors
• Attribute selectors

• Descendant chooser (space)
• Selector for children (>)
• Adjacent sibling selector (+)
• General sibling selector (~)

• When a user hovers their mouse over an element, it is styled.
• Different styles should be applied to visited and unvisited links.
• When an element receives attention, style it.

• The first letter or line of an element should be styled.
• Insert content before or after an element's content.

Background

Border

CSS border properties allow you to specify the border style, width, and colour of an element..

CSS border properties allow you to specify the border style, width, and colour of an element. The border-style property specifies the type of border that will be displayed.

Box Model

CSS padding properties are used to create space around an element's content while staying within any defined borders. You have complete control over the padding with CSS. Padding can be set for each side of an element using properties (top, right, bottom, and left).

CSS allows you to specify padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

CSS margin properties are used to create space around elements that are not bound by any defined borders. You have complete control over the margins with CSS. There are

Properties that allow you to specify the margin for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

The following values can be assigned to all margin properties:

• auto - the browser calculates the margin length - specifies a margin in pixels, points, centimetres, and so on.
• % - specifies a margin in percentage of the width of the containing element
• inherit - specifies that the margin is inherited from the parent element

calculation: 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px

P{
font-family: "Times New Roman", Times, serif;
}

p{
font-style: italic;
}

p{
font-variant: small-caps;
}

p{
font-size: 15px;
}

p{
font-weight: 900;
}

p{
font: italic small-caps bold 12px/30px Georgia, serif;
}

table, th, td {
border: 1px solid;
}

table {
border-collapse: collapse;
}

table {
width: 100%;
}

td {
text-align: center;
}
td {
height: 50px;
vertical-align: bottom;
}
 

Padding
th, td {
padding: 15px;
text-align: left;
}

th, td {
border-bottom: 1px solid #ddd;
}

tr:hover {background-color: coral;}

tr:nth-child(even) {background-color: #f2f2f2;}

    ul.a {
    list-style-type: circle;
  }

    ul {
    list-style-image: url('sqpurple.gif');
  }
  

 div.static {
        position: static;
        border: 3px solid #73AD21;
        }

div.absolute {
position: absolute;
left: 30px;
border: 3px solid #73AD21;
}

   div.fixed{
            position: fixed;
            bottom: 0;
            right: 0;
            width: 300px;
            border: 3px solid #73AD21;
            }

 div.relative {
        position: relative;
        left: 30px;
        border: 3px solid #73AD21;
        }

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

Overflow

The CSS overflow property controls what happens to content that is too big to fit into an area.

The overflow property has the following values:

• visible
• hidden
• scroll
• auto

Z-index

Elements can cover up other elements when they are placed. The stack order of an element is specified by the z-index property (which element should be placed in front of, or behind, the others). An element's stack order might be either positive or negative.

img{
  left: 0px;
  top: 0px;
  z-index: -1;
}

Gradient

You can display seamless transitions between two or more specified colours using CSS gradients.

CSS identifies three different gradient types:

• Linear Gradients (moves left, right, up, down, diagonally)
• Rounded Gradients (defined by their center)
• Conic Gradient (rotated around a centre point)

You need to define at least two colour stops in order to build a linear gradient. The colours you want to show smooth transitions between are called colour stops. Along with the gradient effect, you can also provide a beginning point and a direction (or an angle).

#grad {
  background-image: linear-gradient(red, yellow);
}

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

#grad {
  background-image: linear-gradient(red, yellow, green);
}

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

The centroid of a radial gradient determines it. Additionally, at least two colour stops must be defined in order to produce a radial gradient.

A gradient with colour transitions rotating around the centre is known as a conic gradient. You need to define at least two colours in order to construct a conic gradient.

#grad {
  background-image: conic-gradient(red, yellow, green);
}

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

#grad {
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}

Flex Box

There were four layout modes available before the Flexbox Layout module:

• Block, used for webpage parts
• For text, use Inline; for two-dimensional table data, use Table
• Positioned for an element's specified position

Without requiring float or positioning, the Flexible Box Layout Module makes it simpler to develop flexible responsive layout structures.

This is a flexible container (the blue region), as mentioned in the prior chapter, with three flexible items:

.flex-container {
  display: flex;
}

The flex container properties are:

• flex-direction
• flex-wrap
• flex-flow

.flex-container {
  display: flex;
  flex-direction: column;
}

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Flex items can be wrapped or not using the flex-wrap attribute. To better illustrate the flex-wrap property, the samples following have 12 flex elements.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
	
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

The flex-direction and flex-wrap attributes can be set using the flex-flow shorthand property.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container {
  display: flex;
  justify-content: flex-start;
}

.flex-container {
  display: flex;
  justify-content: flex-end;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

The flex item properties are:

• order
• flex-grow
• flex-shrink
• flex-basis

I) – Order

The order property specifies the order of the flex items.

II) - flex-grow

A flex item's growth rate in relation to the other flex items is determined by the flex-grow property.

III) - Flex-shrink

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The initial length of a flex item is specified by the flex-basis property.

Grid

The CSS Grid Layout Module provides a grid-based layout system with rows and columns that makes designing web pages easier without the use of floats and positioning.

.grid-container {
  display: grid;
}
.grid-container {
  display: inline-grid;
}

• The row-gap property sets the gap between the rows.
• The column-gap property sets the gap between the columns.
• The gap property is a shorthand property for the row-gap and the column-gap property.

.grid-container {
  display: grid;
  column-gap: 50px;
}

.grid-container {
  display: grid;
  row-gap: 50px;
}

.grid-container {
  display: grid;
  gap: 50px 100px;
}

.grid-container {
  display: grid;
  gap: 50px;
}

• The lines between columns are called column lines.
• The lines between rows are called row lines.

Media Query

In CSS, the Media query is used to create a responsive web design. It means that the appearance of a web page varies from system to system depending on screen or media type. The breakpoint specifies the device-width size at which the content begins to break or deform.

Many things can be checked using media queries:

• width and height of the viewport
• device width and height
• Orientation
• Resolution

A media query is made up of a media type and one or more expressions that can be true or false. If the specified media matches the type of device on which the document is displayed, the query returns true. If the media query returns true, a style sheet is generated.

Animation

CSS Animations is a technique for changing the appearance and behaviour of various web page elements. It is used to change the motions or display of the elements. It is divided into two sections, one containing the CSS properties that describe the animation of the elements and the other containing specific keyframes that indicate the animation properties of the element and the specific time intervals at which those must occur.

In this chapter you will learn about the following properties:

• keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

Animation-name: Specify a name for the @keyframes animation.

div {
  animation-name: mymove;
}

Animation-duration: Specify a time for the @keyframes animation.

div {
  animation-duration: 3s;
}

Animation-delay: Specify a pause time before to the starting the @keyframes animation.

div {
  animation-delay: 2s;
}

Animation-iteration-count: Specify a no of time before to run the @keyframes animation.

div {
  animation-iteration-count: 2;
}

Animation-direction:Specify the direction of @keyframes animation to run from forward or backward.

div {
  animation-direction: alternate;
}

Animation-timing-function:Specify the speed of @keyframes animation.

div {
  animation-timing-function: linear;
}

Animation-fill-mode: The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

div {
  animation-fill-mode: forwards;
}

Animation: It is a shorthand property to run the animation.

div {
  animation: mymove 5s infinite;
}

Transition

Transitions in CSS allow us to control how the transition between the two states of the element occurs. For example, when you hover your mouse over a button, you can use CSS selectors and pseudo-classes to change the background colour of the element. However, we can change any other or combination of properties. We can use transition to determine how the colour changes. Transitions can be used to animate changes and make them visually appealing to the user, resulting in a better user experience and interactivity. This article will demonstrate how to animate the transition between CSS properties.

In this chapter you will learn about the following properties:

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Transition-delay:The transition-delay property specifies when the transition effect will start.

div {
  	transition-delay: 2s;
}

transition-duration:The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

div {
  transition-duration: 5s;
}

transition-property:The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).

div {
  transition-property: width;
}
div:hover {
  width: 300px;
}

transition-timing-function:The transition-timing-function property specifies the speed curve of the transition effect.

div {
  transition-timing-function: linear;
}

transition:It is the shorthand property to apply transition in a webpage.

div {
  transition: width 2s, height 4s;
}

Transform

CSS's transform property is used to alter the visual formatting model's coordinate space. This is used to apply effects to elements such as skew, rotate, translate, and so on.

Transform are of two types:

• 2D Transform
• 3D Transform

CSS transforms allow you to move, rotate, scale, and skew elements.

Method of CSS Transform

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

translate():Move element from current position.

rotate():Use to rotate clockwise or anti-clockwise

scaleX():use to increase or decrease the size on X-axis

scaleY():use to increase or decrease the size on Y-axis

scale():use to increase or decrease the size

skewX():the skewY() method skews an element along the X-axis by the given angle.

skewY():the skewX() method skews an element along the Y-axis by the given angle.

skew():the skew method skews an element along both the axis by the given angle.

matrix():The matrix() method combines all the 2D transform methods into one.

Method of CSS Transform

• rotateX()
• rotateY()
• rotateZ()

rotateX():The rotateX() method rotates an element around its X-axis at a given degree.

rotateY():The rotateY() method rotates an element around its X-axis at a given degree.

rotateZ():The rotateZ() method rotates an element around its X-axis at a given degree.