Laurainda's CSS Reference

Selectors

Universal Selector

* {
  text-align: center;
}

Select all HTML elements on the page.

Element Selector

p {
  text-align: center;
}

Select HTML element based on HTML element name.

Class Selector

.class_name {
  text-align: center;
}
p.class_name {
  text-align: center;
}

Select HTML element with class "class_name". Can also specified specific HTML element be selected as in the second example.

ID Selector

#ID_name {
  text-align: center;
}

Select HTML element with ID "ID_name". ID are unique within a page and cannot start with a number.

Grouping Selector

h1, h2, p {
  text-align: center;
}

To group selectors, separate each with a comma.

Text properties

Word spacing

p {
  word-spacing: 0.4em;
}

Defines an additional amount of space between words. Negative values are allowed.

Letter Spacing

p {
  letter-spacing: 0.1em;
}

Defines an additional amount of space between characters. Negative values are allowed.

Text Decoration

a:link {
  text-decoration: none;
}

Allow text to be decorated through the following properties: underline, overline, line-through, blink, none.

Vertical Align

img {
  vertical-align: middle;
}

Alter the vertical alignment of an inline element. Common values are: top, bottom, middle, sub, super

Text Transform

p {
  text-transform: uppercase;
}

Changing capitalization of words with: capitalize, uppercase, lowercase

Text align

p {
  text-align: justify;
}

Align text with: left, center, right, justify

Text indent

p {
  text-indent: 3em;
}

Specify the amount of indentation of the first line of text.

Line Height

p {
  line-height: 150%;
}

Spcify the spacing between baselines of text.

Box Properties

Margin

.box1 {
  margin: 1px 2px 3px 0;
}

Margin creates space around elements, outside of defined borders. Shorthand define: top, right, bottom, left. Can set margin to auto for horizontally centering element within its container.

Padding

.box1 {
  padding: 1px 2px 3px 0;
}

Padding creates space around elements, inside of defined borders. Shorthand define: top, right, bottom, left.

Border

p {
  border: 2px dotted red;
  border-radius: 10px;
}

Spcify the width, style, colour of border. Shorthand: width, style, colour. Use with "border-radius" to create rounded borders.

Float

img  {
  float: left;
}

Specify whether an element should float left, right or none. Elements next to floating elements float around it. Use "clear" to modify next element. Absolutely positioned elements ignore the float property.

Clear

p {
  clear: left;
}

Specify whether an element allows floating element to its sides. Value: left, right, none. For example, "clear: left" would make an element goes below a floated left element.