The inline way of applying CSS to an HTML document is by using the style attribute in the HTML element.
The internal way of applying CSS to an HTML document is by using the style element in the head section of the HTML document.
The external way of applying CSS to an HTML document is by using the link element in the head section of the HTML document.

To use the color, font-size, and font-family properties to style text in CSS, you will need to specify the selector and the property in the CSS file.

/* Select all elements with class="red" */
.red {
  color: red;
}

/*  Select all elements with class="large" */
.large {
  font-size: 20px;
}

/* Select all elements with class="arial" */
.arial {
  font-family: Arial;
}

/* Select  element with id = "myId" */
#myId {
  color: blue;
  font-size: 20px;
  font-family: Arial;
}

To use the margin and padding properties to add space around elements in CSS, you will need to specify the selector and the property in the CSS file.

/* padding example  */
.padding-example {
  padding: 10px;
}

/* margin example */
.margin-example {
  margin: 10px;
}

To use the display, position, and float properties to control the layout of elements on a webpage in CSS.

The `display` property in CSS is used to specify the type of layout an element should use. It can take on many different values, including `block` , `inline` , and `none` .

The `position` property in CSS is used to specify the type of positioning method used for an element. It can take on many different values, including `static` , `relative` , `absolute` , `fixed` , and `sticky` .

The `float` property in CSS is used to specify whether or not an element should `float` . It can take on many different values, including `left` , `right` , and `none` .

.element {
  display: block;
  position: relative;
  float: left;
}

To use the background-color and background-image properties to add a background color or image to an element in CSS.

/* background example  color change*/
.background-example {
  background-color: red;
}

/* background example  image change*/
.background-example {
  background-image: url("img_tree.png");
}

There are many different ways to select elements some of them are:

• By element name
• By class name
• By id
• By attribute
• By pseudo-class
• By pseudo-element

/* select by element name */
p {
  color: red;
}

/* select by id */
#id-example {
  color: red;
}

/* select by class */
.class-example {
  color: red;
}

/* select by attribute */
[attribute-example] {
  color: red;
}

/* select by pseudo-class */
a:hover {
  color: red;
}

/* select by pseudo-element */
p::first-line {
  color: red;
}

The relative position value in CSS is used to position an element relative to its normal position.

The absolute position value in CSS is used to position an element relative to its parent element.

The fixed position value in CSS is used to position an element relative to the browser window.

The z-index property in CSS is used to control the stacking order of elements.
It can take on many different values, including auto , number , and inherit .

.z-index-example {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 2;
}

The border property in CSS is used to style the border of an element.
It can take on many different values, including border-width , border-style , border-color , and border-radius .

.border-example {
  border: 1px solid red;
}

.border-example {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  border-radius: 5px;
}

.border-example {
  border-top: 1px solid red;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}

The advantages of using CSS are:

• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
• CSS is independent of HTML and can be used with any XML-based markup language
• CSS is easy to learn and understand
• CSS is compatible with all browsers
• CSS is a W3C standard and is an open standard
• CSS has been adopted by all major browsers

To center an element horizontally and vertically within its parent element using CSS, you will need to specify the selector and the property in the CSS file and you can use flex or grid to make it center.

