CSS Language Guide

From Fishcakes Wiki

CSS Language Guide

This page contains a guide to CSS Markup techniques. Each section contains:

• CSS Syntax.
• Single Declaration Shorthand Form which can be used in the markup of an HTML page.
• CSS Properties Table with the complete list of CSS syntax for each type of CSS call. This includes columns indicating:
  Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
  W3C: The number in the W3C column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

General Information

TRouBLe

When declaring properties you order them Top, Right, Bottom, Left, or TRBL: stay out of TRouBLe by doing it Top Right Bottom Left.

margin: 1px 2px 3px 1px;

Class vs ID

• .class — use the class selector for repeated elements.
• #id — use the id selector for unique elements.

Background Tags

The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.

Background CSS Syntax

/* Set Background Colour */
background-color: yellow;
background-color: #00ff00;
background-color: transparent;
background-color: rgb(250,0,255);
 
/* Background Formatting */
background-image: url('image.jpg');
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-attachment: fixed;

Background Single Declaration Shorthand Form

<p style="background: #00ff00 fixed center; color: red;">
<div style="background-image: url('image.jpg');"></div>

Background Properties

Text Tags

The CSS text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more.

Text CSS Syntax

/* Set Colour */
color: #00ff00;
color: black;
color: rgb(0,0,255);
background-color: yellow;
 
/* Character Space */
letter-spacing: -3px;
letter-spacing: 0.5cm;
 
/* Align Text */
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right
 
/* Decoration */
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
a {text-decoration: blink}
 
/* Indent */
text-indent: 1cm;
 
/* Characters */
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Text Single Declaration Shorthand Form

<p style="text-transform: uppercase; text-align: left">

Text Properties

Font Tags

The CSS font properties allow you to change the font family, boldness, size, and style of a text element. In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font.

Font CSS Syntax

/* Set Font */
font-family: Times, sans-serif;
 
/* Set Size */
font-size: 150%
font-size: xx-small
font-size: 22px
 
/* Set Style */
font-style: italic
font-style: normal
 
/* Set Variant */
font-variant: normal
font-variant: small-caps
 
/* Set Weight */
font-weight: normal
font-weight: bold

/* Browser Supported Sans-Serif fonts */
font-family: sans-serif
font-family: Andale Mono
font-family: Arial
font-family: Arial Black
font-family: Impact
font-family: Trebuchet MS
font-family: Verdana
 
/* Browser Supported Cursive fonts */
font-family: cursive
font-family: Comic Sans MS
 
/* Browser Supported Fantasy fonts */
font-family: fantasy
 
/* Browser Supported Generic Families */
font-family: monospace
font-family: Courier New

See upsdell.com Browser Support Fonts for chart of browser implementation.

Font Single Declaration Shorthand Form

<p style="font: italic small-caps 12px arial">
<p style="font: bold 10px verdana">

Font Properties

Border Tags

The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.

Border CSS Syntax

/* Set Background Colour */
border-style: dotted;
border-color: cyan;
border-right: 1px solid #ffeedd;
border: 2px 1px 0px 10px;

Border Single Declaration Shorthand Form

<p style="border-right: 1px solid #ffeedd;">

Border Radius

Define border radius. Does not work for IE and some other browsers.

Sample CSS:

.all-round ul {
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
}
 
.top-round ul {
  border-top-left-radius:5px;
  -moz-border-radius-topleft:5px;
  -webkit-border-top-left-radius :5px;
  border-top-right-radius:5px;
  -moz-border-radius-topright:5px;
  -webkit-border-top-right-radius:5px;
}

Border Properties

Margin Tags

CSS margin properties define the space around elements. It is possible to use negative values to overlap content (some IE problems with negative values). The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.

Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!

Margin CSS Syntax

/* Set Margins */
margin-left: 2cm;
margin-top: 2cm;
margin: 1px 2cm 3px 4em;

Margin Single Declaration Shorthand Form

<p style="margin: 1cm 2cm 3cm 1cm;">

