Starting out with CSS

First off we need to decide how we are going to call our CSS. There are 3 ways to integrate CSS into a HTML file:

  1. Inline
  2. Embed
  3. External

To find out more about integrating CSS click here

My personal preference is to keep all CSS styling in one place: the external style sheet.

Setting up the HTML

Now that we have decided how we are going to integrate the styling into the HTML file we have to set-up the HTML file to pull in the style sheet.

We have 2 main methods to call the style sheet:

  1. Link href
  2. @import

Method 1: link href

Click for (X)HTML Code
Open or Close Box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head>
<title>External CSS Stylesheet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
</html>

Method 2: @import

Click for (X)HTML Code
Open or Close Box
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head>
<title>External CSS Stylesheet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("styles.css");
</style>
</head>
<body>
</html>

Setting up the style sheet

Now that we have told the HTML file where to find the stylesheet we have to set out our default styling. All elements have default settings which are set by the individual browser style sheets.

Everyone who uses CSS have their own method of setting CSS defaults. The following method is a recognised method created by Eric Meyer.

To override the defaults we set up our stylesheet with the following CSS code:

Click for CSS Code
Open or Close Box
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

/* remember to define focus styles! */
:focus{
outline:0;
}

body{
line-height:1;
color: black;
background:white;
}

ol, ul{
list-style:none;
}

/* tables still need 'cellspacing="0"' in the markup */
table{
border-collapse:separate;
border-spacing:0;
}

caption, th, td{
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after{
content: "";
}

blockquote, q{
quotes: "" "";
}

Read more about setting or overriding UA default styling

Now that the initial values and sources have been configured we can go onto programming our project.

Sponsor Banners
Sponsored Ads
RSS Feed

RSS Feed

Support Free CSS

Why Support Free CSS ?