All posts tagged ‘cheat sheet’

File Under: Cheat Sheets, CSS

CSS Properties


Name of
Property
Rule syntax

Possible values
font-family <selector> {font-family:<value>} <family-name> (specify) or <generic-family> [serif, sans-serif, cursive, fantasy, monospace]


font-style <selector> {font-style:<value>} normal, italic

font-weight <selector> {font-weight:<value>} normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900


font-size <selector> {font-size:<value>} <absolute-size>, <relative-size>, <length>, <percentage>


font $
<selector> {font:<value>} , , ,

Color and Background
Name of
Property
Rule syntax Possible values

color <selector> {color:<value>}

<color>


background-color <selector> {background-color:<value>}

<color>


background-image <selector> {background-image:url(<value>)} URL (relative or absolute path)

background $
<selector>{background:<value>} <background-color> (i.e., <color>)

Text properties
Name of
Property
Rule syntax Possible values

Text-decoration <selector>{text-decoration:<value>} underline, line-through

text-transform <selector>{text-transform:<value>} capitalize, uppercase, lowercase, none

text-align <selector>{text-align:<value>} left, right, center, justify

text-indent <selector>{text-indent:<value>} <length>, <percentage>
Box properties

Name of
Property
Rule syntax Possible values
margin $

<selector>{margin:<value>} <length>, <percentage>, auto(sequence:t r b l)

margin-top

<selector>{margin-top:<value>} <length>, <percentage>, auto

Margin-right

<selector>{margin-right:<value>} <length>, <percentage>, auto

margin-bottom

<selector>{margin-bottom:<value>} <length>, <percentage>, auto

margin-left <selector>{margin-left:<value>} <length>, <percentage>, auto

padding $
<selector>{padding:<value>} <length>, <percentage>, (sequence:t r b l)

padding-top
<selector>{padding-top:<value>} <length>, <percentage>


padding-right
<selector>{padding-right:<value>} <length>, <percentage>


padding-bottom
<selector>{padding-bottom:<value>} <length>, <percentage>


padding-left
<selector>{padding-left:<value>} <length>, <percentage>


border-color
<selector>{border-color:<value>} <color>


border-style
<selector>{border-style:<value>} solid, double, groove, ridge, inset, outset


border $
<selector>{border:<value>} <border-width>, <border-style>, <color>

Block-level and Replaced Elements
width <selector>{width:<value>} <length>, <percentage>, auto


height <selector>{height:<value>} <length>, auto

float <selector>{float:<value>} left, right

clear <selector>{clear:<value>} none, left, right
Position (CSS – P)
Name of
Property
Rule syntax Possible values
position <selector>{position:<value>} absolute, relative

top

<selector>{top:<value>} <length>, <percentage>, auto

left

<selector>{left:<value>} <length>, <percentage>, auto

visibility

<selector>{visibility:<value>} hidden, visible, inherit

z-index <selector>{z-index:<value>}

<number>, auto

overflow <selector>{overflow:<value>} visible, hidden, auto


$ = Shorthand Property

File Under: Cheat Sheets, CSS

CSS Attributes

Class and ID

Classes let you create grouping schemes among styled HTML tags by adding the style definition of a particular class to the style definitions of several different tags. In the stylesheet, a class name is preceded by a period (.) to identify it as such:

	.foo {property 1:value 1; property 2:value 2} 

A very simple example:

	<style>

    P {font-family:sans-serif; font-size:10pt}
    H1 {font-family:serif; font-size:30pt}
    H2 {font-family:serif; font-size:24pt}
    .red {color:red}
    .green {color:green}
    .blue {color:blue}

    </style> 

The tags and classes can then be used in combination:

	<h1 class="red">This is rendered as 30-point red serif text.</h1>
	<p class="red">This is rendered as 10-point red sans-serif text.</p> 

Or not:

	<p>This is rendered as 10-point sans-serif text in the default color.</p> 