Margin Properties

Padding Tags

CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once.

Padding CSS Syntax

/* Set Padding */
padding: 10px;
padding: 10px 2px 5px 2px;
padding-bottom: 10px;

Padding Single Declaration Shorthand Form

<p style="padding: 4px;">

Padding Properties

List Tags

CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker. These can be a powerful tool for creating Navigation Menus and are highly recommended for this.

List CSS Syntax

/* Item Markers Unordered */
ul list-style-type: disc
ul list-style-type: circle
ul list-style-type: square
ul list-style-type: none
 
/* Item Markers Ordered */
ol list-style-type: decimal
ol list-style-type: lower-alpha
ol list-style-type: upper-alpha
ol list-style-type: lower-roman
ol list-style-type: upper-roman
 
/* Item Markers Images */
ul list-style-image: url('arrow.gif')
 
/* Item Markers Placement */
ul normal
ul list-style-position: inside
ul list-style-position: outside

List Single Declaration Shorthand Form

<p style="list-style: square inside url('arrow.gif');">

List Properties

Dimension Tags

CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.

Dimension CSS Syntax

/* Set Dimension */
height: 10px;
line-height: 0.6cm;
min-height: 200px;
width: 2.2em;
max-width: 700px;

Dimension Single Declaration Shorthand Form

<p style="line-height: 0.6cm;">

Dimension Properties

Classification Tags

CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.

Classification CSS Syntax

/* Set Classification */
display: inline;
display: none;
display: block;
float: right;
position: absolute;
cursor: crosshair;

Classification Single Declaration Shorthand Form

<p style="display: none;">

See www.w3schools.com CSS Classification for details and examples.

Classification Properties

Positioning Tags

CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.

Positioning CSS Syntax

/* Set Positioning */
position: relative;
clip: rect(0px 50px 200px 0px);
overflow: hidden;
z-index: 1;

Positioning Single Declaration Shorthand Form

<div style="position: relative;"></div>

Positioning Properties

See www.w3schools.com CSS Positioning for details and examples.

Pseudo-Class Tags

CSS pseudo-classes are used to add special effects to some selectors such as adding different colours to a link. Pseudo-class names are not case-sensitive.

Pseudo-Class Syntax

/* Basic syntax */
selector: pseudo-class {property: value};
/* Classes within pseudo-classes */
selector.class: pseudo-class {property: value}
/* Pseudo-classes combined with CSS classes:  */
a.red: visited {color: #FF0000}

Pseudo-Class Hyperlinks (Anchors)

Anchor Pseudo-classes are used to format hyperlinks active, visited, unvisited, or when you mouse over a link can all be displayed in different ways:

• Note: a:hover MUST come after a:link and a:visited.
• Note: a:active MUST come after a:hover.

/* Link classes */
a: link {color: #FF0000}        /* unvisited link */
a: visited {color: #00FF00}     /* visited link */
a: hover {color: #FF00FF}       /* mouse over link */
a: active {color: #0000FF}      /* selected link */

Pseudo-Class First-Child

The :first-child pseudo-class matches a specified element that is the first child of another element.

/* Format all paragraphs*/
p:first-child {text-indent: 25px}
p:first-child em {font-weight: bold}
a:first-child {text-decoration: none}
/* Format div paragraphs only */
div > p:first-child {text-indent: 25px}

Pseudo-Class Languages

The :lang pseudo-class allows you to define special rules for different languages, such as defining the type of quotation marks for elements with a lang attribute.

q:lang(no) {quotes: "~" "~"}

Pseudo-Class Properties

Pseudo-Element Tags

CSS pseudo-elements are used to add special effects to some selectors such as adding an effect to the first letter or first line of text.

Pseudo-Element Syntax

/* Basic syntax */
selector:pseudo-element {property: value}
/* Classes within pseudo-classes */
selector.class:pseudo-element {property: value}
/* Pseudo-elements combined with CSS classes
p.article:first-letter {color: #FF0000} */
/* Several pseudo-elements can be combined */
p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

Pseudo First Line Element

The :first-line pseudo-element can only be used with block-level elements:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}

Pseudo First Letter Element

The :first-letter pseudo-element can only be used with block-level elements.

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if 'float' is 'none')
• text-transform
• line-height
• float
• clear

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}

Pseudo Before & After Elements

The :before pseudo-element can be used to insert some content before an element such as playing a sound before each occurence of a header element. The :after pseudo-element can be used to insert some content after an element.

h1:before {content: url(beep.wav)}
h1:after {content: url(beep.wav)}

Pseudo-Element Properties

Media Type Tags

The @media rule allows different style rules for different media in the same style sheet such as having a printer or pda version.

Media Type CSS Syntax

<style>
  @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} }
  @media print { p.test {font-family:times,serif; font-size:10px} }
  @media screen, print { p.test {font-weight:bold} }
