Cascading StyleSheet Tutorials
- 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.
- Important
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 attributesfor a given definition then they will be inherited from a prior definition.
- Comments
Comment your Stylesheet to remind yourself of why you have coded it that wat.
- 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 puting 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 prsumably web TV itself) ignores % in stylesheets. Here's how to correct for that problem.
The following pages give details of the various attributes that can be used with your stylesheets. The attributes listed are those available in the CSS2 standards and not all attributes are fully supported by all browsers. Note that some information is presented in more than one place in order to make it easier to follow.
- Font Controls
Control the fonts used on your page with these attributes.
- Text Alignment Controls
Control the alignment of the text on your page with these attributes.
- Text Controls
Control other aspects of the appearance of the text on your page with these attributes.
- Margin and Padding Controls
Control the margins and padding around the parts of your web page with these attributes.
- Border Controls
Control the appearance of the border around parts of your page using these attributes.
- Size Controls
Control the width and height of parts of your page using these attributes.
- Background Controls
Control what appears behind the objects on your page.
- Positioning Controls
Control where the object is placed on the page.
- Alignment Controls
Control how the object aligns itself relative to other objects around it.
- Visibility Controls
Control whether or not the object is visible and if so how much is visible.
- List Controls
Control how lists are displayed.
- Table Controls
Control how tables are displayed.
- Interface Controls
Control how the mouse and the object having the focus on the web page appear.
- Display Control
Define whether your tag is inline or block, list, table or whatever.
- Page Controls
Control how and if the content will be printed.
- Content Controls
You can mark up your content with section numbers and quotes with these controls.
- Aural Controls
Control how the page will be spoken in talking browsers.
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.
- 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.
We now have Package Deals to create and maintain your website for you.
(includes special prices for community groups and hobby clubs)
