knowledge/technology/internet/CSS.md

---
source: https://developer.mozilla.org/en-US/docs/Web/CSS
wiki: https://en.wikipedia.org/wiki/CSS
obj: format
mime: "text/css"
extension: "css"
---

# Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as [HTML](HTML.md) or [XML](../files/XML.md). CSS is a cornerstone technology of the World Wide Web, alongside [HTML](HTML.md) and JavaScript.

CSS can be used inline via the [HTML](HTML.md) `style` attribute on individual elements or via the `<style>` tag. Traditionally CSS is applied via the `class` and `id` attributes in combination with a linked CSS file.

## Syntax
Example CSS:
```css
body {
	color: black;
}
```

### Selector
A CSS selector selects the [HTML](HTML.md) element(s) you want to style.

**Tag Selector**: Here, all `<p>` elements on the page will be center-aligned, with a red text color: 
```css
p {
	text-align: center;
	color: red;
}
```

**ID Selector**: The CSS rule below will be applied to the [HTML](HTML.md) element with id="para1": 
```css
#para1 {
	text-align: center;
	color: red;
}
```

**Class Selector**: In this example all [HTML](HTML.md) elements with class="center" will be red and center-aligned: 
```css
.center {
	text-align: center;
	color: red;
}
```

**Tag+Class Selector**: In this example only `<p>` elements with class="center" will be red and center-aligned: 
```css
p.center {
	text-align: center;
	color: red;
}
```

**All Selector**:
```css
* {
	text-align: center;
	color: blue;
}
```

**Multiple Selector**: In this example we have grouped the selectors: 
```css
h1, h2, p {
	text-align: center;
	color: red;
}
```

**Modified Selectors**: You can modify selectors to apply based on certain conditions:
```css
a:visited {} /* Apply to visited links */
a:valid {} /* Apply to valid elements */
a:invalid {} /* Apply to invalid elements */
a:required {} /* Apply to required elements */
a:optional {} /* Apply to optional elements */
a:hover {} /* Apply to links on hover */
a:focus {} /* Apply to focused element */
a:enabled {} /* Apply to enabled elements */
a:disabled {} /* Apply to disabled elements */
```

### Comments
CSS comments are not displayed in the browser, but they can help document your source code.

```css
/* This is a single-line comment */  
p {
	color: red; /* Set text color to red */
}
/* This is  
a multi-line  
comment */
```

### Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

```css
body {
	background-color: rgb(255, 99, 71);
	color: white;
}
a {
	color: #ff6347;
}
```

### Backgrounds
You can set a background color:
```css
div {
	background-color: rgba(0, 128, 0, 0.3)
}
```

The `background-image` property specifies an image to use as the background of an element:
```css
body {
	background-image: url("paper.gif");
}
```

Add a graphical effect to the area behind an element:
```css
body {
	background-color: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(5px);
}
```

### Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.

The `border-style` property specifies what kind of border to display:
```css
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
```

The `border-width` property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

```css
p.one {
	border-style: solid;
	border-width: 5px;
}  
  
p.two {
	border-style: solid;
	border-width: medium;
}
  
p.three {
	border-style: solid;
	border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
```

The `border-color` property is used to set the color of the four borders.
```css
p.two {
	border-style: solid;
	border-color: green;
}

p.one {
	border-style: solid;
	border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
```

The `border-radius` property is used to add rounded borders to an element:
```css
p {
	border: 2px solid red;
	border-radius: 5px;
}
```

The `box-shadow` property attaches one or more shadows to an element (Syntax: `box-shadow: none|_h-offset v-offset blur spread color_ |inset|initial|inherit;`).
```css
#example2 {box-shadow: 5px 10px #888888;}
```

### Margins
Margins are used to create space around elements, outside of any defined borders.

The CSS `margin` properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

```css
p {
	margin-top: 100px;
	margin-bottom: 100px;
	margin-right: 150px;
	margin-left: 80px;
}
p {  margin: 25px 50px 75px 100px;}
```

### Padding
Padding is used to create space around an element's content, inside of any defined borders.

The CSS `padding` properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

```css
div {
	padding-top: 50px;
	padding-right: 30px;
	padding-bottom: 50px;
	padding-left: 80px;
}
```

### Height and Width
The CSS `height` and `width` properties are used to set the height and width of an element.

The CSS `max-width` property is used to set the maximum width of an element.

