Chemistry 524 HTML Primer

Style sheets basics Cascading Style Sheets, CSS, is a powerful addition to the HTML language which improves the layout of www-documents. It is supported in Explorer 3.x (with some bugs though) and Netscape 4.x. There are three methods to write the code, either local, global or linked. A local style sheet is the easiest one to use (and try), while global and linked style sheets are more powerful. Local style sheets STYLE="attrib1: value1;attrib2: value2;..." Adding this parameter into a tag will change the appearance of the text between the start and end tags. Local style sheets can be called from almost every tag which has an ending tag, for example <DIV>, <P>, <SPAN> and <FONT>. The attribute and the value are separated with colons and different attributes are spearated with semi-colons. See below for available attributes. Global style sheets <STYLE TYPE="text/css"> This tag should be inserted before the BODY-tag. A global style sheet can be called anywhere in the document by defining the name of the definition, see below. TYPE is the MIME-type of the style, and must be "text/css". <!-- HTML {attrib1: value1;attrib2: value2;...} TAG.name {attrib1: value1;attrib2: value2;...} --> This code should be inserted between the <STYLE> and </STYLE> tags. To make the code invisible for old browsers, it's written as a comment. TAG is the tag name from which the definition will be called, for example FONT. name is the name of the definition and can be any word you wish. The code between { and } defines the attributes of the text which will use the definition. See below for available attributes. Using HTML instead of TAG.name defines the default attributes for the document, similar to the BASEFONT tag. CLASS=name Adding this parameter into a tag will change the appearance of the text between the start and end tags. The parameter can be called from almost every tag which has an ending tag, for example <DIV>, <P>, <SPAN> and <FONT>, just like a local style sheet. name is the name defined in the code above. Linked style sheets <LINK REL=STYLESHEET HREF=url TYPE="text/css"> This tag should be insearted between the HEAD-tags. A linked style sheet is similar to a global style sheet, but use an external document instead. Using linked style sheets in a lot of pages, the appearence of the text can be changed by just edit the linked style sheet-file. HREF is the url to this file. The linked file can be any document which has global style sheet codes. TYPE is the MIME-type and must be "text/css". CLASS=name This parameter can be added to different tags in the same way as with a global style sheet, see above. Style sheets attributes font-size: n The size of the text. n is a number followed by either "px" (for pixels), "in" (for inches), "pt" (for points) or "cm" (for centimeters), for example "10pt". font-family: "font1, font2, ..., fontFamily" Defines the font of the text. If font1 isn't available in the system, font2 will be used, and so on. Finally you should define one or many font families, which tells the browser how the font should be displayed. For example, if the monospaced font you've defined doesn't exist, adding "monospace" will display another monospaced font instead of the standard font. fontFamily can be either sans-serif, serif, cursive, fantasy or monoscape. font-weight: weight Defines the weight, boldness, of the text. weight can be, for example, light, extra-light, demi-light, bold, extra-bold, demi-bold or medium. font-style: normal|italic Defines the style of the text. line-height: n Defines the space between two baselines. n is a number followed by either "px" (for pixels), "in" (for inches), "pt" (for points) or "cm" (for centimeters), for example "10pt". color: color Set the color of the text. Read more about available colors in the Textstyles-chapter. text-decoration: underline|italic|line-through|none Similar to text-style but with more options. margin-left: n Defines the left margin. n is a number followed by either "px" (for pixels), "in" (for inches), "pt" (for points) or "cm" (for centimeters), for example "10pt". margin-top: n Defines the top-margin. n is a number followed by either "px" (for pixels), "in" (for inches), "pt" (for points) or "cm" (for centimeters), for example "10pt". text-align: left|center|right Defines the align of the text. text-indent: n Defines the space to the left margin. n is a number followed by either "px" (for pixels), "in" (for inches), "pt" (for points) or "cm" (for centimeters), for example "10pt". background: URL(url)|color Defines the background, either a picture defined by its URL or a color. See the Textstyles-chapter for information about available colors. As you can see, an URL should be written within parentheses.