Cascading StyleSheet How To

Validate your HTML and CSS

The following pages give details of how to perform a number of tasks using stylesheets.

  1. Centre Horizontal
    Position something horizontally centred in the page or in a particular part of the page.
  2. Centre Vertical
    Position something vertically centred in the page or in a particular part of the page.
  3. Dead Centre
    Combining the above two to position in the exact centre of the page.
  4. Dead Centre Revisited
    An alternative that only requires one div but which doesn't always work in older browsers.
  5. Bottom of Window
    A slight modification to the vertical centring code allows us to place content at the bottom.
  6. Add Section Numbers to Headings
    You can number the sections in your document by applying stylesheet commands on the heading tags.
  7. No Wrap
    The stylesheet way to tell the browser that certain text is not to wrap onto a new line.
  8. 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.
  9. 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.
  10. 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
  11. Basic Page layout with CSS
    Just a few simple CSS commands provide the simplest way to set out most web pages.
  12. Fixed or Floating Layout
    Should you create fixed or variable width web pages?
  13. 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.
  14. 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.
  15. Styling Definition Lists
    Do you want the definitions alongside the corresponding terms in your definition list? Here's how to do it.
  16. Nested Elements and Margins
    Sometimes the margins on an element can extend beyond its container messing up your layout.
  17. 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.
  18. 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.
  19. 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.
  20. Internet Explorer and hasLayout
    Another Internet Explorer issue with styles for which there is an easy fix.
  21. 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.
  22. 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..
  23. 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.
  24. Disabling Obsolete HTML Tags
    A user stylesheet added to your browser is the easiest way to tell the browser to ignore antiquated tags.
  25. Embedding Fonts
    Why CSS currently doesn't offer a way to embed fonts into your page.
  26. The :active Pseudo Class
    The pseudo classes on links need to be specified in the right order for them to all work.
  27. Background Positions
    Positioning backgrounds using percentages doesn't quite work the way you might expect.
  28. Fluid and Elastic Layouts
    There are two different ways you can set up a variable width page layout.
  29. Embedding Fonts
    There are a variety of issues with embedding fonts in web pages, not all of them browser related.
  30. Multi-Level Menus
    CSS can create multi-level pop out menus without the need for any JavaScript.
  31. Controlling Line Breaks
    How to disable line breaks inside text and how to enable line breaks between adjacent inline tags.
  32. Responsive Layout
    An introduction to some of the CSS commands that allow you to make your web page responsive.
  33. CSS Defaults and Resets
    Not all browser defaults are the same so you need to reset some to give a common starting point.
  34. Side By Side
    A look at some of the ways to put content next to other content.
  35. 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.
  36. Responsive Images
    Reduce the size of an image when it would otherwise leave too little space for the adjacent content to fit.
  37. Responsive Menu
    Have the navigation menu convert itself to a show/hide button on narrower screens - without JavaScript.
  38. 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)

go to top

FaceBook Follow
Twitter Follow
Donate