Creating CSS cascading style sheets for HTML
Part seven of a seven-part series of blogs

This is the first of a series of 3 tutorials showing how to create and use CSS style sheets for HTML web pages. This first part explains how CSS works, a second part shows how to create styles for HTML tags and a final part gives a full worked example of creating a style sheet.

  1. An Introduction to CSS Style Sheets
  2. The 3 Types of Style: Element, Class and Tag
  3. CSS Style Inheritance
  4. Margins and Padding in CSS
  5. Measurement Units for CSS Styles
  6. Colours in CSS Style Sheets
  7. Float Styles (this blog)

This blog is part of a larger online ASP.NET online tutorial series.  For training courses for businesses, see our ASP.NET training pages, or have a look at our Visual Basic or Visual C# courses.

Posted by Andy Brown on 16 May 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Float Styles

One of the most important and complicated part of CSS to understand is the idea of floating elements. 

How Floating Works

Consider this example form:

Example form for to-do list

The labels Task: and Status: appear to the left of the form.

 

Here's the HTML to show the how these labels are created (it includes some ASP.NET web server controls):

Sample HTML for form

I've included some styling within the HTML, to make it clearer what's happening.

The labels float to the left of the form, with:

  • a width of 50 pixels; and
  • a right margin of 20 pixels.

The textbox and dropdownlist then appear to the right of these.

The Importance of Clearing Floats 

In the example above, notice that the paragraph immediately following the form clears the float:

Clearing float

The paragraph style gets rid of any floating left over from the block element which preceded it.

 

I'm aware that floating styles is a huge topic ( and I've only scratched the surface) but may aim is to give enough information for website developers (and particularly ASP.NET developers) to be able to start creating their own sites. 

And with that, this CSS tutorial is complete!  Recommended further reading:

Finally, an unsolicited plug - Wise Owl have used Branches Design for advice and outline website design for many years now (Branches are a UK company based in Clitheroe). 

This blog has 0 threads Add post