Title Graphic - HTML / CSS Help





 

CSS Resources

 
  Quick Jump: CSS Resources | How-To / Code Examples | Classes & Styles | A Tag | IMG Tag
     
  Tags shown on this page are taken from Dr. Baehr's 3368 CSS Handout along with other tags I have provided.  
 
Links to other websites and Example links from this site will open in a new window.
 
  WebReference.com
Experts, sitemap, references, services, code tools, etc.
 
  WebDeveloper.com
WebDeveloper.com ®: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!
 
  WebMonkey.com
How to and Quick Reference Libraries, and Discussions
 
  Web Developers Virtual Library
Encyclopedia of Web Design Tutorials, Articles and Discussions
 
  Designing CSS Web Pages
This book is a valuable reference for those interested in learning CSS. The author is a list mom for Babble a mailing list community for web design.
 
  Cascading Style Sheets: A Beginner's Guide
This book is a valuable reference for those interested in learning CSS. Free code from this title and others by the same publisher are available online.
 
 

How to Use HTML and XHTML: Visually in Full Color
This is a reference for beginners, the bright colored graphics and humorous content makes the information a lot more interesting and is a departure from the standard black and white of programming books.

An exerpt from page 28 on background images.

 


 

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. </p>

    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

 
 
 
  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