/* example make element center  horizontal and vertical  using flex*/
.center-example {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* example make element center  horizontal and vertical  using  grid*/
.center-example {
  display: grid;
  place-items: center;
}

/* example make element center  horizontal and vertical  using  position*/
.center-example {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

To create a responsive layout using CSS, you can use a combination of the `width` , `max-width` , and `min-width` properties, along with media queries .

/* Default styles for all devices */
.element {
  width: 100%;
}

/* Styles for devices with a viewport width of 800px or more */
@media (min-width: 800px) {
  .element {
    width: 50%;
  }
}

/* Styles for devices with a viewport width of 400px or more */
@media (min-width: 400px) {
  .element {
    width: 75%;
  }
}

In this example, the .element class would have a `width` of 100% by default. On devices with a viewport `width` of 800px or more, the `width` of the element would be set to 50%. On devices with a viewport `width` of 400px or more, the `width` of the element would be set to 75%.

To animate an element using CSS, you will need to specify the selector and the property in the CSS file and you can use the `@keyframes` rule to create the animation.

/* example animation  */
@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

/* example animation  */
@keyframes example {
  0% {
    background-color: red;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: green;
  }
}

To create a responsive image gallery using CSS, you can use the `display` : flex property and the `flex-wrap` property, along with media queries .

here is the code for the image gallery:

.image-gallery {
  display: flex;
  flex-wrap: wrap;
}

.image-gallery img {
  width: 33%;
}

/* Styles for devices with a viewport width of 800px or more */
@media (min-width: 800px) {
  .image-gallery img {
    width: 25%;
  }
}

/* Styles for devices with a viewport width of 400px or more */
@media (min-width: 400px) {
  .image-gallery img {
    width: 50%;
  }
}

To create a dropdown menu using CSS, you can use the `display` : none property and the `:hover` pseudo-class you can make the dropdown menu appear when the user hovers over the menu item.

here is the code for the dropdown menu:

/* Dropdown Button */

.dropbtn {
  background-color: #4caf50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

The box-sizing property is used to alter the default CSS box model used to calculate widths and heights of elements.

It is possible to use this property to include the padding and border in an element's total width and height.

The box-sizing property can have one of two values:

• content-box
• border-box

The content-box value is used by default. It causes padding and border to be included in the width and height of an element.

The border-box value causes padding and border to be included in the width and height of an element.

.box-sizing-example {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
}

.box-sizing-example {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 1px solid red;
  box-sizing: content-box;
}

The position property is used to position an element in CSS. It can have one of five values:

• static
  

  The static value is used by default. It causes an element to be positioned according to the normal flow of the page.

• relative
  

  The relative value causes an element to be positioned according to the normal flow of the page, and then offset relative to itself based on the values of top, right, bottom, and left.

• absolute
  

  The absolute value causes an element to be removed from the normal flow of the page, and then offset relative to its nearest positioned ancestor based on the values of top, right, bottom, and left.
  If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

• fixed
  

  The fixed value causes an element to be removed from the normal flow of the page, and then offset relative to the viewport based on the values of top, right, bottom, and left.
  It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block.

• sticky
  

  The sticky value causes an element to be treated as relative until it crosses a specified threshold, at which point it is treated as fixed.

The box-shadow property is used to add a shadow to an element in CSS. It can have one of two values:

• none
• shadow

The none value is used by default. It causes an element to have no shadow.

The shadow value causes an element to have a shadow.

.box-shadow-example {
  width: 200px;
  height: 200px;
  background-color: red;
  box-shadow: 10px 10px 5px #888888;
}

The ::before and ::after pseudo-elements are used to insert generated content in an element.
The ::before pseudo-element is used to insert generated content before the content of an element.
The ::after pseudo-element is used to insert generated content after the content of an element.

here is the code for the ::before pseudo-element:

.before-pseudo-element-example {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

.before-pseudo-element-example::before {
  content: "Hello World";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  opacity: 0.5;
}

here is the code for the ::after pseudo-element:

.after-pseudo-element-example {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

.after-pseudo-element-example::after {
  content: "Hello World";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  opacity: 0.5;
}

CSS Grid and Flexbox are used to create advanced layouts.
CSS Grid is used to create two-dimensional layouts.
Flexbox is used to create one-dimensional layouts.

here is the code for the CSS Grid:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196f3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

here is the code for the Flexbox:

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

Pseudo-classes and pseudo-elements are used to style specific states of an element.
The pseudo-classes are used to style an element when a user mouses over it, clicks on it, etc.
The pseudo-elements are used to style the first letter, or line, etc. of an element.

The CSS :hover, :active, and :focus pseudo-classes are used to create interactive effects.

The :hover pseudo-class is used to create an effect when the user hovers over an element.
The :active pseudo-class is used to create an effect when the user clicks on an element.
The :focus pseudo-class is used to create an effect when the user focuses on an element.

here is the code :

.hover-active-focus-example {
  background-color: red;
  width: 200px;
  height: 200px;
}

.hover-active-focus-example:hover {
  background-color: blue;
}

.hover-active-focus-example:active {
  background-color: green;
}

.hover-active-focus-example:focus {
  background-color: yellow;
}

The CSS pseudo-elements ::before and ::after are used to add content to an element.
The ::before pseudo-element is used to add content before the content of an element.
The ::after pseudo-element is used to add content after the content of an element.

here is the code :

.before-after-example {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

.before-after-example::before {
  content: "Hello World";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  opacity: 0.5;
}

.before-after-example::after {
  content: "Hello World";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
  opacity: 0.5;
}

The CSS @font-face rule is used to import custom fonts.
The @font-face rule is used to import a font from a URL or a local file.

here is the code :

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

.font-face-example {
  font-family: myFirstFont;
}

In CSS, the box model is the layout model used for elements in the Document Object Model (DOM).
It defines the total size of an element, including the content, padding, borders, and margins. The box model is used to calculate the size and position of elements on a web page.
The default box model in CSS is the standard box model, which defines the total width and height of an element as the sum of its content, padding, borders, and margins.

To create a sticky header using CSS, you will need to specify the selector and the property in the CSS file and you can use the `position` property to make it sticky.

/* Make the header stick to the top of the page when you reach its scroll position */
.header {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  padding: 50px;
  font-size: 40px;
}

To create a parallax scrolling effect using CSS, you will need to specify the selector and the property in the CSS file and you can use the `background-attachment` property to make it parallax.

/* Create a parallax scrolling effect */
.bgimg-1,
.bgimg-2,
.bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url("img_forest.jpg");
  min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("img_snow.jpg");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("img_mountains.jpg");
  min-height: 400px;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1,
  .bgimg-2,
  .bgimg-3 {
    background-attachment: scroll;
  }
}

To create a fullscreen background image using CSS, you will need to specify the selector and the property in the CSS file and you can use the `background-size` property to make it fullscreen.

/* Full height image header */
.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("img_forest.jpg");
  min-height: 100%;
}