Design Post Update

CSS positioning is a lot more advanced than just top, middle or bottom!

CSS Positioning

With CSS positioning, you can place an element exactly where you want it on your page. Together with floats, positioning gives you many possibilities to create an advanced and precise layout. To help us understand imagine a browser window as a system of coordinates, as in the image below.

Browser window screen coordinates for use with CSS Positioning

The principle behind CSS positioning is that you can position any box anywhere in the system of coordinates. Let's say we want to position a headline. By using the box model we can make a headline appear as follows...


If we want this headline positioned 100px from the top of the document and 200px from the left of the document, we could type the following in our CSS:

h1 {position: absolute; top: 100px; left: 200px; }

The result will be as follows...

CSS Positioning

As you can see, positioning with CSS is a very precise technique to place elements.

Note: The element is positioned from its top left corner.

Absolute or Relative Positioning

There are two types of positioning, absolute and relative. In the sample above we used absolute positioning . An element which is positioned absolute does not obtain any space in the document, which means that it does not leave an empty space after being positioned. To position an element absolutely, the position property is set as absolute. You can subsequently use the properties left, right, top, and bottom to place the box. As an example of absolute positioning, the CSS code below would place 4 boxes in each corner of the browser window.

#box1 {position: absolute; top: 50px;left: 50px;} #box2 {position: absolute; top: 50px; right: 50px;} #box3 {position: absolute; bottom: 50px; right: 50px;} #box4 {position: absolute; bottom: 50px; left: 50px;}

The difference between absolute and relative positioning is that for an element which is relatively positioned the position is calculated from the original position of the element in the document.

To position an element relatively, the property position is set as relative. That means that you move the element to the right, left, up or down. This way, the element still obtains a space in the document after it is positioned. An example code is shown below...

#dog1 {position: relative; left: 35px; bottom: 15px; }

Tip: When using positioning it is recommended that you use either all absolute positioning or all relative positioning, mixing the two types can lead to problems, especially when the page is being viewed in different browsers. In my opinion it is best to use relative positioning, but don't just trust me try it out for yourself.

CSS layering with z-index

CSS operates in three dimensions, height, width and depth. In this lesson, we will learn how to let different elements become layers. This means we will be able to let elements overlap one another. To do that, you can assign each element a number using the CSS property z-index. The element with a higher number overlaps on top of an element with a lower number. Let us say we are playing poker and have a royal flush. Our hand can be presented in a way where each card has got a z-index:
#ten_of_diamonds {position: absolute; left: 100px; bottom: 100px; z-index: 1;} #jack_of_diamonds {position: absolute; left: 115px; bottom: 115px; z-index: 2;} #queen_of_diamonds {position: absolute; left: 130px; bottom: 130px; z-index: 3;} #king_of_diamonds {position: absolute; left: 145px; bottom: 145px; z-index: 4;} #ace_of_diamonds {position: absolute; left: 160px; bottom: 160px; z-index: 5;}
The CSS code in the  example above would result in something like this...

CSS layering with z-index

Next Up

The basic principles of CSS floating are displayed in this simple diagram

Floating elements with CSS

Any HTML element or <div> block can be floated to the right or to left by using the property float. That is to say that the <div> block or element, including its contents, either floats to the right or to the left in a document (or another containing box). The content which follows will fill the gap left behind. Float can be set as either left, right or none. The following figure illustrates the general principle in a little more detail than the on above.

CSS float in action

If, for example, we would like to have text wrapping around a picture we could float the image to the left and the following content would fill the gap (thus wrapping around it). The result would be like this...

CSS float example

The HTML code for the example above, look as follows:

<div id="picture"> <img src="images/bill.jpg" alt="Bill Gates"> </div><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

To get the picture floating to the left and the text to surround it, you only have to define the width of the box which surrounds the picture, so none of the image is cut off, and then set the property float to left:

#picture { float: left; width: 100px;}

