More
CSS Least Tern > Tech Class > Teacher Resources > Resources for Web Design
More
CSS
Including a Font to Download Automatically | Mini-Caps | Letter Spacing / Adding White Space
Using Original Bullet Icons | Setting the Background of a Heading or Paragraph
In order to use this CSS, you must first have a font file saved into your website directory. This font can be downloaded from the Internet or copied from the Fonts folder of the hard drive. It must be converted to the .eot or .pfr format before you can use this code!! The .eot format is created with a free Microsoft tool call WEFT, but it works only on a PC!! (I had to fake it here. I know that some of you can do this from home).
The following paragraph is written in a font called Edwardian Script ITC. It would be viewable without changing the <font> tag if you had converted the font with WEFT and placed it in your page folder.
To use this font download, include the following in your <head> tag. Remember not to include the <script> tags if they are already there for another CSS element. Change the items in red to your specifications.
<style type="text/css">
@font-face {font-family: Edwardian Script ITC; src: url ("Edwardian Script ITC.eot");}
</style>You can then use this font-family in any font tag, like this parenthetical expression, or use it in your <body> tag or in a CSS tag definition. Here's how:
- add this class to the <style> definition above: .specialfont {font-family:"Edwardian Script ITC", script;} Note: the "." before the name you give to the class is important!
- then, when you want to use the font, add this to the <p> or <font> tag: class = "specialfont". The full tag will look like this:
<p class="specialfont">
<font class="specialfont">Mac users will have to create a link to the font file (copy it into the web folder from the Fonts folder) and instruct the user to download and install the font.
This page, and the others in this Resources section, use a font style called small-caps to identify section heading. These are sometimes called Mini-Caps. This style can be applied to any element of a page (heading, subheading, paragraph, word) by defining it as the font-variant for that section in CSS. Note: small-caps is not going to show up in Claris HomePage or Dreamweaver!! You need to preview in a browser to see it.
To use small-caps text on your page, add the following to the redefinition of any element of your page in the <head> tag: font-variant: small-caps;
For example, if you want to make your <h2> tag always mean that subtitles are in small-caps, use this code in the <style type="text/css"> section:h2 {font-variant: small-caps;}
I have declared a new element called ".topic" that will always be written in small-caps. When I want to use it, it is included in the <p> tag:
<p class="topic">. To do this, I used this line in the <head> tag:<style type="text/css">
.topic {font-variant: small-caps;}
</style>Another way to achieve the same effect is to include a style statement in the .html tag of a paragraph or heading. For example:
<h2 style="font-variant: small-caps"> This will allow you to add the changed font stye only when you want the effect.
If you are using a web editor like Dreamweaver, you will only see this when your preview.
Letter Spacing / Applying White Space
You might want at some time to add space between letters, word, or elements on the page. To do this, you add a style definition with the value letter-spacing to your <p> tag (stretches the whole paragraph):
<p style="letter-spacing:10px"> STRETCH</P> creates this:STRETCH
<p style="letter-spacing:10em"> STRETCH</P> creates this:STRETCH
- Don't forget to close the </p> tag!
If you only want to add the white space to a word within a line, you add the same style to the <font> tag:
<font style="letter-spacing: 5 em">word</font>
- Note: an em is a measure based upon the font itself. 10em is about 10 letters wide or 10 letters high. This measure is nice because it will stretch or shrink depending upon how the browser displays the fonts.
You do not have to use the standard dot or square in a bulleted list. To use your own image for a bulltet, include the following in the <head> of your page.
Remember that the image should be small (10px by 10 px) and should be transparent.
- Only .gif files can be made transparent.
- Replace the red information with your own image file name.
- Adjust the url if you have placed your image in an images folder.
- You may have to adjust the line-height due to the size of the image. I have done this in the blue code below.
<style type="text/css">
li {list-style-image: url (../grayarrowfd.gif) ; list-style-postition: outside; list-style-image:disc; line-height: 20px;}
</style>"outside" indicates that wrapped text will fall under the 1st line of text ("inside" wraps under the bullet), "disc" provides an alternate to the star for browsers that can't handle this.
If you are using a web editor like Dreamweaver, you will only see this when your preview. This feature will not work in many versions of Netscape.
You know how to set and postion the background image of a page and how to use the <div> tag to specify the position of specific page elements, such as paragraphs.
It is also possible to set and position the background of any page element: title, body of text, word or image. Here, for example, is the <h2> element that I have redefinded with the style definition underneath it:
Well, this is a fine kettle of fish!
<style type="text/css">
h2 { font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px; font-style: oblique; line-height: normal; font-weight: bold; font-variant: small-caps;
color: #0000CC; text-decoration: none;
background-attachment: fixed; background-color: #FFFF66; background-position: center 80%;
float: right; width: 100px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px}
</style>The "float" value is the same as adding "align='right'" to the <img> tag.
You can also add a graphical background to a page element. I have added a green dot border background to the code above. To do so,
- I placed the .gif file in my page folder.
- I created a class called p.dotback in the <style> section of the <head>: p.dotback {background-image: url(greentinydot.gif); background-repeat: repeat-y; margin-left:200px;}
- Then I used this code in the <p> tag for that element:
<p class="dotback">
Elizabeth Sky-McIlvain 11/17/02
