/ informatics / language /

[edit]

Definition

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

Syntax: SELECTOR { PROPERTY: VALUE; }

Example CSS

html { font-family: sans-serif; }

body { 
    margin: 0; 
    padding: 1rem 0.5rem 0 0.5rem;  /* t, r, b, l */
}

.container{ 
    margin: auto; 
    max-width: 960px; 
}

Table of Contents

Box Model

All HTML elements can be considered as boxes with:

+------------------------+
|        Margin          |
|   #================#   |
|   §    Padding     §   |
|   §  +----------+  §   |
|   §  | Content  |  §   |
|   §  +----------+  §   |
|   #====Border======#   |
+------------------------+

Selectors

In CSS, selectors match elements to which a style applies.

Pattern Matches CSS
Version
* any element 2
E element of type E, e.g. E=div 1
.c all elements with class="c" 1
#myid the element with id="myid" 1
E.c E element whose class is "c" 1
E#myid E element with id"myid" 1
E F F element somewhere within an E element 1
E > F F element if direct child of an E element 2
E + F F element immediately preceded by an E element 2
E ~ F F element preceded by an E element 3
E[foo] E element with a foo attribute 2
E[foo="bar"] E element with attribute foo="bar" 2
E:link non visited hyperlink E 1
E:active focused element E 1
E::first-line the first formatted line of E 1
E::first-letter the first formatted letter of E 1
E:first-child an E element, first child of its parent 2
E::before generated content before an E element's content 2
E::after generated content after an E element's content 2

Properties

Order for margin and padding: top, right bottom, left

Property Example Values
margin 1em 2em 0em 2em
border 2px solid red
padding 1em 2em
color red
font italic bold 12px Georgia
text-align center, left, right, justify
position static, relative, fixed, absolute, sticky
display none, inline, block, inline-block

Units

Absolute Length
Points (pt) 6pt 12pt
Pixel (px) 8px 16px
Pica (pc) 0.5pc 1.0pc
Inch (in) 1/16 in 1/8 in
Milli Meter (mm)

The Dots per Inch (DPI) refers to the pt per in. The default is DPI=96.

Relative Lengths

Relative Lengths
quad-width em
x-height ex
Viewport width vw
Viewport height vh

References

-->