10 KiB
| source | wiki | obj | mime | extension |
|---|---|---|---|---|
| https://developer.mozilla.org/en-US/docs/Web/CSS | https://en.wikipedia.org/wiki/CSS | format | text/css | 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 or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS can be used inline via the HTML 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:
body {
color: black;
}
Selector
A CSS selector selects the HTML element(s) you want to style.
Tag Selector: Here, all <p> elements on the page will be center-aligned, with a red text color:
p {
text-align: center;
color: red;
}
ID Selector: The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
Class Selector: In this example all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}
Tag+Class Selector: In this example only <p> elements with class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}
All Selector:
* {
text-align: center;
color: blue;
}
Multiple Selector: In this example we have grouped the selectors:
h1, h2, p {
text-align: center;
color: red;
}
Modified Selectors: You can modify selectors to apply based on certain conditions:
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.
/* 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.
body {
background-color: rgb(255, 99, 71);
color: white;
}
a {
color: #ff6347;
}
Backgrounds
You can set a background color:
div {
background-color: rgba(0, 128, 0, 0.3)
}
The background-image property specifies an image to use as the background of an element:
body {
background-image: url("paper.gif");
}
Add a graphical effect to the area behind an element:
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:
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:
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.
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:
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;).
#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).
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).
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 widthlength- Defines the height/width in px, cm, etc.%- Defines the height/width in percent of the containing blockinitial- Sets the height/width to its default valueinherit- The height/width will be inherited from its parent value
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.
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.
h1 { text-align: center; }
h2 { text-align: left; }
h3 { text-align: right; }
The text-decoration property is mostly used to remove underlines from links:
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.
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):
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.
.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.
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:
p.normal { font-weight: normal; }
p.thick { font-weight: bold; }
The font-size property sets the size of the text.
h1 { font-size: 40px; }
h2 { font-size: 30px; }
Display
The display property is the most important CSS property for controlling layout.
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).
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.
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 containerright- The element floats to the right of its containernone- The element does not float (will be displayed just where it occurs in the text). This is defaultinherit- The element inherits the float value of its parent
The opacity property specifies the opacity/transparency of an element.
img {opacity: 0.5;}
The cursor property specifies the mouse cursor to be displayed when pointing over an element.
.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.
div {rotate: 30deg;}
The scale property allows you to change the size of elements.
div {scale: 2;}
The translate property allows you to change the position of elements.
div {translate: 100px 20px;}