Cascading StyleSheet How To
Validate your HTML and CSS
The following pages give details of how to perform a number of tasks using stylesheets.
- Centre Horizontal
Position something horizontally centred in the page or in a particular part of the page.
- Centre Vertical
Position something vertically centred in the page or in a particular part of the page.
- Dead Centre
Combining the above two to position in the exact centre of the page.
- Dead Centre Revisited
An alternative that only requires one div but which doesn't always work in older browsers.
- Bottom of Window
A slight modification to the vertical centring code allows us to place content at the bottom.
- Add Section Numbers to Headings
You can number the sections in your document by applying stylesheet commands on the heading tags.
- No Wrap
The stylesheet way to tell the browser that certain text is not to wrap onto a new line.
- Screen Only or Print Only
You can set up your stylesheet so that what displays on the screen does not necessarily print and what prints is not necessarily displayed on the screen.
- Patching for Internet Explorer
Internet Explorer 7 is five years behind the times with what stylesheet commands it doesn't support. Here's how to set up special commands that only apply to Internet Explorer.
- Overlaying Objects on the Web Page
Something you can't do when using tables for layout is to place two objects so that they overlay. Using CSS it is an almost trivial task
- Basic Page layout with CSS
Just a few simple CSS commands provide the simplest way to set out most web pages.
- Fixed or Floating Layout
Should you create fixed or variable width web pages?
- Inline Elements, Block Elements and Text Alignment
Newcommers to CSS often have problems with aligning different parts of the page content. Here's how the different types of elements work when it comes to alignment.
- Fixing zIndex problems
There are a few elements that certain browsers insist on placing in front of everything else. Some can be fixed so they work properly and others can't.
- Styling Definition Lists
Do you want the definitions alongside the corresponding terms in your definition list? Here's how to do it.
- Nested Elements and Margins
Sometimes the margins on an element can extend beyond its container messing up your layout.
- Fixed Positioning in IE6
You can set up elements with a fixed position in the window with IE6, you just need to use different stylesheet commands to override the standard method with the IE6 proprietary one.
- Fixing the IE Double Margin Bug
For some unfathomable reason Internet Explorer doubles the size of the margin on a floated element on the side that it is floated on, fortunately there is a simple fix.
- To Hack or Not to Hack
Some browsers (IE in particular) have very poor support for some CSS. Should you hack your code to get it working in all browsers or is there a better way.
- Internet Explorer and hasLayout
Another Internet Explorer issue with styles for which there is an easy fix.
- Collision Proofing Your CSS
How to define CSS for a part of the page so that it will not interfere with anything else on the page.
- Internet Explorer Broken Box Model
Internet Explorer in quirks mode (and versions prior to IE6) calculates the width of elements incorrectly. Here's how to fix it..
- Collapsing Margins
Top and bottom margins can collapse into one another giving you different vertical spacing from what you'd expect. Here's how it works.
- Disabling Obsolete HTML Tags
A user stylesheet added to your browser is the easiest way to tell the browser to ignore antiquated tags.
- Embedding Fonts
Why CSS currently doesn't offer a way to embed fonts into your page.
- The :active Pseudo Class
The pseudo classes on links need to be specified in the right order for them to all work.
- Background Positions
Positioning backgrounds using percentages doesn't quite work the way you might expect.
- Fluid and Elastic Layouts
There are two different ways you can set up a variable width page layout.
- Embedding Fonts
There are a variety of issues with embedding fonts in web pages, not all of them browser related.
- Multi-Level Menus
- Controlling Line Breaks
How to disable line breaks inside text and how to enable line breaks between adjacent inline tags.
- Responsive Layout
An introduction to some of the CSS commands that allow you to make your web page responsive.
- CSS Defaults and Resets
Not all browser defaults are the same so you need to reset some to give a common starting point.
- Side By Side
A look at some of the ways to put content next to other content.
- Fluid Height Sticky Footer
Keep the footer at the bottom of the viewport when the content is too short to push it out of view.
- Responsive Images
Reduce the size of an image when it would otherwise leave too little space for the adjacent content to fit.
- Responsive Menu
- CSS Marquee
Create a simple marquee using nothing but CSS.
Validate your HTML and CSS
We now have Package Deals to create and maintain your website for you.
(includes special prices for community groups and hobby clubs)