Document

CSS and its History.

CSS (Cascading Style Sheets) is a stylesheet language used to describe the look and formatting of a document written in HTML. It was developed in the early 1990s by the World Wide Web Consortium (W3C) as a way to add style and layout to web pages.

The first version of CSS, CSS1, was released in 1996 and provided a way to control the appearance of text, fonts, and colors on web pages. CSS2, released in 1998, added support for media types, positioning, and other features.

In the early 2000s, CSS became more widely used as web browsers improved their support for the language. The release of CSS2.1 in 2011 introduced new features such as the ability to apply styles to specific media types and devices, and the introduction of the CSS3 module system.

Today, CSS is an essential tool for web development and is used to style and layout almost all modern websites. The latest version of CSS, CSS3, has added many new features such as support for responsive design, animation, and 3D transforms.

What is CSS?

CSS stands for Cascading Style Sheets.
It is a stylesheet language used for describing the look and formatting of a document written in HTML.
CSS is used to control the style of a web page, including its layout, colors, and fonts.
It allows you to apply styles consistently across multiple pages of a website.
CSS is used in conjunction with HTML to create the structure and content of a web page. HTML provides the structure and content, while CSS controls the styling and layout.
You can use CSS to style specific elements on a web page, or you can use classes and IDs to apply styles to multiple elements.
You can use CSS media queries to apply different styles based on the size of the screen or device.
CSS has a wide range of properties that you can use to control the appearance of elements, including font size, color, margins, padding, and more.
You can use CSS frameworks like Bootstrap to quickly apply a consistent style to your website.
CSS allows you to create dynamic and responsive websites that work well on a variety of devices.

Css Syntax:


p { color: red; font-size: 18px; }

In this example, the p selector applies the style to all p elements (paragraphs) in the HTML document. The declaration block contains two declarations: one sets the color of the text to red, and the other sets the font size to 18 pixels.

Each declaration consists of a property (such as color or font-size) and a value (such as red or 18px). The property and value are separated by a colon, and the declaration is terminated with a semicolon.

Multiple declarations can be included in a single declaration block, separated by semicolons.

Here is an example of a simple CSS rule with multiple selectors, all on one line:


h1, h2, h3 { color: blue; font-weight: bold; }

Types of CSS:

There are three types of CSS:

Inline CSS: Inline CSS is used to apply styles to a specific element. It is defined within the HTML element, using the style attribute. For example:
```
 <p style="color: red; font-size: 18px;">This is a paragraph.</p>
```
In this example, the inline CSS applies the style to the p element, setting the color to red and the font size to 18 pixels.
Internal CSS: Internal CSS is used to style a specific HTML page. It is defined within the head element of the HTML document, using a style element. For example:
```
 <head>
 <style>
    p {
      color: red;
      font-size: 18px;
    }
 </style>
</head>
```
In this example, the internal CSS applies the style to all p elements in the HTML document, setting the color to red and the font size to 18 pixels.
External CSS: External CSS is used to style multiple HTML pages. It is defined in a separate CSS file, and is linked to the HTML documents using the link element in the head of the HTML document. For example:
```
<head>
  <link rel="stylesheet" href="/path/to/styles.css">
</head>
```

CSS Selectors

CSS selectors are used to specify which elements in an HTML document a style should be applied to. They allow you to target specific elements on a page and apply styles to them, making it easier to control the layout and appearance of your website.
There are many different types of CSS selectors, and they can be combined to create more specific and powerful selectors. Here is a summary of some of the most common CSS selectors:

Element selectors: These selectors target elements based on their type, such as p for paragraphs or div for divisions. For example, the following CSS rule selects all p elements and sets the font size to 18 pixels:
```
p {
  font-size: 18px;
}
```
```
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
```
ID selectors: These selectors target an element based on its unique ID. IDs are specified in the HTML using the id attribute, and they must be unique within the document. For example, the following CSS rule selects an element with the ID main and sets the background color to yellow:
```
#main {
  background-color: yellow;
}
```
```
<div id="main">This is the main content.</div>
```
Class selectors: These selectors target elements based on their class. Classes are specified in the HTML using the class attribute, and an element can have multiple classes. For example, the following CSS rule selects all elements with the class error and sets the color to red:
```
.error {
  color: red;
}
```
```
<p class="error">This is an error message.</p>
<div class="error">This is another error message.</div>
```
element element: Selects all elements of the specified type that are descendants of the first element. For example, the following CSS rule selects all p elements that are descendants of a div element:
```
div p {
  color: red;
}
```
```
<div>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>
```
Descendant selectors: These selectors target elements that are descendants of another element. For example, the following CSS rule selects all p elements that are descendants of a div element and sets the font weight to bold:
```
div p {
  font-weight: bold;
}
```
Child selectors: These selectors target elements that are direct children of another element. For example, the following CSS rule selects all li elements that are children of a ul element and sets the list style to none:
```
ul > li {
  list-style: none;
}
```

