BlueVoda Website builder
 
website
 

  create website html    

create website
create website with css cascading style sheet
 
Please note. Some basic html knowledge or the ability to edit the html coding on your pages will be required. At the end of this section CSS may still be fairly useless to you but we will soon move on and you will soon become addicted to what CSS can achieve and you will be able to create website that is both beautiful and dynamic.

Create a style sheet:
On your windows desktop do a right mouse click. From the menu that appears select NEW. From the submenu that appears click TEXT DOCUMENT. Do not write anything in this document. Save it and ensure that you save it in the same location on your hard disk as your current INDEX.html page. This blank page is where all of your CSS commands will exist.

Make your web pages use the style sheet:
The following line of code needs to be added to every page that will make use of your style sheet. Please note. This line of code must go in the HEAD of each page. The head of each page is located at the top. It starts with and ends with . Placing the code anywhere inbetween these tags will make that page ‘call’ the style sheet and therefore the instructions contained within.

CSS Commands:
Each CSS command is made up of 3 sections. a selector, a property and a value.

Selector:
The selector is usually a html command. You can define the html command. For example…

a = the html tag for a hyperlink.
p = the html tag for normal text.
h1 = the html tag for header text (maximum = 6 (for example h6)).

Property:
The property is the page element that you wish to alter. For example…

Margin = To alter the margin size around your page elements.
Font = To alter the font.
Color = To alter the colour of a text, hyperlink or other page element).

Value:
The value must be added to the property in order to define the style. This is the way in which you wish the property to be altered. For example…

Blue = Combined with the Font property above the text on your page will appear blue.

Example:
In this example we will deal with hyperlinks (html tag A). On your style sheet you can enter the following code. The code has been colour coded as per the definitions above.