The ID attribute is used for a uniquely defined style within a stylesheet. In the stylesheet, an ID name is preceded by a hash mark (#) to identify it as such:

	#foo {property 1:value 1; property 2:value 2}
	<h2 id="foo">Text rendered in the foo style.<h2> 

Text-Level Attributes:<SPAN> and <DIV>

The <span> tag is generally used to apply a style to inline text:

	<p>This text is rendered as foo-style and this is not. 

The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements:

    <div class="foo">
    <p>The "foo" style will be applied to this text, and to <a href="page.html">this text</a> as well.
    </div> 

The style attribute provides a way to define a style for a single instance of an element:

<p style="font-size:10pt; color:red">This text is rendered as red, 10-point type</p>

The class, ID, and style attributed can be applied within the <span> and <div> elements. Used with class or ID, the <span> and <div> tags work like customized HTML tags, letting you define logical containers and apply a style to their contents.

File Under: Cheat Sheets, CSS

CSS Units of Measure

Throughout this CSS reference guide, abstract values (notably values involving units of measure) appear between angle brackets:<color>. They should be replaced by actual values as indicated in the key below.

Length Units

<length> indicates a number followed by a unit of measure:24px.

The number can be an integer or a decimal fraction, and can be preceded by + or -.

Units can be absolute or relative:

Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas)

Relative: em, ex, px (the element’s font height, the element’s x-height, pixels)

Font size may be defined in points, pixels, inches, or centimeters (pt, px, in, cm) or as a percentage.

<absolute-size> can be:xx-small, x-small, small, medium, large, x-large, xx-large.

<relative-size> can be:larger, smaller.

Percentage Units

<percentage> indicates a number followed by a % sign:50%.

In the text-indent, margin, padding, and width properties, percentage values are relative to the width of the parent element.

In the font-size property, percentage values are relative to the font size of the parent element.

In <color> values, percentages can be used to express RGB values.

Color Units

<color> can represent either <color-name> or <rgb> values, as defined below:

<color-name> can be: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

<rgb> can be:

#<hex><hex><hex>

rgb(<number>, <number>, <number>)

rgb(<percentage>,<percentage>,<percentage>)

<hex> represents a hexidecimal value, <number> a decimal value, and <percentage> a percentage.

File Under: Cheat Sheets, CSS

Linking Stylesheets

Local (inline) stylesheet declarations, specific to a single instance on a page, can be used instead of <font> tags to specify font size, color, and typeface and to define margins, leading, etc.

<p style="font size:small; color:red; font-weight:bold; 
font-family:Arial, Helvetica, non-serif">
This is a local stylesheet declaration. 
</p> 

Global (embedded) stylesheet declarations, applicable to an entire document, are defined within the <style> and </style> tags, which precede the <body> tag in the HTML document and are usually placed in the header.

To embed a global stylesheet in your HTML document:

<html>
    <head>
    <title>Title</title>
    <style type="text/css">
    <!--
    [STYLE INFORMATION GOES HERE]
    -->

    </style>
    </head>
    <body>
    [DOCUMENT BODY GOES HERE]
    </body>
    </html>

Linked stylesheet declarations use a single stylesheet (in a separate file, saved with the .css suffix) to define multiple pages. A typical .css file is a text file containing style rules, as here:

P {font-family:non-serif; font-size:medium; color:red}
H1 {font-family:serif; font-size:x-large; color:green}
H2 {font-family:serif; font-size:large; color:blue}

To apply a .css stylesheet (“style.css” in the example below) to an HTML page, a <link> tag is added to the page header:

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

Inheritance

In cases where local, global, and linked style definitions conflict, the most specific stylesheet will generally take precedence:local overrides global, global overrides linked. Similarly, inline style attributes override ID, ID overrides class, and class overrides stylesheet-defined HTML elements.

File Under: Cheat Sheets, CSS

How CSS Works

CSS overrides the browser’s default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag (including the <p> tag) to apply style attributes defined either locally or in a stylesheet.

Stylesheets contain rules, composed of selectors and declarations that define how styles will be applied. The selector (a redefined HTML element, class name, or ID name) is the link between the HTML document and the style. There are two different kinds of selectors:types (HTML element tags) and attributes (such as class and ID names).

A CSS declaration has two parts,

a property ("color") and a value ("red"). 

The basic syntax of a rule

selector {property 1:value 1; property 2:value 2} " 

An example (containing two declarations, as above)

P {font-size:8pt; color:red}

CSS is not picky about whitespace, linebreaks, or extra semi-colons, so you can format complex CSS files to make them more manageable;

P {
   font-size: 8pt; 
   color: red;
}

In addition, you can apply the same style rules to more than one element simultaneously by comma-separating them;

H1, H2, H3 {
   font-size: 8pt; 
   color: red;
}