Floats can also be used to create columns in a document. To create two columns, you simply have to structure the desired columns in the HTML code with <div> as follows.

<div id="column1"><p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p></div><div id="column2"><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p></div>

Now the desired width of the columns is set to 50%, and then you simply float each column to the left by defining the property float. Try it out for yourself.

#column1 {float: left; width: 50%;} #column2 {float: left; width: 50%;}

Clear (Stop filling after floating)

The clear property is used to control how the elements following floated elements in a document behave. By default, the subsequent elements are moved up to fill the available space which will be freed up when a box is floated to the side. The property clear can assume the values left, right, both or none. The principle is, if clear, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above. In other words, it won't fill the gap left behind.


<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div><h1>Bill Gates</h1><p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

To avoid the text from floating up to fill the gap and sit next to the picture, we can add the following CSS, Try it out for yourself.

#picture {float: left; width: 100px; } div.floatstop {clear: both;}

Next Up

Floats are useful in many situations and will often be used together with positioning. In the next section we will take a closer look at how to position html elements using CSS. There are two main types of positioning, relative and absolute, both are explained.

CSS Padding, Borders and Margin

Margin and Padding:

Now let's look at how you can use your knowledge of the box model to change the presentation of elements by setting the margin and padding properties as shown in the above example.

An element has four sides: right, left, top and bottom. 
The margin is the distance from each side to the neighbouring element or the outer borders of the document. As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

CSS Margins

The CSS code for the above page would look like this,

body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;}

Or, like background and font, you could compile the CSS code using just margin. Margin recognises the values in the order top, right, bottom, left.
body {margin: 100px 40px 10px 70px;}

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:

p {margin: 5px 50px 5px 50px;}

Padding can also be understood as 'filling'. This makes sense as padding does not directly affect the distance of the element to other elements but rather defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colours. By defining padding for the headlines, you change how much filling there will be around the text in each headline. Try out the code below yourself and see what it looks like.

h1 {background: yellow; padding: 20px 20px 20px 80px;} h2 {background: orange; padding-left:120px;}

Borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

border-color

CSS Borders

CSS Border Styles

class and id work together with div and span to help you make the most of your CSS

This section on CSS actually focuses on the use of HTML attributes 'class' and 'id' and the HTML elements <div> and <span>. These are very important if you are to use CSS effectively as they hold the key to giving you complete control over every aspect of your website.

Class

Sometimes you want to apply a special style to a particular element or a particular group of elements and yet not every single element of that type! Confused? Don't be. Let's say that we have two lists of links to different grapes used for white wine and red wine. The HTML code could look like this:

<p>Grapes for white wine:</p><ul><li><a href="ri.htm">Riesling</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="pb.htm">Pinot Blanc</a></li></ul><p>Grapes for red wine:</p><ul><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="me.htm">Merlot</a></li><li><a href="pn.htm">Pinot Noir</a></li></ul>

What if we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue? To achieve this, we first need to divide the links into two categories using the HTML attribute 'class'.

So we assign a class to each link using the HTML attribute class. We use class instead of id as class is used for multiple or group effects while id is used for single or individual effects. Let us try to specify some HTML classes from the example above:

<p>Grapes for white wine:</p><ul><li><a href="ri.htm" class="whitewine">Riesling</a></li><li><a href="ch.htm" class="whitewine">Chardonnay</a></li><li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li></ul>

<p>Grapes for red wine:</p><ul><li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li><li><a href="me.htm" class="redwine">Merlot</a></li><li><a href="pn.htm" class="redwine">Pinot Noir</a></li></ul>

We can then define special properties for links belonging to white wine and red wine, respectively by using .classname after the element it was used on (in this case 'a') in the style sheet of the document.