The `height` and `width` properties may have the following values:
- `auto` - This is default. The browser calculates the height and width
- `length` - Defines the height/width in px, cm, etc.
- `%` - Defines the height/width in percent of the containing block
- `initial` - Sets the height/width to its default value
- `inherit` - The height/width will be inherited from its parent value

```css
div {
	height: 200px;
	width: 50%;
	background-color: powderblue;
}
```

### Text
CSS has a lot of properties for formatting text.

The `color` property is used to set the color of the text.
```css
h1 { color: green; }
```

The `text-align` property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

```css
h1 { text-align: center; }  
  
h2 { text-align: left; }  
  
h3 { text-align: right; }
```

The `text-decoration` property is mostly used to remove underlines from links:
```css
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
```

The `word-spacing` property is used to specify the space between the words in a text.

```css
p.one { word-spacing: 10px; }
```

The `text-shadow` property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

```css
h1 { text-shadow: 2px 2px; }
body {
	text-shadow: <horizontal> <vertical> <blur> <color>;
}
```

### Fonts
In CSS, we use the `font-family` property to specify the font of a text.

```css
.p1 { font-family: "Times New Roman", Times, serif; } 
.p2 { font-family: Arial, Helvetica, sans-serif; }
```

The `font-style` property is mostly used to specify italic text.
```css
p.normal { font-style: normal; } 
p.italic { font-style: italic; }
p.oblique { font-style: oblique; }
```

The `font-weight` property specifies the weight of a font:
```css
p.normal { font-weight: normal; }
p.thick { font-weight: bold; }
```

The `font-size` property sets the size of the text.
```css
h1 { font-size: 40px; }  
h2 { font-size: 30px; }
```

### Display
The `display` property is the most important CSS property for controlling layout.

```css
p.ex1 {display: none;}  
p.ex2 {display: inline;}  
p.ex3 {display: block;}  
p.ex4 {display: inline-block;}
```

The `z-index` property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
```css
img {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
}
```

The CSS `overflow` property controls what happens to content that is too big to fit into an area.
```css
div.ex1 { overflow: scroll;}  
div.ex2 { overflow: hidden;}  
div.ex3 { overflow: auto;}  
div.ex4 { overflow: clip;}  
div.ex5 { overflow: visible;}
```

The `float` property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The `float` property can have one of the following values:
- `left` - The element floats to the left of its container
- `right` - The element floats to the right of its container
- `none` - The element does not float (will be displayed just where it occurs in the text). This is default
- `inherit` - The element inherits the float value of its parent

The `opacity` property specifies the opacity/transparency of an element.
```css
img {opacity: 0.5;}
```

The `cursor` property specifies the mouse cursor to be displayed when pointing over an element.
```css
.alias {cursor: alias;}  
.all-scroll {cursor: all-scroll;}  
.auto {cursor: auto;}  
.cell {cursor: cell;}  
.col-resize {cursor: col-resize;}  
.context-menu {cursor: context-menu;}  
.copy {cursor: copy;}  
.crosshair {cursor: crosshair;}  
.default {cursor: default;}  
.e-resize {cursor: e-resize;}  
.ew-resize {cursor: ew-resize;}  
.grab {cursor: grab;}  
.grabbing {cursor: grabbing;}  
.help {cursor: help;}  
.move {cursor: move;}  
.n-resize {cursor: n-resize;}  
.ne-resize {cursor: ne-resize;}  
.nesw-resize {cursor: nesw-resize;}  
.ns-resize {cursor: ns-resize;}  
.nw-resize {cursor: nw-resize;}  
.nwse-resize {cursor: nwse-resize;}  
.no-drop {cursor: no-drop;}  
.none {cursor: none;}  
.not-allowed {cursor: not-allowed;}  
.pointer {cursor: pointer;}  
.progress {cursor: progress;}  
.row-resize {cursor: row-resize;}  
.s-resize {cursor: s-resize;}  
.se-resize {cursor: se-resize;}  
.sw-resize {cursor: sw-resize;}  
.text {cursor: text;}  
.url {cursor: url(myBall.cur),auto;}  
.w-resize {cursor: w-resize;}  
.wait {cursor: wait;}  
.zoom-in {cursor: zoom-in;}  
.zoom-out {cursor: zoom-out;}
```

The `rotate` property allows you to rotate elements.
```css
div {rotate: 30deg;}
```

The `scale` property allows you to change the size of elements.
```css
div {scale: 2;}
```

The `translate` property allows you to change the position of elements.
```css
div {translate: 100px 20px;}
```