CSS selectors are an essential part of web development, and they allow you to apply styles to specific elements on your web pages. There are many different types of CSS selectors, and you can use them to create powerful and specific styles for your website.
Here are some additional CSS selectors that you might find useful:

Attribute selectors: These selectors target elements based on their attributes and attribute values. For example, the following CSS rule selects all a elements with a target attribute set to _blank and sets the color to red:
```
a[target="_blank"] {
  color: red;
}
```
Pseudo-class selectors: These selectors target elements based on their state or position in the document. For example, the following CSS rule selects all a elements that are being hovered over by the mouse and sets the color to purple:
```
a:hover {
  color: purple;
}
```
Pseudo-element selectors: These selectors target specific parts of an element, such as the first letter or line of a paragraph. For example, the following CSS rule selects the first letter of all p elements and sets the font size to 36 pixels:
```
p::first-letter {
  font-size: 36px;
}
```

You can also combine CSS selectors to create more specific and powerful styles. For example, you can use a combination of element, class, and attribute selectors to target a specific element with a specific class and attribute value.
CSS selectors are an important part of web development, and they allow you to apply styles to specific elements on your web pages. By using different types of CSS selectors and combining them in different ways, you can create powerful and specific styles for your website.

Css Selectors One liner:

CSS selectors are used to specify which elements in an HTML document a style should be applied to.
There are many different types of CSS selectors, including element, ID, class, descendant, child, attribute, pseudo-class, and pseudo-element selectors.
You can combine CSS selectors to create more specific and powerful styles.
CSS selectors are case-sensitive and must be written correctly in order to work properly.
The specificity of a CSS selector determines which style will be applied to an element if there are multiple conflicting styles.
You can use the !important declaration to override the specificity of a CSS rule and make it take precedence over other styles.
Element selectors target elements based on their type, such as p for paragraphs or div for divisions.
ID selectors target an element based on its unique ID, specified in the HTML using the id attribute.
Class selectors target elements based on their class, specified in the HTML using the class attribute.
Descendant selectors target elements that are descendants of another element.
Child selectors target elements that are direct children of another element.
Attribute selectors target elements based on their attributes and attribute values.
Pseudo-class selectors target elements based on their state or position in the document.
Pseudo-element selectors target specific parts of an element, such as the first letter or line of a paragraph.

Types of CSS Units:

CSS units can be classified into two main categories: absolute units and relative units.

Absolute units are units that are fixed and do not change based on the size or dimensions of the element or its parent. Examples of absolute units include pixels (px), centimeters (cm), millimeters (mm), inches (in), points (pt), and picas (pc). These units are useful for specifying sizes and dimensions that are consistent across all devices and screens, but they may not be as flexible as relative units.
1. px (pixels): Pixels are used to specify the size of an element or its properties in terms of pixels on the screen.
2. cm (centimeters): Centimeters are used to specify the size of an element or its properties in terms of centimeters.
3. mm (millimeters): Millimeters are used to specify the size of an element or its properties in terms of millimeters.
4. in (inches): Inches are used to specify the size of an element or its properties in terms of inches.
5. pt (points): Points are used to specify the size of an element or its properties in terms of points.
6. pc (picas): Picas are used to specify the size of an element or its properties in terms of picas.

Relative units, on the other hand, are units that are based on the size or dimensions of the element or its parent. Examples of relative units include ems (em), root ems (rem), percentages (%), viewport width (vw), and viewport height (vh). These units are useful for creating responsive designs that adjust to the size of the screen or the font size of the element.
1. em (ems): Ems are used to specify the size of an element or its properties in terms of the font size of the element.
2. rem (root ems): Root ems are similar to ems, but they are based on the font size of the root element (usually the html element) rather than the parent element.
3. % (percentages): Percentages are used to specify the size of an element or its properties in terms of a percentage of its parent element.
4. vw (viewport width): Viewport width units are used to specify the size of an element or its properties in terms of a percentage of the viewport width.
5. vh (viewport height): Viewport height units are used to specify the size of an element or its properties in terms of a percentage of the viewport height.