a {color: blue;} a.whitewine {color: #FFBB00;} a.redwine {color: #800000;}

The above CSS code combined with the HTML shown earlier will result in the following...

This is a normal link

Grapes for white wine:

• Riesling
• Chardonnay
• Pinot Blanc

Grapes for white wine:

• Riesling
• Chardonnay
• Pinot Blanc

Id

In addition to grouping elements with class, you might need to identify one unique element. This is done by using the attribute id. What is special about the attribute id is that there cannot be two elements in the same document with the same id. Each id has to be unique. Now, let us take a look at an example of a possible usage of id:

<h1>Chapter 1</h1>... <h2>Chapter 1.1</h2>... <h1>Chapter 2</h1>... <h2>Chapter 2.1</h2>...

The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an id to each chapter as follows:

<h1 id="c1">Chapter 1</h1>... <h2 id="c1-1">Chapter 1.1</h2>... <h1 id="c2">Chapter 2</h1>... <h2 id="c2-1">Chapter 2.1</h2>...

Let us say that the headline for chapter 1.1 must be in red. As shown in the example below you must define the properties in a specific element by using #id in the stylesheet of the document.

#c1-1 {color: red;}

The above CSS combined with the previous HTML would result in something like the following...

Chapter 1

Chapter 1.1

Chapter 2

Chapter 2.1

Div and Span

The HTML elements <span> and <div> are used to group and structure a document and are usually used together with the attributes class and id. The difference between div and span is that <span> is used within an element (inline) while <div> is used to group one or more elements (block-level).

Span

In My Honest Opinion, <span> is not the most useful of elements as it is only used inline so it is often easier to use basic HTML code to format the part of the element (usually text within a paragraph) that you want to edit. However, with my little rant over, let's look at an example of <span> in use. Let's take a famous Benjamin Franklin phrase.

<p>Early to bed and early to rise makes a man healthy, wealthy and wise.</p>

Let's say we want what Mr Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then added a class, which we can define in our style sheet:

<p>Early to bed and early to rise makes a man <span class="benefit">healthy</span>, <span class="benefit">wealthy</span> and <span class="benefit">wise</span>.</p>

In order to make those tagged words red then the CSS code would simply be...

span.benefit {color:red;}

The result would be....

Early to bed and early to rise makes a man healthy, wealthy and wise.

As mentioned earlier this is a bit long-winded for something that could have been done using the HTML <font color='red'>. Anyway not to worry, as you probably won't be using <span> too often. One element you definitely will be using though is <div>, so let's look at how it is used.

Div

As mentioned earlier while <span> is used within a block-level element, <div> is used to group one or more block-level elements. Aside from this difference, the grouping with <div> works in the same way. Let us take a look at an example with two lists of relatively recent U.S. presidents divided into their political affiliations:

<div id="democrats"><ul><li>John F. Kennedy</li><li>Lyndon B. Johnson</li><li>Jimmy Carter</li><li>Bill Clinton</li><li> Barack Obama</li></ul></div>

<div id="republicans"><ul><li>Richard Nixon</li><li>Gerald Ford</li><li>Ronald Reagan</li><li>George Bush</li><li>George W. Bush</li></ul></div>

And in our style sheet, we can utilize the grouping in the exact same way as above:

#democrats {background:blue;} #republicans {background:red;}

The above CSS code combined with the previous HTML would result in something like this...

• John F. Kennedy
• Lyndon B. Johnson
• Jimmy Carter
• Bill Clinton
• Barack Obama

• Richard Nixon
• Gerald Ford
• Ronald Reagan
• George Bush
• George W. Bush

These examples for <div> and <span> are very basic and are only intended to show you how to link the HTML elements with the associated CSS code. We will now look at the 'box model' which, when used with <div> and <span> and class and id, will really open up your design and layout possibilities with CSS.

Next Up

In the next lesson we look at the CSS Box Model which explains the details of how each HTML element is structures.

CSS LInks

You can apply the CSS that you already learned to links in order to change their backgrounds, colours, fonts, text style, etc. What we will learn in this lesson is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link (hover). This makes it possible to add useful effects to help visitors navigate your website more easily. To control these effects you use what is called a CSS pseudo-class.

Links and pseudo-classes

A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag. As you know, links are specified in HTML with <a> tags. We can therefore use 'a' as a selector for links in CSS. A basic example like the one seen below, simply changes the colour of all links to blue.

a {color: blue;}

The css code above would result in something like this (provided the HTML is already in place)

This is a link

Unlike different elements, links can have different states. It can be visited or not visited. You can use pseudo-classes to assign different styles to links. Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link. See the example CSS code below.

a:link {color: #6699CC;} a:visited {color: #660099;} a:active {background-color: #FFFF00;} a:hover {color: orange; font-style: italic;}

It is particularly popular to create different effects when the cursor is over a link. We will therefore look at a few extra examples related to the pseudo-class :hover.

CSS a:hover example 1:

a:hover {letter-spacing: 10px; font-weight:bold; color:red;}

When hovered over, the CSS code above will change your links from...

This is a link

to

This is a link

CSS a:hover example 2:

a:hover{text-transform: uppercase; font-weight:bold; color:green; background-color:yellow;}

When hovered over, the CSS code above will change your links from...

This is a link

to

This is a link

The two CSS link a:hover examples give you an idea about the various possibilities for combining different properties. You should now try to create your own effects.

Next Up

In the next lesson we will learn the basics of using the HTML elements div and span along with the HTML attributes class and id to give you more control over editing your website with CSS.

There are so many fonts to choose from but choose carefully as they have a huge impact on your websites success

Formatting Fonts With CSS

In this lesson you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be explained...

• font-family

• font-style

• font-variant

• font-weight

• font-size

• font

font-family 

The property font-family is used to set a prioritized list of fonts to be used to display a given element such as <p> or <h1>. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.
There are two types of names used to categorize fonts: family-names and generic families.

• Family-name: Examples of a family-name (often known as "font") can e.g. be "Arial", "Agency", 'Verdana'.

• Generic family: Generic families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is Latin for 'without feet'.

The difference can also be illustrated like this...



When you list fonts for your web site, you should start with the most preferred font followed by some alternative fonts. It is recommended to complete the list with a generic font family so at least the page will be shown using a font of the same family if none of the specified fonts are available.An example of a prioritized list of fonts could is seen:

p {font-family: arial, verdana, sans-serif;} h1 {font-family: "Times New Roman", serif;}

In the sample code above, text marked as paragraphs will be displayed using the font "Arial". If this font is not installed on the user's computer, "Verdana" will be used instead. If both these fonts are unavailable, a font from the sans-serif family will be used. Notice how the font name "Times New Roman" contains spaces and therefore is listed using quotation marks.

font-style 

The property font-style defines the chosen font in normal, italic or oblique. The default setting is normal. In the example below, all headlines marked with <h2> will be shown in italics.

h2 {font-style: italic;}

font-variant

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. Take a look at these examples:

If font-variant is set to small-caps and no small-caps font is available the browser will show the text in upper-case instead. In the example below all headings marked with <h1> will be shown in small-caps.

h1 {font-variant: small-caps;}

font-weight 

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. In the example below all text marked with <td> (table data) will be shown in bold text.

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

font-size

The size of a font is set by the property font-size. There are many different units to choose from to describe font sizes; we will focus on the most commonly used units. See the examples below.

h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em' allow the user to adjust the font size as he/she see fit.

font (shorthand)

Using the font short hand property, just like background it is possible to cover all the different font properties in one single property. For example, imagine these four lines of code used to describe font-properties for <p>:

p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }

Using the short hand property, the code can be simplified:

p {font: italic bold 30px arial, sans-serif;}

Remember that one of the major advantages of using CSS to specify fonts is that at any given time, you can change font on an entire website in just a few minutes. CSS saves time and makes your life easier.

@font-family

With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts. In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property.

Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!

Defining the font....

@font-face { font-family: myFirstFont; src: url(sansation_light.woff); }  

h1 {font-family: myFirstFont;}  

Next Up

In the next lesson we learn about pseudo-classes and how to use them to create link effects using CSS.

This will be funny once you've learned about CSS Text and Fonts

Formatting Text With CSS

Formatting and adding style to text is a key issue for any web designer. In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be explained:

• text-indent

• text-align

• text-decoration

• letter-spacing

• text-transform

text-indent

The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with <p>:

p {text-indent: 30px;}

The above CSS code will result in all paragraphs being effected like this in the browser...

text-align

The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right or centred or you can justify the text, which will stretch each line so that both the right and left margins are straight. In the examples below the text in table headings <th> is aligned to the right while the table data <td> are centred. In addition, normal text paragraphs are justified.

th{text-align: right;} td {text-align: center;} p {text-align: justify;}

text-decoration

The property text-decoration makes it is possible to add different "decorations" to text.

For example, you can underline the text, have a line through or above the text.

In the following example, <h1> are underlined headlines, <h2> are headlines with a line above the text and <h3> are headlines with a line though the text.

h1 {text-decoration: underline;} h2 {text-decoration: overline;} h3 {text-decoration: line-through;}

letter-spacing

The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used.

h1 {letter-spacing: 6px;} p {letter-spacing: 3px;}

text-transform

The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code. There are four possible values for text-transform...

• Capitalize: Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".

• Uppercase: Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE"

• Lowercase: Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe"

• None: No transformations - the text is presented as it appears in the HTML code.

As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.

h1 {text-transform: uppercase;} li {text-transform: capitalize;}

The CSS Code above will result in this...

THIS IS AN UPPERCASE HEADING

You can use CSS to add any type of background to a web page or web element

In this tutorial we will learn how to apply background colours to your website and parts of your website. We will also look at advanced methods to position and control background images. The following CSS properties will be explained, (note the American spelling of color and not colour is used in these codes).

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
• gradient backgrounds

background-color

The color property describes the foreground colour of an element. For example, imagine that we want all headlines in a document to be red. The headlines are all marked with the HTML element <h1>. The code below sets the colour of <h1> elements to red.

h1 {color: #ff0000;}

Colours can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colours ("red") or (Red, Green, Blue) RGB-values (rgb(255,0,0)).

The background-color property describes the background colour of elements. The element <body> contains all the content of a HTML document so if we want to change the background colour of an entire page, the 'background-color' property should be applied to the <body> element. Note how the two words background and color are joined with a hyphen, this is the case with all CSS properties that are made up of two or three words, they must always be joined with a hyphen.

You can also apply background colours to other elements including headlines and text. In the examples below, different background colours are applied to <body> and <h1> elements.
body {background-color: #FFCC66;} h1 {color: #990000; background-color: #FC9804;}

Notice that we applied two properties to <h1> by dividing them by a semicolon. Just like with HTML, where we could add multiple attributes, we can also add multiple properties in CSS.

background-image

The CSS property background-image is used to insert a background image. To insert an image as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.

body { background-image: url("images/sample.gif");}


body {background-image: url("sample.gif");background-repeat: no-repeat;}

background-attachment

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element. A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page. Below the two different values for background-attachment are explained.

• {Background-attachment: scroll;}  - The image scrolls with the page - unlocked 

• {Background-attachment: fixed;} - The image is locked 

CSS is a style language that defines the layout of HTML documents.

What is CSS?

CSS is an acronym for Cascading Style Sheets. It is a style language that defines the layout of HTML documents. CSS covers fonts, colours, margins, lines, height, width, background images, positioning an d many other things. HTML is often used to add layout to websites, but it is only intended to add content to pages and give the content basic formatting. As the Web gained popularity, designers started looking for possibilities to add layout to online documents. CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers.