razorBlog
Web Design Drives Me Nuts
Wow, Did I Do That
So you managed to get it all working up to this point, good for you, lets step things up a little more though and start exploring things a bit more, so hold on to your hair piece.
Go back and add another paragraph to your index.htm file in your raw text editor under the first paragraph, go back to your web browser, refresh the page (F5 key), and you will see this is also blue, any text you put in a paragraph will now automatically be blue from now on. This demonstrates only having to declare something once.
We are now going to introduce more XHTML tags into our web page, and at the same time we will introduce more declarations into our CSS to modify the tags further, by the end of this guide you should have a crude understanding of the basic tags used repeatedly throughout web pages as well as the basic tag formatting declarations in CSS.
So we now have our XHTML file and our CSS file stored as follows in our test directory, all work will now be done on these files, not the template ones as these are for generating new clean pages only.
websites
templates
xhtml.htm
xhtml_basic.htm
style
main_layout.css
test
Index.htm
style
Main_layout.css
Remember I said to add another paragraph earlier in the other chapter, well if you did delete it now (including it's tags) so we only have one set of h1 tags, one set of h2 tags and one set of p tags. This is because we are going to experiment a bit more and it's better that your examples match these here, it's not overly important but it will differ from any screen shots of the web page if you have an added paragraph.
Before we add any more tags we are just going to play around with the CSS formatting of the current tags, you already have enough tags on your page to play with for now so adding more to the XHTML file will just confuse matters.
Open up your CSS file websites/test/style/main_layout.css, in your raw text editor, we should see the following code.
body {
}
h1 {
color: #ff0000;
}
h2 {
color: #00ff00;
}
p {
color: #0000ff;
}
At present we have formatting declarations for the following tags, h1, h2 and p. The only type of tag formatting we have declared is the font colour of the three different tags using the color declaration. We have also explained how the declaration is set out earlier, and what each part of the declaration means.
If there is one thing that cannot be taught, it's style. I will 100% guarantee you one thing and one thing alone, style is mostly an inherent skill, you either have it or you don't. Don't get me wrong the more you try the better you will get that's for sure, but some people just have an inherent ability for styling websites just like some people have with music. The more used to CSS you get, the more workarounds, tricks and tips you'll pick up, but if you lack that creative flair you will only ever at best be able to reproduce existing styles with slight variations. For some this is good enough, so please don't be put off, it's just a fact of life.
Lets change the colour declaration (attribute) now for all three tags in the CSS file to be the same colour. If there is one thing confusing about a lot of sites today, it is jumbled layout, inconsistency and bad formatting. For something to be easy and pleasing to read, it has to get rid of these issues. One good place to start is the font colour, try to be consistent with your font colour, not changing it for every paragraph like some kind of psychedelic mind game that looks like someone vomited on the screen, be consistent, paragraphs should all pretty much be the same colour, headings should match each other, be subtle, subtle is clean and pleasant to read without getting dizzy.
As well as being consistent with font colour, make it a contrasting colour to your background too, black on white, dark grey on white, white on black, dark blue on white and black on light grey are just some examples. If you struggle to read your text then you need to create more contrast between text and background. Just remember people are visiting your site to read the content, so it can look the best site in the universe but if the text is unreadable, it fails miserably.
Being consistent with colour does several things, helps the user to know instantly how to flow through the information, groups the information together, doesn't break the concentration of the reader and gives the information consistency, remember people don't like change, they resist it.
Along with this is your links, whether nested in your information or being used as navigation menus, make sure they stand out, blue is a good colour to use and well known to be a link, the same goes for underlining links. I believe that always using the same link colour and formatting for different sites can be tedious and may not match the feel of the sites, and underlining is not always desired either. As long as it is easily distinguishable from normal text, that is sufficient, as long as it stays the same through the entire site. Navigation can be treated differently to nested links (links within your content) as they don't have to match, as long as your navigation is clearly identifiable as the site navigation, more on this later.
For this example, as we have a white background on our test page index.htm, we are going to use black for all font colour that is not a link or navigation menu, this includes all headings and paragraphs.
As we stated earlier, colours in CSS and HTML/XHTML are expressed as a 6 digit hexadecimal number (you can use three pairs like #345 for #334455 but 6 gives more variations of colours and is consistent instead of mixing 3 and 6) following a # symbol. To give you a rough idea of some of the colours available here is a simple list.
Search for ‘html color codes’ using the Internet
Base colours
#000000 black
#ff0000 red
#00ff00 green
#0000ff blue
#ffff00 yellow
#00ffff aqua blue
#ff00ff purple
#ffffff white
#111111 very dark grey
#222222
#333333
and so on through to
#cccccc
#dddddd
#eeeeee very light grey
Now we are going to change all the font colours declared to black, that means headings and paragraphs, as these are the only type of font tags used at present. So find the section in your CSS where h1, h2 and p tags are declared and change the font colour for all three to black.
Your CSS file should now look like this,
body {
}
h1 {
color: #000000;
}
h2 {
color: #000000;
}
p {
color: #000000;
}
Good, so what next?, well lets add some more settings for all three tag declarations that are going to be used by all three. Here are a list of some of the settings we could use with them.
font-size sets the size, by the following means, xx-small, x-small, small, medium, large, x-large, xx-large using text definition (medium is default), em as a variable size relative to browsers setting, px as a fixed size or % as a percentage of the browsers set size (allows the browser to dictate the size).
The best to use in most cases is %, em or text defined, this lets the browser dictate the size of text, if the reader has poor eyesight, they can instruct their browser to increase the text size. If you fix the size using px (pixel size), some browsers will not be able to alter the size, thus cutting down on the amount of people that could view your site and discriminating against those with poor eyesight.
In some cases it is not possible to have a variable font size, as it just breaks the site layout, this is the only time you should utilise fixed font sizes, and even then you should take every opportunity to work around the problem instead of giving in to fixing it.
I use % or em, percentage to give a size based on the browser setting, and em to give a size based on the browser setting and it's parent, we will discuss children and parents later. For now stick to % and when em is required we will discuss why.
Lets set all font sizes to 100%, this is the normal rendering size (50% would be half as small, 150% half as big). In order to do this you must enter the following line to all three declarations in the CSS file, don't forget how we make up the declaration setting (using : and ;).
font-size: 100%;
Add this to all three tag declarations either above or below the font colour setting it doesn't matter, just try to keep things consistent, so for consistencies sake, lets put them in alphabetical order, and you should get the following file.
body {
}
h1 {
color: #000000;
font-size: 100%;
}
h2 {
color: #000000;
font-size: 100%;
}
p {
color: #000000;
font-size: 100%;
}
Lets stick to the second example where we put it below.
Now save this and lets go take a look at what has happened to your web page index.htm, if it is already loaded on your web browser, just F5 refresh the page, else double click on the index.htm file in your file browser to open with your web browser.
All your text should now be black, be the same size, but the font weight (thickness) differs. This is due to the fact that we have not yet set this and the defaults for the pre-defined tags are being used.
In your web browser, try the following, to check that the text truly is relative to the browser set size.
IE - goto view > text size > largest
Firefox - goto view > text size > increase
You should notice that the text now gets bigger. Use the same steps to set back to normal or medium which is the standard (default) setting.
Now as I'm sure your aware, using variable sizes can mess up the layout of your page, when creating a web site be sure to check the page displays fine in different browsers as discussed earlier, and different text sizes using the method we just used. Your site should at least work in the major browsers (IE, firefox, chrome, safari, opera and any using mozilla core or webkit) IE, firefox and chrome is sufficient for this guide. Your site should also work with the text set at least one more font size either up or one down, which means increased up or down one level from default, although try and aim for two.
