css3 Icon Logo
me@grafxflow

Written by me@grafxflow

23 Sep, 2009

0

2,150

CSS the Basics

Thought I would put a few basics of CSS on the blog for beginners...

NAME

DESCRIPTION

USAGE

span

An inline tag which inserts a style inside a another tag such as a <p>

<p>Here is some
<span style="font-weight: bold">Bold</span>
text.</p>

p

CSS to set paragraph tag <p>

p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 120%;
}

body

CSS to set body tag <body>

body {
background-color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #0F0;
}

h1, h2, h2 etc

CSS to set header tags <h1> or <h2> or <h3> etc

h1 {
font-family: "MS Serif", "New York", serif;
font-size: 12px;
line-height: 140%;
}

div

A block level tag which sets the style of a group of tags such as <h1> and <p>

<div style="color: #F00">
<h1>Header</h1>
<p>Here is some text</p>
</div>

.classname

A class selector which sets the style of a tag such as <h1> and <p>

.first_para {
text-indent: 5em;
}

<p class="first_para">Here is some text.</p>

tag.classname

Same as above except more specific

p.first_para {
text-indent: 5em;
}

<p class="first_para">Here is some text.</p>

tag#idname

An ID selector which is the same as above except it can only be used once

h1#first_header {
text-indent: 5em;
}

<h1 id="first_header">Here is a header.</h1>

CSS Positioning

NAME

DESCRIPTION

USAGE

Absolute positioning

Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

*note needs a outer/container block such as a relative position to work correctly

#page {
position: absolute;
}

Relative positioning

Positioning an element relatively places the element in the normal flow of your HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

#page {
position: relative;
}

Fixed positioning

Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements.

Furthermore, an element that is positioned with a fixed value, will not scroll with the document. It will remain in its position regardless of the scroll position of the page.
*note IE6 (Internet Explorer 6) does not support the fixed value for the positioning of an element.

#page {
position: fixed;
}

Float property for positioning

The float property specifies whether or not a box (an element) should float.

*note Absolutely positioned elements ignores the float property

img {
float:right;
}

Visitors also read these Articles

Add comment

Smart Search

133 Following
50 Followers

me@grafxflow

Hull, United Kingdom

I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Follow