</style>

Media Type Properties

CSS Units

CSS Unit Properties

CSS Colours

CSS colours can be defined in a variety of ways.

Colour Names CSS Syntax

A collection of names supported by most browsers.

background: white;
background: aquamarine;

Colour Hex Values CSS Syntax

Hex codes which make up the RGB value of colours. From #00 (black) to #ff (white).

background: #000000;  /* black */
background: #e0f72a;
background: #ffffff;  /* white */

Colour RGB Values CSS Syntax

• Colour RGB — rgb(255,146,20) — rgb codes from 0 (black) to 255 (white).

background: rbg(255,255,255);

Colour RGB Percentage Values CSS Syntax

• Percentage RBG — rgb(100%,41%,2%) — percentage codes from 0% (black) to 100% (white).

background: rbg(100%,10%,88%);

Colour Properties

Fishcakes Wiki Reference Files

• Fishcakes CSS Language — Fishcakes Wiki Reference File.
• Fishcakes CSS Colours — Fishcakes Wiki Reference File.
• Fishcakes Lovely Colours — Fishcakes Wiki Reference File.

CSS and HTML Resources

General Resources

• local.google.com — Google Supported Browsers, if they support them, so should you.
• opensourcetemplates.org — Open Source Templates for free css and xhtml open source template design. Not much on offer yet.
• oswd.org — Open Source Web Designs download and share free web design templates.

CSS Resources

• jigsaw.w3.org — w3's CSS validator.
• w3schools.com — w3 School's CSS Language Guide.
• css-discuss.incutio.com — CSS Discuss Wiki's excellent guide to using CSS with code examples.
• positioniseverything.net — CSS browser fixes and workarounds.
• wendypeck.com — Wendy Peck's CSS 101 Tutorial with examples.

HTML Resources

• validator.w3.org — w3 XHTML validator.
• w3.org w3's Accessibility Guidelines.
• chami.com — animated favicon generator.
• favicon.co.uk — favicon generator.
• iconlet.com — simple search engine for free icons and images. Exceedingly useful!
• webmonkey.com — WebMonkey Developer's Guide. Exhaustive reference guide for HTML, CSS, Javascript, etc.
• webmonkey.com — WebMonkey HTML Special Characters reference.
• Keywords — generate up to 100 related keywords with estimate of daily search volume.

Scripting Resources

• dhtmlgoodies.com — library of very useful DHTML and Ajax scripts.
• w3schools.com Media Mime Types — list of MIME types supported by MS Internet Information Server.
• anyexample.com — free, tested scripts for PHP, Javascript and CSS.

Templates

• freecsstemplates.org — library of open source HTML and CSS templates.

Fishcakes Wiki Reference Files

These are examples from other sites but archived here as things on the web have a tendency to disappear.

• Creating Scalable Figures — guide to CSS Scaling. Also details HTML includes on page. Fishcakes Wiki Reference File.
• Fishcakes CSS Colours — Fishcakes Wiki Reference File. Fishcakes Wiki Reference File.
• Fishcakes Colours — Fishcakes Wiki Reference File. Fishcakes Wiki Reference File.