Topic/Code | Result |
---|---|
Embedding a Style Sheet<HTML> <HEAD> <STYLE TYPE="text/css"> <!-- /* You can add comments in the STYLE section by bracketing the comment text with slash-asterisk and asterisk-slash, as shown here. It will not appear in the browser. Elsewhere in HTML, use the <!-- comment here --> style. */ BODY, TD { font-size: 9pt; font-family: arial; } .larger1 { font-size: 14pt; } --> </STYLE> </HEAD> <BODY> Sample text with some of it <span class=larger1>bigger</span>. </BODY> </HTML> |
Embedding a Style SheetSample text with some of it bigger. |
Linking to an External Style Sheet FileContents of mystyles.css:BODY, TD { font-size: 9pt; font-family: arial; } .larger1 { font-size: 14pt; }Link to mystyles.css: <HTML> <HEAD> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> <BODY> Sample text with some of it <span class=larger1>bigger</a>. </BODY> </HTML> |
Linking to an External Style Sheet FileSample text with some of it bigger. |
Inserting a Style Inline<HTML> <BODY> <H1 STYLE="color: orange; font-family: impact"> A colorful heading </H1> <P STYLE="background: yellow; font-family: courier"> A colorful paragraph </P> </BODY> </HTML> Style PrecedenceThe basic order is this:
BODY { color: green; } P { color: red; }Also, later repeats win over earlier versions. Therefore, P would end up red in this example: P { color: green; } P { color: red; } |
Inserting a Style InlineA colorful headingA colorful paragraph |
Creating Styles Per Unique Html Tag or for Any TagWhether you put a tag name before the dot determines whether the classname after the dot can only be used by a particular tag or is generally available for any tag. Example 1: These styles would only work for <P> tags: P.first { color: red; } P.second { color: yellow; } P.third { color: blue; }Sample HTML: <P CLASS="first">First paragraph</P> <P CLASS="second">Second paragraph</P> <P CLASS="third">Third paragraph</P> Example 2: This class can be used on a tag or in a SPAN: .larger1 { font-size: 14pt; }Sample HTML: <H1 class=larger1>This heading is 14 pt</h1> <P class=larger1>This paragraph is 14 pt. <P>This <span class=larger1>word</span> is 14 pt. |
Creating Styles Per Unique Html Tag or for Any TagExample 1: First paragraph. Second paragraph. Third paragraph. Example 2: This heading is 14 ptThis paragraph is 14 pt. This word is 14 pt. |
Combining Tags in Class DefinitionsTo make bold text red only when that bold text is in the context of a <P> paragraph:P B { color: red; }Sample HTML: <p>This is <i>italic and red</i>. <h3>This is just <i>italic</i>.</h3> |
Combining Tags in Class DefinitionsThis is italic and red. This is just italic. |
font-familyList several font family names, starting with more exact and ending with more generic choices. The first match found for the user's computer is the one used. If there are several style attributes including font-family, place font-family last so that IE3 processes the overall style correctly. Common names across computers: serif (probably Times) sans-serif (probably Arial or Helvetica) monospace (probably Courier) Inline example: <!-- If the user's browser does not have Gill Sans, just show the computer's standard serif font. --> <P STYLE="font-size: 14pt; font-family: 'Gill Sans', serif"> Text here.</P> |
font-familyInline example: Text here. |
font-sizeOptions: pt, em, px, in, cm, mm; xx-small, x-small, small, medium, large, x-large, xx-large; smaller, larger; %as in: font-size: 10pt; font-size: x-small; font-size: 300%;Inline example: <p style="font-size: 8pt;">Test 8 <p style="font-size: 15pt;">Test 15 |
font-sizeTest 8 Test 15 |
font-styleOptions: italic oblique normalas in: P { font-style: italic; }<p style="font-style: italic;">All italics |
font-weightAll italics |
font-weightOptions: bold, normal; /* lightest through boldest */ 100 through 900; bolder, lighteras in: P { font-weight: bold; } P { font-weight: 700; } <p style="font-size: 15pt; font-weight: bold;">All bold <p style="font-size: 15pt; font-weight: 700;">Semi-bold |
font-weightAll bold Semi-bold |
text-transformOptions: /* forces entire text to be cap'd */ uppercase /* forces entire text to be low'd */ lowercase /* forces starts of words to be cap'd */ capitalize |
text-transform |
text-decorationOptions: underline line-through noneExample: <p style="text-decoration: line-through;">Crossed out</p> You can control the three separate aspects of an HREF, as in: /* If not yet visited, show no underline. */ A:link { text-decoration: none; } A:active { text-decoration: none; } /* Once visited, cross out the link. */ A:visited { text-decoration: line-through; } Think of these as predefined class names, where A:link is for normal, unvisited links; A:active is for link appearance while you're clicking and A:visited is for previously visited links. Inline example (style applies to all aspects of HREF): <A STYLE="text-decoration: none" HREF="http://www.yahoo.com/" target="_new">A link with no underline</A> |
text-decoration
|
fontThe font property is a kind of shorthand for a few of the other properties. It's a way of assigning font-size, line-height, and font-family all at once. Example: LI { font: 12pt/16pt courier } This rule defines <LI> text as 12 points in size, 16 points in line height, and Courier. If you use font, you must always set the font size and font face, but the line height is optional. Make sure the values are in the exact order you see above. |
fontresult |
word-spacingFor adding additional space between words. Distance/size units are same as for font-size. |
word-spacingresult |
letter-spacingFor adding additional space between letters. Distance/size units are same as for font-size. |
letter-spacingresult |
line-heightFor setting spacing between baselines of adjacent lines. |
line-heightresult |
text-alignOptions: left, right, center, justify |
text-alignresult |
vertical-alignOptions: top bottom text-top text-bottom baseline middle sub /* subscript */ super /* superscript */ |
vertical-alignresult |
text-indentFor indenting the start of a paragraph, for example. |
text-indentresult |
Padding then Border then Margin (PB&Margin)Around an element is padding, then a border, then a margin.margin-top, margin-left, margin-bottom, margin-rightpadding-top, padding-left, padding-bottom, padding-rightborder-widthAll sides same amount. border:thickness style colorborder:1px dotted #bb9;border-top-width, border-left-width, border-bottom-width, border-right-widthborder-colorUse plain words like green or #RGB like #FFDD44. border-styleOptions: solid double dotted dashed groove ridge inset outset floatAbility to flow text around the specified element. Options: left, right (both?) Example: <h1 style="float: left; margin-right: 30px">Test</h1> In a narrow column, Test appears big, and this long text is 30 px to its right, wrapping and indenting as needed until it can slip under the tall H1. Note: If the element is an image, align=left will have the same result on the text after it: <img src=blah.gif align=left> clearUse this on an element following a 'float' element to force it to move down after the float element, i.e. to not be floated by the prior element; Example: P { clear: left } |
Margins, Padding, Bordersresult |
Colors and ImagescolorThis colors the element (its 'foreground'). Options: #RGB (e.g. #FFDD22) or aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. See
http://users.rcn.com/
background-colorThis colors the background of the element. Another option: transparent. background-imageAn image to be repeated as the background of the element; recommendation: combine with background-color in case there are transparent parts of the image Option: url(<urlOfImage>) Example: P { background-image: url(background.gif) background-repeatOptions: no-repeat (just show once), repeat-x (repeat only horizontally along the top), repeat-y (repeat only along the left), repeat (repeat both horizontally and vertically) background-attachmentOptions: fixed, scroll fixed: fixes an image behind the element so that scrolling has no impact on the image scroll: normal, expected scrolling behavior background-positionThe upper left corner location of the background image. Options: top, bottom, left, right, center (can be combined) x and y distances from upper left corner of element (e.g. background-position: 70px 10px) % from upper left (like x and y) backgroundA means of combining several of the background options. Example: You can define background color, image, tiling method, scrolling versus fixed status, and position: P { background: url(/webmonkey/98/15/stuff3a/background.gif) #CCFFCC repeat-y top right } Result: text with CCFFCC background color and with gif repeating vertically, aligned at top right. |
Colors and Imagesresult |
Positioning ElementsGeneral advice (to deal with IE3 problems): apply position styles to <DIV>s wrapped around the elements you wish to position.positionOption: absolute plus left and top (relative to upper left corner of browser) Can use any of the font-size measurements, incl percentage. Example: H4 { position: absolute; left: 100px; top: 43px; } relative plus left and top (relative to natural position of element in document) widthLimits how wide the element can be; can only be used with absolute-positioned elements. heightLike width, but vertical; buggy in browsers. overflowHow to present text that does not fit within the width/height you specified. Options: visible (display all...ignore height limit) auto (clip and provide scrollbar only if needed) scroll (always display a scrollbar, even if not needed) hidden (clip off whatever goes "over the line"...info lost!) visibilityWhether to show element, while preserving the space for it; IE only? Options: visible, hidden z-indexCombine with position to specify the which overlapped element is on top. Higher z-indexed elements (e.g. z-index: 10) appear on top of lower z-indexed elements. |
Positioning ElementsThis is illustrated in every case on the right. Each h2 heading in the left column is in the code of the right column...just with 'style="visibility:hidden"', thus beginning this text at the same level as the text underneath the left column's heading. |
Advice Regarding BrowsersTrick No. 1: Use Styles on Similar HTML Tags If you want to control the level of boldness using font-weight, why not use the <B> tag for applying the style? That way, the text will be bold in older browsers as well. Try to find corresponding HTML tags for your CSS declarations, so that you'll end up getting at least some of the same effects in older browsers that you're getting in the newer ones. Trick No. 2: Double Up Styles with HTML Tags If you want to make absolutely sure a paragraph is blue, use both CSS and HTML to make it so. Double up with both color: blue and <FONT COLOR="blue">. If you want something centered, use both text-align: center and <CENTER>. You get the idea. Trick No. 3: Make Unwanted Elements "Invisible" If you've got a huge decorative font symbol, for example, that looks tiny and silly in an older browser, use <FONT COLOR> to give it the same color as the background, thus making it vanish in older browsers. But the CSS rule will still color it red (or whatever) for newer browsers, so people with newer browsers will still see your cool effect. Making your pages degrade well isn't just something to spend five minutes on at the end. It's something to keep in mind during the entire design process, as you initially create your CSS rules and plan out your goals. And, as always, the most important three words are: test, test, test. |