A:link {text-decoration: none; color: #0000CC}
A:visited {text-decoration: none; color: #0000CC}
A:hover {text-decoration: underline; color: #0000CC}

Explanation:
There are three lines of code above for each hyperlink style. The normal hyperlink as it appears on your page (link), the hyperlink after it has been clicked upon (visited) and the hyperlink whilst the mouse pointer is hovered over it (hover).

Notice that all of the style properties and values are inside a set of curly brackets. You need to define the selector, in this case hyperlinks (A) and then all of the CSS commands will go inside these curly brackets.

In the code above your hyperlinks will remain the same colour permanantly as you can see by the hex colour codes that I have used. You will also see that the text decoration remains constant except when the link is hovered over in which case an underline will appear.

The only other thing to note is colons and semi-colons. Here is how it works…

create website define the property insert a : (colon) and then define the value. If you wish to add more styling such as font size or in the case of the example above a colour instruction then you need to seperate the commands with a ; (semi-colon). The final instruction does not require a semi-colon. This is only required to seperate the listed instructions for example…

{property:value; property:value;property:value}

This can be broken down as follows…

property:value; ……. property:value; …….. property:value

.As a designer, none of the Cascading Style Sheet tutorials I've seen on the Web reflect the kinds of things I want to do on a Web page.
       
The whole concept seems so document-centric, more akin to what a word processor will do rather than a page-layout program. I realize that this probably covers most people's requirements for regular 'documents' and delivering information but I want more - quite a bit more.

I want to be able to perform typography.

Think of typographic design as a performance. You are delivering words in the way that an actress or singer would do and you should be able to express those words in a unique way that complements and enhances them. You can add expression and nuances of your own and, in the end, the performance can even transcend the original.

When I examine the capabilities of CSS 2.0, and there's probably no better place to do that than in Eric Meyer's book - Cascading Style Sheets 2.0 Programmer's Reference, I find that there are a lot more capabilities for creative typography than would at first meet the eye. Of course, if the browsers people use can't handle these layout possibilities, then the whole thing becomes rather academic and pointless.

        With my trusty BBEdit in hand, I set about to see just how far I could push the envelope as far as typographic design is concerned. Yes, there are many other factors that need to be considered when designing Web pages but for this exercise, my main concerns were exploration of layout possibilities, the use of W3C-valid mark-up and small page sizes. Oh yes, they also have to work in most people's browsers without resorting to JavaScript.
 

Introducing, Fun With Fonts
The principle I used is that I would pull no punches, well not exactly, there is no point in using CSS features that are not supported in any browser. I took Mozilla 1.1 as my 'base' as it is the most advanced browser where CSS is concerned, and it is my main browser of choice anyway. If what I was doing didn't work in Mozilla 1.1, I backed off. I should point out, in case you don't know, but Mozilla 1.x and Netscape 7 are almost identical twins.

I produced a siteful of samples, all fairly jokey things, in fact it's called Fun With Fonts. Here you will find a variety of typical home pages for imaginary sites, some concrete poetry and a short story. I used some fairly standard CSS, some Flash with CSS and some CSS that borders on the impossible.

Now, I have to confess, I wouldn't normally do a Web site from the ground up in a text editor. Most of the time I use Adobe GoLive 6 or Dreamweaver MX - but more about that later in the review section.
 

CSS for Layout
One of the things that you can't do with a tables-based layout is put text or images on top of other images, so the first thing I wanted to explore was the layering of graphic images to get a 'look' to a page that you just can't get with conventional html. Normally you can use a repeating pattern as a background for a Web page. This page, for instance, is a good example of a tiny GIF file that is stepped and repeated to fill the entire page with negligible file size overhead.

Sometimes you see Web page backgrounds that are huge GIF or JPEG files that take ages to download and don't show up for several seconds after the rest of the page has been rendered. Also, any background image will repeat eventually. If you want to fill the entire browser area with one background image, you have to make it so big that it will not tile on the largest monitor.   
 
A repeating GIF on top of a small
JPEG makes a page background
more interesting but you can only
do it with CSS
 
With CSS, you can set an image to fill 100% width and height of its containing box or you can use several tiling methods to govern how it repeats - no-repeat, repeat-x, repeat-y etc. If you set a regular image to 100% x 100% of the browser window size, it will probably look awful. Web images don't generally scale well and look bad at anything other then their natural size. For a JPEG image to look decent at full screen size would require an unrealistic file size. What I did was produce a small JPEG using high compression, which was just tonal in nature in create website - a simple gradient or shaft of light effect. On top of that, I have a repeating GIF file with transparent holes in it allowing the tone of the JPEG to show through. As the repeating GIF is crisp and sharp, it completely disguises the low quality of the JPEG behind but gives an overall impression of a high quality background image that is NOT simply a repeating pattern and resizes perfectly with the browser window, regardless of the size.
 
Absolute necessities
Absolute positioning with CSS is fairly easily understood and works in browsers as far back as Netscape 4.x - that is, provide that the elements are positioned relative to the top, left corner of the page.

        CSS allows you to set the absolute position of element using 'bottom' and 'right' too so, for instance, you can have a navbar that sticks to the bottom edge of the browser window. It's like having a constant 'footer' on the page, in fact, this principle makes the use of frames, and all their many disadvantages, virtually redundant.
        For several samples on the site, I tried locking elements to the bottom and right edges of the screen and when it does work, it's great!

 
Relatively speaking
Relative positioning in CSS is one of those concepts that confuses even the most experienced of designers - and the browser programmers too it would seem. The big question is 'relative to what?'

        In theory, when you place a box using relative positioning, it 'relates' to whatever is above it and to the left margin so, if you put one box on a page, it floats to the top like a block of polystyrene in water. When you put another box in, it's like putting another block of polystyrene under the first one; it floats up hard against the bottom of the first, and so on. You can offset the left of each box relative to the left margin to stagger them horizontally. That's all fine.

        The trouble comes when you start to use the 'top' property along with relative positioning. You can move a box up or down relative to the bottom of the box above by giving the 'top' property a negative or positive value - but what happens to any boxes below that? The 'real world' polystyrene blocks would float up or down to match the bottom of the one above, but CSS specs call for it to stay put. Unfortunately, the browser manufacturers do not agree and virtually anything can happen - and usually does.
 
Padding anomalies
The other major 'gotcha' you have to watch for is with box padding, which is counter-intuitive by specification - and most browsers get it wrong. Unlike table cells, padding for CSS boxes goes 'outside' the box size you specify, according to the official specs. Mozilla/Netscape 7 and Explorer handle this quite differently. For best multi-browser compatibility, I found that I had to avoid using padding altogether. The simple workaround is to use tall, narrow empty boxes as spacers.
 
Little boxes made of
ticky-tacky

 
CSS boxes generally want to stack one on top of the other. When you need to produce multi-column layouts, you can use 'float-left' and they should end up side-by-side instead. Giving each box a 'margin' value takes care of the column gutters. If you wrap the whole lot inside an outer containing box of an appropriate fixed pixel or percentage width and specify 'auto' for its left and right margins, the whole thing should centre nicely on the page - but set the body text-align property to 'center' too for best compatibility across browsers.

You can simulate most table layouts using combinations of stacked boxes (for rows) and nested boxes using float-left (for columns) but by setting negative values, you can make the 'cells' overlap and break out of the rigid grid. The things to watch for here are the discrepancies in how the browsers handle 'inheritance' - that is the feature whereby a 'child' object takes on attributes of the 'parent' - like when you put a box within another box. To be safe, be explicit in specifying things like text-align and font styles. Don't always assume the default (unspecified) behavior or you will be caught out.   
 
How did the browsers do?
Having designed and marked-up all my pages and tested them in Mozilla, I tried them in Internet Explorer 5.1.5 on my Mac. Luckily, most things worked right off and if they didn't, my previous tips about avoiding the 'margin' property of boxes and not assuming default behaviours of nested boxes took care of the nasties.

Browsers used for testing
  • Netscape 4.78 Mac
  • Netscape 7 PR1 Mac
  • Mozilla 1.1 Mac
  • Mozilla 1.0 Windows
  • Explorer 5.1.5 Mac
  • Explorer 5.5 Windows
  • Explorer 6.0 Windows
  • Opera 6.05 Windows
  • iCab Preview 2.8.1 Mac

I then moved over to Explorer 6.0 on my Windows XP machine and was pleasantly surprised. Only a few minor tweaks needed there too. Explorer 5.5 on Windows 2000 was a little more troublesome and I had to revise a few layouts to find workarounds, but it wasn't as bad as I expected. There are a few minor cosmetic glitches remaining, but I doubt if many will notice them unless they are doing a side-by-side comparison create website with Mozilla or IE 6. The main problem with Explorer (on Windows) seems to be that it doesn't get the font 'line-height' property quite right when font sizes are specified as pixels.

Explorer 6 and 5.5 on Windows and 5.1 on Mac, accounts for something like 95% of all Web users - if you believe the stats. The site works perfectly in Netscape 7/Mozilla 1.0. What about the rest?

The latest 6.05 version of Opera for Windows lagged behind the mainline browsers in CSS rendering create website capabilities. It claims to be fast, but it wasn't noticeably faster that the other browsers, in fact screen redrawing of the layered graphics seemed slower than the other browsers on my machine.

Note: A couple of readers have pointed out how a few minor changes to my CSS definitions can make Opera render these pages much better. I have amended the scores accordingly. More about that next time.

Likewise, iCab Preview 2.8.1 for Mac, was hopelessly inadequate at rendering many of the CSS positioned pages. It broke most of them and failed to render five pages to any meaningful standard.

Good old Netscape 4.78 coped with absolute positioning reasonably but failed to render any background colours or layered graphics. With this browser, most of the pages were compromised to one extent or another but in no instance did it totally fail to render a page. A side effect of the inability to cope with positioning is that, although you could see the navbar on the screen, the links just did not work making it impossible to navigate the site. To get around this problem, I produced an alternative menu page, 'altmenu.html', using tables instead - it's still W3C compliant!
 

The Crunch!
If you really need to reach Opera, iCab and Netscape 4.x surfers, it is best to stick to conventional table-based layouts and use CSS only for specifying type within the table cells Netscape 4.x is too long in the tooth to worry about and getting rarer by the day, but the other two are current versions and really should be able to render CSS a lot better than they do.

CSS gives designers many new possibilities to create website and lots of new headaches. Its advocates say that it is the way of the future, and I don't doubt that for a minute, but things don't change overnight. Surfers don't jump on the latest browsers as soon as they come out the way designers do. Some don't have the choice, some don't know how and many don't care. In the end, the Web is about communicating and it is your job to get the message across in the best way you can for your intended audience.
  

Testing method

Each of the twenty pages of the site was viewed in the various browsers three times over a period of one week and then given the following scores. The best possible score is twenty times five (100). Except for minor tweaks and avoiding some known browser bugs as mentioned above, no attempt was made to cater for substandard CSS rendering.

5 – for a perfectly rendered page
4 – near perfect rendering but minor cosmetic glitches
3 – rendered but with elements in the wrong place
2 – broken, but readable
1 – too badly broken to be of any use

As Mozilla 1.x (Mac and PC) and Netscape 7 produced identical results, only one is included.
 

Mozilla 1.x/Netscape 7 (All)
Features bar  100
Explorer 5.1.5 (Mac)
Ease of use bar  99
Explorer 6.0 (Win)
value for money bar  98
Explorer 5.5 (Win)
"Must have" factor bar  97
Opera 6.05 (Win)
Features bar 89
iCab Preview 2.8.1 (Mac)
Ease of use bar  50
Netscape 4.78 (Mac)
value for money bar    45
Note: The scores shown only relate to the pages tested and should not be interpreted as general performance.
 
I mentioned in the article above that I used BBEdit to produce the funwithfonts.com site and that I wouldn't normally do a site like this from scratch. Unfortunately, the main WYSIWYG web page editors like Macromedia Dreamweaver and Adobe GoLive are just not up-to-speed with the latest CSS specs even though the browsers are.

        Here are my experiences with trying to use these two editors. Neither were particularly successful at displaying the layouts and made editing them in WYSIWYG mode difficult or impossible. I could have used their built-in 'source' editors but I prefer BBEdit for that kind of thing - especially as I've written lots of AppleScripts for BBEdit that automate many of the more tedious tasks.
 
Adobe GoLive 6.0

GoLive 6

I put WPDFD together with GoLive mostly. I like its drag and drop interface and I feel that it has a more 'sympathetic' interface for people who are visually inclined 'right brainers'. Sure, it won't suit everybody, but it's nice to have a choice.

        GoLive has a very good interface for creating CSS-based pages, I've always preferred it for that over Dreamweaver. GoLive has the ability to drag 'floating boxes' onto the page, reposition them and resize them. You also have full control over their margins, padding, borders, z-index and so on via the 'inspector' palette, and I have to say, it works exceptionally well - what you see is what you get.

        The problems start to appear once you try to set absolute positions from anything other than the default top left. If you stray into the realms of 'relative positioning' you will find that GoLive quickly runs out of steam. In these instances, the layout window becomes a very loose approximation of what it represents and sometimes makes editing the contents impossible. Not only that, but when you do choose to go into source mode to do some text editing and subsequently make a change via the inspector, GoLive can 'correct' your hand-crafted code replacing concepts that it knows nothing of with ones that it does - like 'top' for 'bottom' for instance. It's not supposed to do that, but it does.

The inspector palette doesn't even acknowledge the existence of 'right' or 'bottom' in its 'position' tab, the concepts are outside its vocabulary. On the positive side, it could render my multi-layered graphics correctly and resized them with the window.

 When you put a Flash file into GoLive, it gives it a static 'poster frame' preview. Dreamweaver puts a Flash 'F' icon in the placeholder by default and you have to hit the 'Play' button to see what the movie contains.
 
Macromedia Deamweaver MX

Dreamweaver MX

Dreamweaver faired a lot better than GoLive when it came to displaying pages laid out with CSS but it's still some way behind what modern browsers are capable of.

It uses the term 'layers' to describe CSS create website boxes, which is a little confusing as these elements behave quite differently from 'layers' in any drawing program or Flash. They are all on the same 'layer' unless you assign a different z-index value to them. GoLive calls them 'floating boxes' but when you put them on the page, they are labelled #layer 1, #layer2, etcetera too. In textbooks, they are sometimes called 'blocks' and in the mark-up 'divs'. I think 'box' is a more accurate description. The term 'nested layers' makes very little sense.

In its 'design view', Dreamweaver was able to display floated-left columns where they were supposed to go, side-by-side, and even got the dimensions correct. It was also able to put boxes that were absolutely positioned from the right and bottom into their correct places on the page. It was, however, unable to preview my 'layered graphics' pages correctly, as GoLive could, neither could it centre elements on the page correctly in some circumstances.

Oddly, Dreamweaver fell apart completely on the four 'typography' pages and on the 'About this site' page making editing virtually impossible. I was also very concerned when it asked me if I wanted to save files that I had just opened but not edited - suggesting that it had changed my mark-up by itself on opening.

 There are some extensions available to aid the laying- out of pages with CSS in Dreamweaver however, for these tests, I only used the application as it comes out of the box.

 
Clearly, both Macromedia and Adobe have some work to do to bring their Web page editing software up to current standards. Neither of them comes anywhere near the capabilities of the latest browsers - or even the majority of browsers, if you look at it that way.

Designers wanting to work with these advanced layout possibilities can't do so in a WYSIWYG environment at the minute and have to resort to hand coding. I suspect that the graphic designers and typographers who are most likely to produce creative layouts are the people least likely to delve into text editing.

 Test scores for the editors are based on the same rendering criteria as the browsers with 100 being perfect
 
By Joe Gillespie
 

BlueVoda Website Builder

 

Style Sheets Now!

Web style sheets have been around for a number of years, but their power and importance went largely unnoticed since few implementations existed. Web authors, anxious to add creativity to their pages by influencing the presentation, began to use Netscape's proprietary extensions rather than the more powerful create website style sheets. This was quite natural, since Netscape's proprietary extensions could be seen by a significant portion of Web users, while few would see style sheet enhancements.

Today, more and more browsers are implementing style sheets, opening authors' eyes to unique features that allow influence over presentation while preserving platform independence. The advantages of style sheets became apparent, as did the disadvantages of continually creating more html tags for presentation effects.

Netscape's BODY attributes are now widely accepted on the Web, and have become standardized in html 3.2. Yet BGCOLOR, TEXT and friends simply do not provide the flexibility of style sheets. Most background images would leave a page unreadable to someone whose display only offered 16 colors; many pages are difficult to read with only 256 colors. With conventional BODY attributes, an author must choose whether the benefits of a background image outweigh the costs; with style sheets, an author can offer a number of different images, in different style sheets, so that the user can choose the "24-bit style sheet" or "8-bit style sheet," depending on how many colors his or her system can display. If no author-supplied style suits the user, he or she can simply ignore the author's style.

Style sheets can make an author's life much easier. While one could use <HR WIDTH="75%" SIZE=5 ALIGN=center> for every horizontal rule, this becomes very cumbersome for the author. With style sheets, one only needs to specify such presentational preferences once, and the style can be applied to an entire site. And if the author decides that WIDTH="50%" would be better, then he or she only needs to change this preference in one place, rather than having to search through hundreds of pages to change the html. Not only that, but style sheets also reduce download time when one file contains all the style information.

Style sheets also offer much more flexibility in terms of the presentation effects that they provide. Properties such as color, background, margin, border, and many more can be applied to all elements. With just html and its proprietary extensions, one must rely on attributes like BGCOLOR, which are only available for a few elements. Style sheets give the flexibility of applying a style to all paragraphs, or all level-two headings, or all emphasized text.

With style sheets, authors can use the text-indent property to indent text, rather than resorting to ugly kludges like <DD> or <IMG SRC="blank.gif" WIDTH=10 ALT=""> that carry with them many negative side-effects. Margins can be suggested without having to put the entire page in a table. Style sheets also reduce the need for multi-file search and replace; if an author decides to change the indentation of all paragraphs on a site, he or she only has to change one line on a style sheet.

Style sheets represent an enormous step forward for the Web. With the separation of content and presentation between html and style sheets, the Web no longer needs to drift away from the strong ideal of platform independence that provided the medium with its initial push of popularity. Authors can finally influence the presentation of documents without leaving pages unreadable to users.

 

Basic Syntax

Rules

Selectors

Any html element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css  { color: #4b0082 }

The above example has created two classes, css and html for use with html's CODE element. The CLASS attribute is used in html to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#svp94O { text-indent: 3em }

This would be referenced in html by the ID attribute:

<P ID=svp94O>Text indented 3em</P>
Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.

There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

Comments

Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

Pseudo-classes and pseudo-elements should not be specified with html's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

First Line Pseudo-element

Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.

  1. ! important

    Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance. A sample use of the ! important statement:

    BODY { background: url(bar.gif) white;
           background-repeat: repeat-x ! important }
  2. Origin of Rules (Author's vs. Reader's)

    As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets.

    Authors should be wary of using ! important rules since they will override any of the user's ! important rules. A user may, for example, require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be ! important, since some styles are vital for the user to be able to read a page. Any ! important rules will override normal rules, so authors are advised to use normal rules almost exclusively to ensure that users with special style needs are able to read the page.

  3. Selector Rules: Calculating Specificity

    Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

    1. Count the number of ID attributes in the selector.
    2. Count the number of CLASS attributes in the selector.
    3. Count the number of html tag names in the selector.

    Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

    #id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
    UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
    LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
    LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
    
  4. Order of Specification

    To make it easy, when two rules have the same weight, the last rule specified wins.

How to style links?

This is the classic CSS question.

It is asked so often, and the reason why the order of the link styles is important doubles as a wonderful explanation of the cascade in CSS. A tutorial about the link styles is located in the 'Basics' section.

Styles not showing?

There are different ways to apply CSS to a html document with a stylesheet, and these different ways can be combined:

  • inline (internal) (Deprecated for Xhtml)
  • embedded (internal)
  • linked (external) and
  • @import (external)

Note: An external stylesheet is a text file that contains only CSS Styles. html comments are not supposed to be in there and can lead to misinterpretation (> is the CSS "Child" selector!)

Border around a table?

Try the following:

.tblboda {
    border-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    }
/*color, thickness and style can be altered*/

You put this style declaration either in an external stylesheet or you can stuff it in the <head></head> section, like:

    <style type="text/css">
(here you can place your styles)
    </style>

and apply it to the table as follows:

<div class="tblboda">
    <table yaddayadda>
        <tr>
            <td>Content text and more content</td>
        </tr>
    </table>
</div>

That should give you a grey thin border around this table.

Kludge: If you want the border to 'shrink wrap' around the table, then you have to use the <span> tag instead the <div> tag. But that is not quite proper CSS or html, because a <span> is for inline elements. A table is not an inline element, therefore the correct tag is a <div>. If you play around with it a bit then you have a good chance to achieve what you want and still have correct html/CSS.

The other way would be that you apply the class .tblboda directly to the table (for IE and other contemporary browsers), like <table ... class="tableboda"> and you define another class for each stylesheet: .tblboda2

In the NN4.xx stylesheet, you use the same properties as above, and in the IE and other contemporary browsers you carefully set all those properties to default, like {border-style: none;}

Then you wrap the table in the <div> with the class .tblboda2 (NN4.xx does that) (IE a.o.c.b. don't do anything, because the border-style is set to "none" = no border at all).

This way you have a table that is wrapped in a nice little border: .tblboda2 for NN4.xx, .tblboda for IE and other modern browsers.

'Fixed' Background?

There is (was) the possibility to use the html tag bgproperties="fixed", but that is IE proprietary, and dependent upon the 'background' attribute (deprecated in html4).

With CSS, you can declare the background like:

BODY {
    font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    background-image: url(images/yourimage.gif);
    background-repeat: no-repeat; /*no-tiling background*/
    background-position: center;
    background-attachment: fixed;
    background-color: #hexcolor;
    color : #hexcolor;
    margin: 10px;

... and that shows a background-image in the center of the <BODY> element, non-scrolling and non-repeating - in IE or NN6. NN 4.xx gets the non-repeat-part right, but stuffs the picture in the upper left corner and scrolls happily everafter...

Justified Text?

You redefine the <p> tag like:

p {text-align: justify;}

and that renders all <p>s with justified text.

Another possibility is to define a class, like:

.just {text-align: justify;}

and then you style the paragraphs in question like:

<td class="just">text </td>

Note that NN 4.xx has problems with the inheritance of styles; that some NN4.xx browsers have a funny way to interpret "justify"; and that you have to have at least one blank space between the last character and the </p> tag, because otherwise NN 4.xx likes to justify even a three word half-sentence... also, some browsers do a pretty ugly job of rendering justified text, adding spaces between words, instead of spaces between letters, as with word-processing programs.

How To Style Table Cells?

Margin, Border and Padding are difficult to apply to inline elements. Officially, the <TD> tag is a block level element because it can contain other block level elements.

If you need to set special margins, borders, or padding inside a table cell, then use this markup:

<td><div class="table-cell"> yourtext </div></td>

to apply the CSS rules to the div inside the cell.

 

How To Style Forms?

Forms and form elements like SELECT, INPUT etc. can be styled with CSS - partially.

Checkboxes and Radiobuttons do not yet accept styles, and Netscape 4.xx has certain issues, but here is a tutorial that explains the application of CSS Styles on Form Elements.

Colored Horizontal Rule?

You can apply styles to Horizontal Rules <HR> in IE without problems, but NN4.xx can only render the silvery HR. But there is a way around it:

.rule {border-top-width: 1px;
       border-top-style: solid;
       border-color: #FF0000; 
       margin: 0px 2%;}

that, applied to a div, should give you a red HR in NN4.xx and IE, with a 2% gap on the left and right side.

 
CSS Positioning
 

Positioning the elements: the Navigation

I like to position the navigation absolutely, and the other areas "in relation" to the navigation.
There are probably many other ways to position those elements, and the reason why I choose to use this example is simple: it works (and never fix what is working...).

The CSS declaration for the Navigation is as follows:

.Navigation {/*The navigation on the left side, positioned absolutely*/
    position: absolute;
    top: 100px;
    left: 3px;
    width: 135px;
    height: auto;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height : 110%;/*line-height set to 110% in order to*/
    }                  /*have the navigation elements better separated*/

The declaration is very clear, and in plain English it says:

"I want this box for the navigation - 100 pixel from the top, 3 pixel from the left side of the document. This box is 135 pixels wide, and as long as it needs to be (defined by the content of the box). If anything is written in this box, I want it to be the Verdana-font (or the named substitutes), and I want the line height to be 10% bigger than it is defined by the font-size alone."

 Now you see the letters ABCDE in dark blue, Verdana font, default size (the font-size is not yet defined anywhere), and positioned about 100px from the top, 5px from the left of the window. (with the styles in the <head> section).

Go back to the stylesheet and change the top declaration of the .Navigation class, to 0px for example.
And then to 50px. And now change the color declaration in the BODY style to: #00FF33; the background-color to: #000000; or insert a background-color: #FF0000; in the .Navigation class, and change the height: auto; to height: 150px;, and now we change the font-family, and the background here and the color there...

Hey - what do we need any more declarations: let's copy and paste some text and put it beneath the closing </div> of the navigation and let's see what happens...

The text fills the <BODY>, with all the style declarations you've applied, and slides under the navigation. That means, you have to define the area where you want your main content to sit, to prevent it from interfering with the navigation.

Let's change everything back to the styles listed above,
take a deep breath
and go to the next position:

 

Positioning the elements: the Main Area

We declared the area for the Navigation as absolutely positioned, because we see it as the "anchor point" for the site. The class "Content" receives the positioning only via the margins. This means it uses neither the relative nor the absolute positioning, but is in the regular flow of the html document like any other html element:

.Inhalt {/*this is the main content area*/
    background: #FFFFFF;
    /*declare a color together with a contrasting background color*/
    color: #000088;/*to insure readability*/
    margin-left: 160px;
    /*to position the content area to the right of the navigation*/
    margin-right: 20px;/*breathing space for the text*/
    padding: 5px;/*space to separate navigation and content*/
    font-family : Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif; 
    width: auto;
    border: 0.1px solid #FFFFFF; 
   /*to insure that NN4.xx renders the background-color of the content area*/
    }

 Let's take a closer look: background(-color) and (text)color are white and dark blue, for better readability.

The left margin is defined with 160px from the left corner of the window, to insure that there is enough space between the navigation (with 145px width and 5px position to the right from the window = 150px) and the content. The margins of a box are always transparent. By declaring the margin-left property to be 160px wide, we give the visual "illusion" of an area that starts at 165px from the left, where in reality it is as wide as the html document. That's what I meant with "cunning application of the rules".

There is also the declaration for the right margin, and this defines that the right margin is 20px to the left of the right margin - wherever the right margin of the window actually is.

Additionally, there is a 5px padding all around the inside of the Content box (not really necessary. We could declare the margins to 165px and 25px, would have the same effect...)

The font-family I want to be displayed in the Content class - We already declared that in the <BODY>, but the real-world issue of the flawed inheritance capabilities of certain browsers requires some redundancy...

{width: auto;}: "auto" is the default value for the width property and refers to the width of the containing block. In this case it is not even necessary to set the width, because the .Content class is defined by the declaration of the left and the right margin. But should we decide to add a third "column", for a picture perhaps, then this could come in handy.

 Now something strange: border: 0.1px solid #FFFFFF;. This is more of an insurance to force NN 4.xx to display the background-color over the whole Content area. If we decide to change the background-color of the Content area to a light grey, for example, and don't have this fall-back declaration in the style for this area, then NN 4.xx will render the light grey background-color, but only behind the text.

Try it! Copy the declaration for the .Content into your stylesheet, apply the class in your document, like:

<body>

<div class="Navigation">
ABCDE
</div>

<div class="Inhalt"></div>

</body>

copy and paste some text in the Content class of your document, and change the background: #FFFFFF; of the .Content class into background: #F0F0F0;. Take a look at it in NN 4.xx - no problem.

Now delete the border: 0.1px solid #FFFFFF; and take another look at it in NN 4.xx ... Isn't it wonderful that there is a possibility to "undo"? I love this feature.

So: we have the body, navigation and the main area defined. (with the styles in the <head> section).

We can change the colors, the position and the dimensions of both the navigation and the content areas.

 

css

 

Positioning the elements: Header and Footer

We are missing the Header and the Footer. Both are "flexible" positioned, since the browsers are not (yet) able to support the CSS declaration of "fixed positioning".

Well, we need something to look forward to...

The declarations for Header and the Footer classes are:

.Header {
    margin-top: 10px;
    margin-left: 160px;
    } 
.box {/*this is a box where the bottom-navigation*/
      /* and the copyright will be placed*/
  background: #FFFFFF;
  color : #000099;
  font-family : Arial, Tahoma, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  padding : 2px;
  margin: 2px;
  border-color : #48D1CC;
  border-style : groove;
  border-width : 2px;/* the border property in longhand*/
  }

First the Header. In reality, this class is superfluous. We could take the graphic with the "CSS Issues" and simply plop it into the <div class="Inhalt">-area. A couple of <br>s, and we are done.

The reason why I have it in the stylesheet is that I've learned that this area is the one that gets changed quite often, and sometimes dramatically so. The client wants to add a tag line. The client wants the logo in white on a black background. The client wants the header bigger, or the tag line in red. "Could you show me the logo, well, differently?"

The easiest way to have it positioned and still have all the possibilities of changing almost everything is to have it in a class of it's own. I like to position the header on top of everything else in the code, directly after the </head> tag, but we could also take this class, change the margins and nest it in the Content class.

The Footer box will be nested in the main content area, but again, this is personal preference. If you put it outside the main content area, it will stretch over the whole window and obscure the background pattern that is used to put focus on the navigation. If you have another design or another layout this feature could be exactly what you need...

We put both items in our document, simply insert the Header image into the Header section and the code should now look like this:

<body>

<div class="Header">HEADER with image
<img src="images/CSS-2.gif" width="277" height="38" alt="CSS Issues">
</div>

<div class="Navigation"> NAVIGATION
ABCDE
</div>

<div class="Inhalt">CONTENT, with the nested FOOTER box
Some text here, like: With this tutorial I'll show 
you how easy this is, and I'll provide you with the CSS stylesheet 
and the graphics. Some CSS vs. NN 4.xx issues are already addressed 
at CSS Issues.
<br>

<div class="box">FOOTER BOX
This will be the secondary navigation
</div>closing tag for the FOOTER BOX

</div>closing tag for the CONTENT BOX
</body>

 The reason why I called it "box" and not "Footer" is very simple: I plan to re-use it, or at least I want the option to recycle it if need be. I could use the same box to

have a visual break in the page, and stress certain issues where I could play around with whatever I want to...

and the effort to do so is negligible. Simply put in <div class="box">. The other possibility could be to copy this class, change the border to red and double, the font-size to 16px and call it box2 - then you have an "Alert!" box.

Important: If you plan on using a <div class> within the text, take care not to declare any width. NN 4.xx will lose any styles after such a <div>

Now that we've prepared the ground, we can draw those little boxes that separates the navigational items. The boxes are not necessary, you could go ahead and start with the fonts and links.

.navbox {/*button-like box for the left-side navigation*/
   font-size: 15px;/*readability for the links*/
   font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
   background-color: #003399;
   border-color: #FF6633;/*or, in shorthand, the three*/
   border-style: groove; /*border-properties would read:*/
   border-width: 2px;/*border: 2px groove #FF6633;*/
   padding: 1px;
   margin: 2px;
  
 

html

 

BlueVoda Website Builder