Cascading StyleSheet Tutorials
Validate your HTML and CSS
- Adding CSS to a Tag
Style commands can be added directly into HTML tags. This is the simplest way to add a specific style to a single spot on your page.
- Page Specific Stylesheets
Adding the style comands to a stylesheet embedded in your page allows the same styles to be used for the whole page.
- External Stylesheets
Moving the stylesheet into a separate page allows the same styles to be used across the whole site.
- Block Tags and Inline Tags
There are three types of HTML tags. This tutorial discusses the difference betwen the main two and the effect that this difference has on which stylesheet commands you can apply.
- Special Tags
A discussion of those tags that are neither block or inline and the restrictions that these tags have with regard to stylesheet commands.
- Class Styles
You can define which particular tags are to receive a special style by using the Class attribute.
- ID Styles
To uniquely identify a single tag on the page so as to apply positioning styles to it we use the id attribute.
- Nested Styles
You can nest the HTML tags in your stylesheet to only apply a style to one tag when it occurs within a second tag.
- Pseudo Classes and Advanced Pseudo Classes
Pseudo classes are predefined and refer either to the tag when it has a special state or to a particular part of the tag's content.
- Multiple Classes
If you need to assign two classes to the same tag, you can.
- Cascading Styles
The order of precedence, which styles take priority.
Changing the order of precedence using Important.
- Media Specific
Making your styles media specific.
- Nesting Stylesheets
How to call one stylesheet from within another.
- Predefined Definitions
Most HTML tags have some defaults defined.
- Inherited definitions
If you don't define certain attributes for a given definition then they will be inherited from a prior definition.
Comment your Stylesheet to remind yourself of why you have coded it that way.
- User Stylesheets
Your visitors can override your stylesheets with their own.
- Child Selectors
Applying styles only when one tag is directly nested within another.
- Adjacent Definitions
Applying styles when one tag follows another tag (without other intervening tags).
- Universal Selectors
The universal selector allows you to set up more distant relationships between tags.
- Media Specific Selectors
How to specify that part of your stylesheet is media specific instead of setting up separate media specific stylesheets.
- Page Layout
When using print media you may find it useful to tell the stylesheet about the physical page size.
- Specifying Downloadable Fonts
The CSS standard supports placing your fonts on the server and allowing them to be downloaded. Unfortunately this isn't supported by current browsers.
- Attribute Selectors
You can set up stylesheet entries that check for specific attributes on HTML tags.
- Browser Specific Styles
Not all browsers understand all CSS attributes. Make use of the quirks of the particular browsers to determine which styles apply in which browsers.
- The Web TV Hack
The web TV emulator (and presumably web TV itself) ignores % in stylesheets. Here's how to correct for that problem.
We now have Package Deals to create and maintain your website for you.
(includes special prices for community groups and hobby clubs)
Validate your HTML and CSS