/* Absolute units */
p {
  font-size: 16px; /* 16 pixels */
  width: 300px; /* 300 pixels */
  height: 100mm; /* 100 millimeters */
}

/* Relative units */
h1 {
  font-size: 2em; /* 2 times the font size of the parent element */
  margin: 10%; /* 10% of the width of the parent element */
  padding: 1rem; /* 1 times the font size of the root element (usually the html element) */
}

In general, it is a good idea to use a mix of absolute and relative units in your style sheets. Absolute units are useful for specifying sizes and dimensions that are consistent across all devices and screens, while relative units are useful for creating flexible and responsive designs that adjust to the size of the screen or the font size of the element.
By using a combination of absolute and relative units in your style sheets, you can create websites that look great and work well on all devices and screens.

CSS border Property:

CSS border properties are used to specify the style, width, and color of an element's border. Here are some common border properties in CSS, along with examples:

border-style: Specifies the style of the border. Possible values include solid, dotted, dashed, double, groove, ridge, inset, and outset. For example:
```
div {
  border-style: solid;
}
```
border-width: Specifies the width of the border. Possible values include thin, medium, thick, and specific pixel or relative values. For example:
```
div {
  border-width: 5px;
}
```
border-color: Specifies the color of the border. Possible values include color names, hex codes, RGB values, and more. For example:
```
div {
  border-color: red;
}
```
You can also use the border shorthand property to set all the border properties in one line. For example: Border Short Hand Property:
```
div {
  border: solid 5px red;
}
```
border-top-style, border-right-style, border-bottom-style, border-left-style: These properties allow you to specify different border styles for the top, right, bottom, and left sides of an element. For example:
```
div {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: double;
}
```
border-top-width, border-right-width, border-bottom-width, border-left-width: These properties allow you to specify different border widths for the top, right, bottom, and left sides of an element. For example:
```
div {
  border-top-width: 2px;
  border-right-width: 3px;
  border-bottom-width: 4px;
  border-left-width: 5px;
}
```
border-top-color, border-right-color, border-bottom-color, border-left-color: These properties allow you to specify different border colors for the top, right, bottom, and left sides of an element. For example:
```
div {
  border-top-color: green;
  border-right-color: yellow;
  border-bottom-color: orange;
  border-left-color: purple;
}
```

CSS Color Property

The color property in CSS is used to specify the color of an element's text or other content. Here is an example of how to use the color property:


p {
  color: blue;
}

This CSS rule sets the color of all p elements to blue. You can use color names, hex codes, RGB values, and other color formats to specify the color. For example:


p {
  color: #0000ff; /* blue (hex code) */
}

p {
  color: rgb(0, 0, 255); /* blue (RGB value) */
}

You can also use the color property to specify the color of an element's background using the background-color property. For example:


div {
  background-color: yellow;
}

This CSS rule sets the background color of all div elements to yellow.
The color property is an important part of web design, as it allows you to control the appearance of text and other content on your web pages. By using different colors, you can create a visual hierarchy, highlight important information, and create a cohesive design.

CSS text Property

The text property in CSS is used to control the appearance of text on a web page. Here are some examples of common text properties in CSS, along with brief descriptions and examples:

font-family: Specifies the font family to use for the text. Possible values include font names or a list of font names. For example:
```
p {
  font-family: Arial, sans-serif;
}
```
This CSS rule sets the font family for all p elements to Arial, and falls back to a sans-serif font if Arial is not available.
font-size: Specifies the font size to use for the text. Possible values include absolute and relative units, such as pixels (px), ems (em), and percentages (%). For example:
```
p {
  font-size: 16px;
}
```
This CSS rule sets the font size for all p elements to 16 pixels.
font-style: Specifies the font style to use for the text. Possible values include normal, italic, and oblique. For example:
```
p {
  font-style: italic;
}
```
This CSS rule sets the font style for all p elements to italic.
font-weight: Specifies the font weight to use for the text. Possible values include normal, bold, bolder, and specific numeric values. For example:
```
p {
  font-weight: bold;
}
```

