This is a basic CSS statement that you can cut & paste into your website's cascading style sheet to replace all the font tags in your HTML code. Don't be misled by it's apparent simplicity – this one line of code can control all the text on your site. Add/Remove/Adjust the variables to your own requirements using the guidelines and explanations of the CSS code below.
BODY, TH, TD, P {font-size: nu; font-family: arial, font 2, font 3, font 4; color: blue; font-weight: bold; font-style: italic; text-decoration: underline; text-transform: uppercase}
Note: text in red is explanatory and should not be copied verbatim.
The items before the brackets (selectors) indicate the page elements on which the declaration acts:
BODY - Elements between the <BODY> and </BODY> tags on the page.
TH (Table Header) - Elements between any <TH> and </TH> tags on the page.
TD (Table Cell) - Elements between any <TD> and </TD> tags on the page.
P - Paragraph. Elements between any <P> and </P> tags on the page.
You can specify other selectors like H1, H2, a:link, a:visited, etc.
Note: the BODY selector does not act on elements within tables. You must add the TDselector to include them.
font-size: nu
Where n = a numerical value and u = any of the following units:
Name | Abbreviation (u) |
|---|---|
| em | em |
| ex | ex |
| pica | pc |
| point | pt |
| pixel | px |
| millimeter | mm |
| centimeter | cm |
| inch | in |
Font 2 - Name of 2nd choice font.
Font 3 - Name of 3rd choice font.
Font 4 - Name of 4th choice font.
You can specify as many different fonts as you want and may wish to make the last choice a generic font family such as "serif" or "sans-serif", etc.
color: blue - the color of the displayed text (in this case blue), which can be specified in any of the following ways:
1. Using one of the 16 color keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
2. Using the standard format of hexadecimal colors, e.g. #FFFFFF
3. Using rgb colors in the form of rgb(255, 255, 255) or rgb(100%, 100%, 100%)
font-weight: bold - the weight of the displayed text (in this case bold), which can be specified in any of the following ways:
1. Using the keywords: normal, bold, bolder , lighter. (only 'bold' fully supported)
2. Using numerical values: 100, 200, 300, 400, 500, 600, 700, 800, 900. Where 400 is normal text. (not fully supported).
font-style: italic - the style of the displayed text (in this case italic), which can be specified as normal, italic and oblique.
text-decoration: underline - can be specified as none, underline, overline, line-through, blink. Several properties can be specified at once, leaving a space between each.
text-transform: uppercase - can be specified as none, capitalize, (the first letter of every word is in capitals), uppercase, where every letter is in uppercase , or lowercase, where every letter is in lowercase
Special cases
If you have several occurances of particular bits of text that you wish to be in another style (perhaps smaller text in a different font for example) use:
<SPAN class="fancy">text here</SPAN>
or
<DIV class="fancy">text here</DIV> (same)
Then in your style sheet write an additional line specifying how the class of "fancy" (you can call it whatever you want) should look:
.fancy {font-size: x; font-family: arial, xxxx, xxxx, xxxx; color: xxxx; font-weight: x}
You can repeat this to create as many clasess as needed, simply specifying a different unique name for each class. You can also combine HTML elements with classes.
For example, P.fancy { font-family: comic sans; font-weight: bold}
Would only act on paragraphs with the class of "fancy",
i.e. <P class="fancy">text here</P>
All this information should be saved in a plain (ASCII) text file and uploaded to your server. You will need to insert a link to this file between the <HEAD> and </HEAD> tags on every page you wish it to effect, e.g.
<LINK rel="STYLESHEET" type="text/css" href="/style.css">
Note: the most recent declaration the browser reads takes presidence over any previous declaration applying to the same element.
For now all you need to know is that this means should you specify one style for a particular element in your style sheet, and then specify another style for the same element within the page itself, the latter will be the style applied.
For example, if you have a line in your style sheet that reads:
P {font-family: Arial}
And then you include another style sheet declaration between the <HEAD> and </HEAD> tags of the page (to act on that page alone), e.g.
<STYLE type="text/css"><!--
P {font-family: Geneva}
--></STYLE>
You will see paragraphs in the Geneva font.
But if you also have a line in your HTML that reads:
<P> <FONT face="Helvetica">Hello</FONT> </P>
The browser will display the paragraph "Hello" in the Helvetica font (provided it's installed on the users system on the first place). Other paragraphs will still be displayed in Geneva.
There is an awful lot more to CSS than this, though this should serve as a good introduction and adequate for many current applications (don't forget that although not yet fully supported, CSS can be use to control all design elements of a page including tables, etc.).
I suggest you make a copy of one of your pages and experiment. First try the effect of different selectors on your text. Next try varying the properties. Finally, experiment with creating your own classes.
0 komentar:
Post a Comment