CSS Scripting

Quick Jump: How-To / Code Examples | Classes & Styles | A Tag | IMG Tag

How-To / Code Examples

First, CSS stands for Cascading Style Sheets. CSS' are great because they can take a lot of work out of the coding. Many repetitive tags can be assigned attributes in the CSS file which will save you coding in your HTML file. I'll show you some attributes below, along with some examples to explain what I mean.

There are three types of style sheets: external, embedded, and inline. External style sheets override embedded style sheets and inline styles override both external and embedded style sheets.

• External style sheets are their own separate file (the .css file) which is linked to in the header of each page of the site. The link looks like this:
  <link rel="stylesheet" href="htmlcss.css" type="text/css">
  An example of an external style sheet (the one for this site, view the source)
• Embedded style sheets go between the <style> and </style> tags in the header. An example of an embedded style sheet is in the source for the style play example also used below for the links examples (view the source).
• An example of an inline style is:   <p style="font-family: Courier; color:blue; ">
  This text is Courier and it's color is blue. Which looks like this on the page:

  This text is Courier and it's color is blue.

Lets say you had the CSS style p.Stylea (using either an external or embedded style sheet) for:
<p class="Stylea">This text is Arial 12 point, red color and underlined.</p>

If you were to do this in HTML you would have to type this every time (instead of just <p class="Stylea"> </p> with CSS):

<font face="Arial" size="12pt" color="red"><u>This text is Arial 12 point, red color and underlined.</u></font>

To get this same result:

This text is 12 point, red, and underlined.

Classes & Styles

CSS code is made up of:

• selectors
• properties
• values
• classes
• styles

Properties and values make up what is called a declaration. A declaration looks like this:   {property: value:}

Together, selectors, properties, and values make up a rule. Rules look like this: selector   { property: value} Rules are what tell how the element will be affected.

Elements such as Paragraph Tags, Header Tags, and Div Tags may be used as selectors and given declarations. Some of the declarations are as follows:

{background-color: #FFFF80}
Other values you may use include: background-image, background-repeat, background-position

{background-color: url("trees.gif")}
Put the image name in quotes, url stays as url, don't change it to the url you're using. You may also use repeat and norepeat to indicate tiling (image repeats over the entire background) or no tiling (only displays once). For example: {background-color: url("trees.gif") ; repeat}

{border: thick dotted blue}
Other values you may use include: none, thin, medium, thick, solid, double, groove, ridge, dotted, dashed

{color: blue}
Color name or hexidecimal. Click here for a list of colors you can refer to by name.

{font-family: "Arial"}
Put font name in quotes, use semicolons to separate font names when giving more than one choice. I'd reccomend giving more than one choice incase a user does not have the font you choose to ensure users can see your page like you want them to.

{font-size: 200%}
Other values you may use include: xx-small, x-small, medium, large, pecentage of default text size, px (pixel), pt (point)

{font-style: italic}
Other values you may use include: italic, oblique, normal

{font-weight: bold}
Other values you may use include: normal, bold, bolder, lighter, 100-900 with 400 as normal intensity

{margin-left: 20px}
Other values you may use include: margin-right, margin-top, margin-bottom

{padding: 15px}
Other values you may use include: padding-left, padding-right, padding-top, padding-bottom

{text-align: center}
Other values you may use include: center, left, right, justify

{text-decoration: underline}
Other values you may use include: none, underline, overline, line-through, blink

{text-indent: 25px}
Other values you may use include: pixels, positive, or negative values

{text-transform: uppercase}
Other values you may use include: none, uppercase, lowercase, capitalize

A Tag (anchor tag)

The A tag, or anchor tag, affects how a link is displayed on the webpage.

• A:active {color:red}
• A:hover Affects how a link looks when the mouse is placed over it.
• A:link Affects how a link looks
• A:visited Affects how a visited link displays on the webpage.

IMG Tag

{vertical-align:baseline}
Other values you may use include: baseline, text-top, text-bottom, middle, top, bottom

{width: 300px; height: 200px; float: left/right}
Other values you may use include: baseline, text-top, text-bottom, middle, top, bottom

---