This CSS rule sets the font weight for all p elements to bold.
By using the text properties in CSS, you can control the appearance of text on your web pages and create a cohesive and visually appealing design.
Here are some examples of how the text properties I listed above can be used in a CSS rule, along with some additional text properties:


h1 {
  color: blue;  /* sets the color of the text to blue */
  font-family: Georgia, serif;  /* sets the font family to Georgia */
  font-size: 24px;  /* sets the font size to 24 pixels */
  font-style: italic;  /* sets the font style to italic */
  font-weight: bold;  /* sets the font weight to bold */
  letter-spacing: 2px;  /* adds 2 pixels of space between each letter */
  line-height: 1.5;  /* sets the line height to 1.5 times the font size */
  text-align: center;  /* centers the text */
  text-decoration: underline;  /* adds an underline to the text */
  text-transform: uppercase;  /* transforms the text to uppercase */
}

p {
  color: #333;  /* sets the color of the text to a dark gray */
  font-family: Arial, sans-serif;  /* sets the font family to Arial */
  font-size: 16px;  /* sets the font size to 16 pixels */
  font-style: normal;  /* sets the font style to normal (no italic or oblique) */
  font-weight: normal;  /* sets the font weight to normal (not bold) */
  text-align: justify;  /* justifies the text */
  text-decoration: none;  /* removes any text decorations */
  text-transform: none;  /* does not transform the text */
}

These rules would apply the specified text properties to h1 and p elements on the page. You can also use class or ID selectors to apply these styles to specific elements, or use the style attribute to apply them directly to an individual element.

CSS Display Properties

In CSS (Cascading Style Sheets), the display property determines how an element is displayed on the web page. The display property can take on a variety of values, each of which specifies a different way that the element should be displayed.
Some common values for the display property include:

block: The element is displayed as a block-level element, which means that it takes up the full width of its parent element and creates a new line after it. Examples of block-level elements include div, h1, and p.
inline: The element is displayed as an inline element, which means that it only takes up as much space as its content requires and does not create a new line after it. Examples of inline elements include span, a, and strong.
inline-block: The element is displayed as an inline-level block element, which means that it behaves like an inline element but can have dimensions (such as width and height) set on it.
none: The element is not displayed at all. This can be used to hide an element from view without deleting it from the HTML code.


div {
  display: block;  /* displays the div element as a block-level element */
}

span {
  display: inline;  /* displays the span element as an inline element */
}

.hidden {
  display: none;  /* hides elements with the "hidden" class from view */
}

You can also use the display property to change the way an element is displayed based on the size of the screen or other conditions. For example, you might use a media query to change the display of an element from block to none when the screen size is smaller than a certain width.

CSS Background Property

In CSS (Cascading Style Sheets), the background property is used to set the background of an element. The background property can be used to set a variety of different background styles, including the background color, image, and repeat behavior.
Here is an example of how the background property can be used to set the background color of an element:


body {
  background: red;  /* sets the background color to red */
}

You can also use the background-color property to set the background color of an element:


body {
  background-color: red;  /* sets the background color to red */
}

To set a background-image for an element, you can use the background-image property:


body {
  background-image: url('image.jpg');  /* sets the background image to the file image.jpg */
}

You can also use the background-repeat property to control how the background image is repeated (if at all):


body {
  background-image: url('image.jpg');  /* sets the background image to the file image.jpg */
  background-repeat: repeat-x;  /* repeats the image horizontally */
}

Here is a list of some of the other background properties that you can use in CSS to customize the appearance of an element's background:

background-attachment: Specifies whether the background image scrolls with the page or is fixed in place.
background-clip: Specifies the area of an element's background that should be visible.
background-origin: Specifies the positioning area of the background image
background-position: Specifies the position of the background image.
background-repeat: Specifies how the background image should be repeated (if at all).
background-size: Specifies the size of the background image.


body {
  background-image: url('image.jpg');  /* sets the background image to the file image.jpg */
  background-repeat: no-repeat;  /* does not repeat the image */
  background-position: center;  /* positions the image in the center of the element */
  background-attachment: fixed;  /* fixes the image in place */
  background-size: cover;  /* scales the image to cover the entire element */
}