BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
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.
- An Introduction to CSS Style Sheets
- The 3 Types of Style: Element, Class and Tag
- CSS Style Inheritance
- Margins and Padding in CSS
- Measurement Units for CSS Styles
- Colours in CSS Style Sheets
- Float Styles (this blog)
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.
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:
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):
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:
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:
- The next stage in this tutorial (considerations for how to apply styles to specific HTML tags); and
- A full worked example on using styles to create a website.
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).