418 lines
No EOL
10 KiB
Markdown
418 lines
No EOL
10 KiB
Markdown
---
|
|
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;}
|
|
``` |