This page has id 103
On this page there are examples of different font families, different font sizes (and line spacings) and text box designs. This sentence was written using the h1 heading tag
This is written using h2. Now I am going to add enough text to mean that I can look at the effect of changing the “/line-height” between lines of text because this doesn’t always look too great if you change the font sizes from their defaults.
This is written using h3. Whenever you are writing a block of text you can force a line break by using the “br” tag. I am going to do that now.
It is not enough to leave whitespace as this is not recognised; at least not uniformly. It is important to be aware of how text formatting looks on different sized screens.
This is written using h4. When you switch to a different heading type or paragraph, “p” tag, a line break is automatically added. That is because these are what are called “block” (as opposed to “inline”) elements.
This is written using h5. A new “div” also forces a line break. I am leaving this extra text here so I can look at the line height between lines of text for this heading type too.
This is written using h6 Now I am going to add enough text to mean that I can look at the line height between lines of text because this hasn’t looked too great since I made the font sizes smaller.
This is written using paragraph. Now I am going to add enough text to mean that I can look at the line height between lines of text because this hasn’t looked too great since I made the font sizes smaller.
There are five generic font names: serif, sans-serif, monospace, cursive, fantasy. One of these should go at the end of your font-family list to cater to any browsers etc which do not recognise your other choices. Below are the “web-safe” font-families. It is best to stick to one of these unless the client has a strong wish to use another, in which case they should be made that it may not display well in all browsers:
font-families
- arial, helvetica, sans-serif
- arial black, gadget, sans-serif
- brush script mt, cursive
- comic sans ms, cursive
- courier new, courier, monospace
- georgia, serif
- impact, charcoal, fantasy
- lucida console, monaco, sans-serif
- lucida sans unicode, lucida grande, sans-serif
- palatino linotype, palatino, serif
- tahoma, geneva, sans-serif
- times new roman, times, serif
- trebuchet ms, sans-serif
- verdana, geneva, sans-serif
Font-family is not case-sensitive.
The above is what is called and “unordered list” and various different designs, or your own image file, can be used as bullets. An ordered list has numbers instead of bullets.
Portions of text can be made bold, italic, or underlined (the default setting for headings is bold). Similarly it can be overlined or crossed out. These examples were all achieved using inline commands with the “span” tag. This is a way of applying CSS styling to a span of text without disrupting its flow and can be used with CSS rules or by invoking classes. i.e. span style=”property: value;”Text goes here /span or span class=”classname” Text goes here./span
Both of these would of course in practice be contained in <>.
A class can also be applied to other elements such as:
highlight this emphasized text, or this
bold text or even
This whole paragraph will be highlighted
But why not just use the “mark” tag to highlight text inline, like this, I wonder?
Shadows can also be applied to text in much the same way as they can to text boxes etc (see Images page). It can be very distracting and can just make text look out of focus. It is probably best only used for
Fairly large titles
Font sizes are specified using several different terms. The following are all equal and correspond to the default setting in most browsers: 12pt = 16px = 1em = 100%
All of the font properties can be specified in one shorthand style rule:
Here is a demonstration *
The syntax is as follows.
font: [style] [variant] [weight] size[/height] family;
this should be written in small capitals *
Is this in caps? *
There seems to be some variation here as earlier the three lines marked * (which should all be in capitals) were displayed in lower case in the Chrome browser. They appeared just as planned in Firefox, however and are now OK in Chrome. It just shows how wary you have to be of the way that different browsers behave. This could also have been a cache issue.
Normally, if just making a word or two inline “bold”, the “strong” tag should be used instead because it has semantic value in html5. Likewise, “em” for emphasis should be used instead of “italic”.
Now I am going to write a couple of paragraphs to demonstrate the large first letter option. This is done by making a class called “bigfirstletter” in combination with the selector “first-letter”.
Oh, I did say a couple of paragraphs didn’t I? Here is the second one.
This is how you add a subscript ei or a superscript x2
In the middle of this line, right about here: I am adding several of what are called “non-breaking spaces”.