CSS Reference

CSS is short for Cascading Style Sheets - words that strike fear into even the most experienced programmer's hearts. Behind the intimidating front of cryptic code and crafty syntax, is, in fact, a simple, effective code, that you can learn reasonably quickly. CSS defines how to display HTML elements, so your browser knows how to make a website look attractive and stylish. No website is complete without an appealing interface and user experience, and so CSS can make-or-break a site.

 

The original HTML was never designed to tell the browser how to display the web pages, only the content. CSS was added in HTML 4.0 to let browsers display web pages with a modern, attractive, and highly customisable feel to them.

 

With this handy reference, we'll show you the most important properties you'll use in CSS, helping you get the job done faster and more effectively.

 

Overview

 

The basic principle of CSS allows the designer to define a style: a list of formatting properties, like size, colour and font. CSS code is usually stored in .css files. By using external files, you can reference these in your HTML code, and change the look of an entire site easily. CSS is a powerful way of customising appearance.

 

CSS Areas

  

CSS works using several different areas:

 

cssareas.jpg

 

  • The Visible Area is what is shown in the web browser
  • Width is the size of the visible area horizontally
  • Height is the size of the visible area vertically
  • Margin defines how far from the edge of the page an item is
  • Padding defines how far inset an item is, for example text being inset a short distance from the inside of a text box
  • Border sets the outline of the element on the page, for example, a 2-pixel width will surround an object

 

These 6 CSS areas help you adjust the positions, sizes and contents of CSS areas in your page. The areas are also known as the ‘Box Model'.

 

Positioning

  

There are 13 different positioning keywords, to help you adjust the positions of elements on your page:

 

  • Display
  • Position
  • Top
  • Right
  • Bottom
  • Left
  • Float
  • Clear
  • Z-index
  • Direction
  • Overflow
  • Clip
  • Visibility

 

Use these to adjust the positions of items on your page. For example, setting top:-5px will move the top of an element 5 pixels above its relative location.

 

Dimensions

  

  • Width
  • Height
  • Min-width
  • Max-width
  • Min-height
  • Max-height
  • Vertical-align

 

The dimensions properties let you set sizes for elements, such as images or text boxes.

 

Text

 

  • Text-indent
  • Text-align
  • Text-decoration
  • Text-shadow
  • Text-transform
  • Letter-spacing
  • Word-spacing
  • White-space
  • Line-height

 

The text properties let you specify ways of adjusting text. You can indent, align, transform and adjusts heights of text easily using these properties.

 

Fonts

  

  • Font
  • Font-family
  • Font-style
  • Font-variant
  • Font-weight
  • Font-stretch
  • Font-size
  • Font-size-adjust

 

The font codes let you adjust the properties of whatever font you decide to use (when called with font: or font-family: ).

 

Boxes

 

  • Margin
  • Margin-top
  • Margin-right
  • Margin-bottom
  • Margin-left
  • Padding
  • Padding-top
  • Padding-right
  • Padding-bottom
  • Padding-left
  • Border
  • Border-top
  • Border-bottom
  • Border-right
  • Border-left
  • Border-color
  • Border-top-color
  • Border-right-color
  • Border-bottom-color
  • Border-style
  • Border-top-style
  • Border-right-style
  • Border-bottom-style
  • Border-left-style
  • Border-width
  • Border-top-width
  • Border-right-width
  • Border-bottom-width
  • Border-left-width

 

These properties allow you to draw boxes and create different four-sided shapes.

 

Tables

 

  • Caption-side
  • Table-layout
  • Border-collapse
  • Border-spacing
  • Empty-cells
  • Speak-header

 

Tables are useful for displaying tabular data, and positioning items around the page in a structured way.

 

Paging

  

  • Size
  • Marks
  • Page-break-before
  • Page-break-after
  • Page-break-inside
  • Page
  • Orphans
  • Widows

 

Page breaks allow for new pages to be added without excess line breaks filling in the space, and distorting design.

 

Interface

 

  • Cursor
  • Outline
  • Outline-width
  • Outline-style
  • Outline-color

 

Adjust the interface and design of your page by using the interface properties.

 

Selectors

 

Control your code with the following selectors:

 

  • *                      (All elements)
  • Div                  (<div>)
  • Div *               (All elements within <div>)
  • Div span          (<span> within <div>)
  • Div, span         (<div> and <span>)
  • Div > span       (<span> with parent <div>)
  • Div + span       (<span> preceded by <div>)
  • .class                (Elements of class "class")
  • Div.class          (<div> of class "class")
  • #itemid            (Element of id "itemid")
  • Div #itemid     (<div> with id "itemid")
  • A[attr]             (<a> with attribute "attr")
  • A[attr='x']      (<a> when "attr" is "x")
  • A[class~='x']  (<a> when class is a list containing "x")
  • A[lang|='en']   (<a> when lang begins "en")

 

Pseudo-Selectors and Pseudo-Classes

  

  • :first-child       (First child element)
  • :first-line          (First line of element)
  • :first-letter       (First letter of element)
  • :hover              (Element with mouse over)
  • :active              (Active element)
  • :focus              (Element with focus)
  • :link                 (Unvisited links)
  • :visited                        (Visited links)
  • :lang(var)         (Element with language "var")
  • :before             (Before element)
  • :after                (After element)

 

Sizes & Colours

 

  • 0                      (Requires no unit)

  

RELATIVE SIZES

  • Em                   (1em equal to font size of parent (same as 100%))
  • Ex                    (Height of lower case ‘x')
  • %                     (Percentage)

 

ABSOLUTE SIZES

  • Px                    (Pixels)
  • Cm                  (Centimeters)
  • Mm                  (Millimeters)
  • In                     (Inches)
  • Pt                     (1pt = 1/72 inch)
  • Pc                    (1pc = 12pt)

  

COLOURS

  • #789abc           (RGB Hex Notation)
  • #acf                 (Equates to #aaccff)
  • Rgb(0,25,50)   (Value of Red, Green and Blue)