One Style Sheet -- One PageThis is the way I see style sheets being used most often. To see a couple in action, head to USA Today or ESPN. Both use style sheets on their pages. I'm using that type of style sheet on this page. Check the source if you don't believe me. Go ahead - I dare ya! In all fairness, I should mention that when used like this, it technically isn't a style sheet, it's an in-line style block. But another term just pushes something useful out of your brain. ...and we can't have that. Follow these rules to place a Style Sheet (Block) on your page:
When you're all done, the format will look like this: <HEAD> Style Sheet information goes in here... --> Hey! Make With The Style Sheet Already, Bub!This gets a little confusing, but there is a method to the madness. I'll give you the format to follow and you plug in what you want to work with. Here's the basic format: TAG {definition; definition; definition} Here's what a line from this page's style sheet looks like: H2 {font-size: 16pt; font-style: italic; font-family: arial} OK - Lookie Here! There are a few things I want to point out:
What HTML Tags Can I Define?As far as I can tell, you can define any HTML tag. Now, some definitions will be silly with some tags. I mean, a font definition with an HR tag seems a bit goofy, don't you think? I see the style sheets using these tags the most:
The DefinitionsBelow are 28 very common Style Sheet commands. You can put together a myriad of different looks with these. However, this is a list of less than half of those available. At the end, I'll give a couple of links to full lists of commands. But I'll bet these become your work-horses. Most of the other commands are overly specific. 7. The FONT/TEXT Definitions: 1. font-family § Denotes typeface. § H2 {font-family: arial} 2. font-style §
Denotes the
style of the text. § H3 {font-style: small caps} 3. font-size §
Denotes the
size of the text. § H4 {font-size: 20pt} 4. font-weight §
Denotes text
presence. § A:link {font-weight: demi-light} 5. font-variant §
Denotes a
variant from the norm. § H2: {font-variant: small-caps} 6. text-align §
Justifies the
alignment of text. § H1 {text-align: center} 7. text-decoration §
Lets you
decorate the text (duh). § A:visited {text-decoration: blink} 8. text-indent §
Denotes
margins. Most often used with the <P>. Make sure you use </P also!> § P {text-indent: 1in} 9. word-spacing §
Denotes the
amount of spaces between words. § P {word-spacing: 10px} 10. letter-spacing §
Denotes space
between letters. § P {letter-spacing: 2pt} 11. text-transform §
Denotes a transformation
of the text. § B {text-transform: uppercase} 12. color §
Denotes color
of text. § H3 {color: #FFFFFF} 8.
The
MARGIN/BACKGROUND Commands 1. margin-left 2. margin-right 3. margin-top §
Denotes space
around the "page". § BODY {margin-left: 2in} § P {margin-right: 12cm} § BODY {margin-top: 45px} 4. margin §
Denotes all
three margin commands above in one command. § P {margin: 3in 4cm 12px} (note no commas or semi-colons) 5. line-height §
Denotes space
between lines of text. § TEXT {line-height: 10px} 6. background-color §
Denotes page's
background color. § BODY {background-color: #ffffff} 7. background-image §
Denotes the
background image for pages. § BODY {background-image: http://www.page.com/dog.jpg} 8. background-repeat §
Denotes how the
image will tile. § BODY {background-repeat: repeat-y} 9. background-attachment §
Denotes how the
image will react to a scroll. § BODY{background-attachment: fixed} 9.
The
Positioning/Division Definitions: 1. position §
Denotes the
placement of an image or a division of the page. § <IMG STYLE="position:absolute" SRC="joe.jpg"> 2. left §
Denotes amount
of space allowed from the left of the browser screen when positioning an item. § <IMG STYLE="position:absolute; LEFT: 20px;" SRC="joe.jpg"> 3. top §
Denotes amount
of space allowed from the top of the browser screen when positioning an item. § <IMG STYLE="position:absolute; LEFT: 20px; TOP: 200pt" SRC="joe.jpg"> 4. width §
Denotes width
of image or page division. § <IMG STYLE="position:absolute; WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg"> 5. height §
Denotes height
of image or page division. § <IMG STYLE="position:absolute; HEIGHT: 55px WIDTH:80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg"> 6. overflow §
If the item is
too large for the height and width specified, this tells the page what to do
with the overflow. § <IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg"> 7. z-index §
Denotes an
item's position in the layering structure. The lower the number, the lower the
layer. An image marker with a 20 would go overtop of an image marked with a 10.
§ <IMG STYLE="position:absolute; Z-INDEX: 10; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">- For a full list of Style Sheet Commands, visit either of thise great sites:
What It All Looks LikeHere's the Style Sheet from this page: <STYLE TYPE-"type/css"> <!-- </STYLE> What If I Want The Same Tag Handled Different Ways?What you do it assign different "classes" of tags. Real simple. Look here: H3.first {font-size:
20pt; color: #FF00FF} See what I did? I labeled the H commands separately by adding a dot and then a suffix. I used "first" for the first type and "scnd" for the second type. You can use what ever you want. I like these determinants. When you place them on your page, you do this in the text: <H3
CLASS="first">This will be affected as outlined in
"H3.first"</H3> I get a little more in-depth in the Classes and ID's Tutorial One Style Sheet--Many Pages First
off, create a style sheet as you did above. This will be the only thing on the
page. No <HEAD> commands this time. You will make the file so that if I
wanted, I could just copy and paste what you have right into my own
<HEAD> commands. Which is just about what you will be asking the computer
to do. Place this command on your page to call for the Style Sheet: <LINK REL=stylesheet HREF="http://www.your.page/fred.css" TYPE="text/css"> Here's what's happening:
Every page that contains this command will be affected by the one style sheet you created and placed in your directory. One sheet - many pages. Can I Use These Style Element on Individual Items?Yes you can. They simply sit inside the TAG you are working with. Just make sure to denote them using the STYLE command. Since they sit inside another command as just a defining command, they require no /STYLE. In that position, they affect only what you say they will rather than the entire page. Like so: <FONT STYLE="font-weight: extra light; font-family: courier">affected text<FONT> Follow this format and you can define a style for just about any HTML TAG. There's also a method of setting up classes of items that works pretty much the same way. See just below for the link.
|