Active Classes
BUSTC109
 
Student Resources
Tips/Resources
Past Classes
Tutoring
 
 
Office: BE3175c, no phone
Mailbox: BE3176
Hours: Appointment only

 

 

  • flags
  • Translate This Page To:

    Powered by: ALS & Google

  • Style Rules


    ON THIS PAGE

    How do I. . .

    HEAD SECTION Embedded CS Rules

    BODY SECTION Inline CS Rules

    Basic Styles - HTML Starter

     

     

    XHTML Tag Parts: xhtmlbasics.php

    Color: Hex Colors

    Validator: W3C XHTML Validator

    Goodies: DHTML Goodies

     

    How do I. . .

     

    Decide how wide my web site should be?

    The common resolution for computer monitors these days is 1024x768. This means you can:

    • Use a flexible width table of 100%
    • Set a fixed-width table of between 900-1000px

     

    Plan the widths of columns for a fixed-width website?

    The common width for fixed-width website design these days is 960px. There are resources called Grid Design you can use for plotting how to use that 960px width:

     

    Create text wrap around an image?

    • <p><img style="float:left;" /> </p>. You can also choose float:right

     

    Create a middle of the screen web site with equal background on both sides (like Wordpress blogs)?

    This is a two step process:

    • Add styles in the head section code of your website:

      <head>
      <style type="text/css">
      body {text-align:center;}
      body {text-align:-moz-center;}
      </style>
      </head>

    • Add left alignment and special margin info in your page structural table's openening table tag:

      <table style="text-align:left; margin: 0 auto;"> You can also add a background color or non-repeating image (like a banner)

     

    Get my banner or other background image to show up because only part of it does?

    The background image in a table and td tag only shows up if there is other content inside the tags to push the cell "open". If you don;t plab to put text in there, you can:

    • Add style="padding-top:____px;" or
    • Add a few <br /> or <p>&nbsp;</p> tags to push down a bit.

     

    Remove the built-in padding around the top of my web page?

    You can use body {padding:0; margin:0;}

     

    Keep my text or images from being squashed against the side of a table cell?

    You can use style="padding-left:____;" and/or style="padding-right:____;"

     

    Keep one of my table columns (usually the right-hand one) from dropping down below the rest of the table?

    Ah. . . if you have chosen a fixed-width table and calculated the widths of the columns, and have added margin measurements, you have actuallly added extra width on top of your caclulated columns. Remember that your column widths and margin additions must together equal the width of the fixed width table.

     

    Have a right-side scrollbar on my page?

    You would set the height of the page, then set the overflow to auto so that if the content exceeds the height of the page you can scroll down while in the "Above the Fold" browser window.: <body style="overflow:auto; height:750px"> or body {overflow:auto; height:750px}

     

    Get rid of the spacing around my table cells so my borders fit seamlessly?

    You need to do this inside the opening table tag by using the border-collapse option: <table style=" border-collapse:collapse;">

    You ALSO need to add cellspacing="0" and cellpadding="0" inside the table opening tag.

     

    Note: your table can still have a border - the border-collapse simple affects the build-in spacing around table cells (<td></td>).

     

    Change the font family and/or size through the whole web page?

    You can do this in the body tag: <body style="font-family:_____; font-size: _____;">

     

    Require my pages to render in a specific font family even if the visitor does not have the fonts??

    • You can do this by using Open Web Fonts. You would schoose and download a specific font/family.
    • In your website's file directory, make sure this downloaded font file is available
    • In your Head Section's style tag (or your external CSS), add: @font-face { font-family: "NAME"; src: local('Puritan'), url(filename.otf) format("opentype"); }

     

    Change the color, size, and/or font of just a small piece of text after I change the whole body text?

    Easy as pie! Place a <span style="yourchoice:____;"></span> around the bit of text, with yourchoice being the font, color, size, and other changes.

     

    Create "rounded boxes" in my design (for butons, table cell bacgrounds, etc.)?

    Use CS (cascading styles). You will need to list ALL 4 of the lines below in order to cover the various browers. You should change the 20px to whatever pixel curve you would like, like 10%, 22%, etc.

    .rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    }

     

    Put the Validator code in the footer of my web page without the ugly icon?

    Piece o'cake! Place the Validator Icon code inside your page footer section, remove this code (<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />), and replace it with the word Validate. Since it all falls inside a <p></p>, you can even change that tag to be h5, h6, or style the <p> to make the text more discreet.

     

    Use an image as a link?

    • <p><a href="" title=""><img src="imagename.ext" /></a> </p>. DO NOT put words between the A tages - just the image link.

     

    Have different colors for my links - instead of the default blue and purple?

    You need to do this in the head section of your web site code, in the <style></style> tags. Note - the order of these is critical and must be: link, visited, hover, focus, and active.

    • a:link {color:#___;}
    • a:hover {color:#___;}

     

    <style type="text/css">
    a:link { color:#000; text-decoration: none }
    a:visited { color:#666; text-decoration: none }
    a:hover { color:#999; text-decoration: underline }
    a:focus, a:active { color:#333; text-decoration: none }
    </style>

     

    Create a "rollover" or other effects for my links?

    This is for something like my STUDIOBAST website. You need to do this in the head section of your web site code, in the <style></style> tags. You also need to use an unordered list for setting up your nav spacing and create a special id for the navigation you want to do this, or else every single link in your website will act the same.

    • #nav a:link - this creates an ID called nav that is applied to the a:link. You would add the nav in front of a:hover, a:visited, a:focus, and a:active.
    • text-decoration:none; - this removes the underline from links.
    • font-size:105%; - this makes the link's font size bigger.
    • background-color:#___; - this adds a background color behind the text of the link - only for the length of the text.
    • background-image:url(imagename.ext); - adds a background image behind the text in your navigation.
    • list-style-type: none; - this removes the bullets from a list if you use an unordered list to create your vertical navigation.
    • display:inline - this allows your unordered list to be rendered horizontally.
    • display:block - this allows your unordered list to be rendered vertically.

     

    HTML Code

    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    </ul>

     

    CS CODE

    ul#nav {
    list-style:none;
    margin:20px;
    padding:0;
    width:525px}

     

    ul#nav li {
    display:inline} /*This is for MY horizontal navigation. You can change to inline to block for vertical navigation*/

     

    ul#nav li a {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#485e49;
    color:#eee;
    text-align:center;
    border-left:1px solid #fff;}

     

    ul#nav li a:hover {
    background:#a2b3a1;
    color:#000}

     

     

    ANOTHER version is for one using table cells for each of your navigation buttons:

     

    HTML Code

    <td style="background-color:#1d375a" class="nav"><a href="about.html" title="About Us Link">About Us</a></td>

     

    CS CODE

    .nav a {
    text-decoration:none;
    padding:5px 0;
    width:100px;
    color:#fff;
    text-align:center;
    font-weight:bold;
    border-left:1px solid #fff;}

    .nav a:visited {
    color:#fff;
    font-weight:bold;
    font-style:italic;
    }

    .nav a:hover {
    color:#ccc;
    font-weight:bold;
    }

     

     

    TUTORIALS

    • http://css.maxdesign.com.au/listutorial/roll_master.htm
    • http://www.elated.com/articles/css-rollover-buttons/
    • http://www.w3schools.com/CSS/css_pseudo_classes.asp

     

    Have a fixed background image no matter how much text I put on a page?

    Easy! You need to add a couple of things to your CSS body tag styling:.

    { background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

     

    Have different color backgrounds and/or font sizes for my links - so they change for a hovering mouse?

    Note that this only affects the <a> tag, not the text it wraps around, or the table data cell it is in. You also need to do this in the head section of your web site code, in the <style></style> tags, in this order.

    • a:link {background-color:____; color:___; font-size:___}
    • a:hover {background-color:____; color:___; font-size:___}
    • a:visited, a:focus {background-color:____; color:___; font-size:___}

     

    Have different images for my navigation to create a "rollover" image effect?

    You are on your own on that one - I'll be supporting the basics of this class. This does not work the same way as just adding background colors like above. On your own, you can check out:

    • Simple javascript - example
    • Detailed CSS - example (view source, but it's confusing)
    • A flyout menu example (don't ask me, I'm just the messenger)

     

    Find more CSS tricks to play with?

     

    And I'm absolutely sure you'll think of many other things to ask me. Coffee puh-lease!!!!

     

     

    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

     

     

    HEAD SECTION Embedded CS Styling Rules

     

    Head Section embedded style rules are the method you use in CSS to create a style to apply to your XHTML code. You should move away from body section inline styling as much as possible as soon as you learn this. These are:

    • Code is embedded in the head section, NOT the body section of your web page
    • Can be styled once in a page so you can cut down code and be more consistent
    • Must follow the strict CS code rules
    • Requires you to reference the elements in the body section of your page
    • Uses a different commenting style: /* comment */

     

    Style rules have a standard format plus two basic parts:

     

    • Code style: selector, brackets around property/value pairs, semi-colon concluder for each property/value pairs - p {color:red; }
    • Selector: Determines which elements are affected - p {color:red;}
    • Declaration: One or more property/value pairs - p {color:red;}
    • ALL rules need to have the property/value paired style info inside brackets {}
    • All property/value pairs need a semi colon to 'finish' it.

     

    Usage in Head Section and Body Code

     

    <head>

    <style type="text/css">

    /* This is the CSS style for commenting - use only inside <style></style> section. */
    body {background-image:url(folder/imagename.ext);}

    p {font-family:arial;}

    a:link {color:#333;}
    </style>

    </head>

     

    <body>

    <!-- Your website's body will use the imagename.ext as a pattern -->

    <p>This text will appear as Arial</p>

    </body>

     

    Quick examples

    • body {background-image:url(folder/imagename.ext); color:#000; margin:0; padding:0; } /* Default white background color, black font, no margin or padding, background image */
    • body {background-color:#fff; color: #000; margin:0; padding:0; } /* Default white background, black font, no margin or padding */
    • h1, h2, h3, h4, h5, h6, body, p {font-family: verdana, arial, sans-serif; font-weight: normal;}
    • h3 {color:#336699;} /* can use #369, Header 3 is a lighter blue */
    • p {font-size:80%;} /* 80% of default html paragraph size */
    • img {border: 1px solid #000;} /* 1px black border around all images */
    • img {border-style: none;} /* hides border around all images, especially good when using image as a link too */
    • a:link {color: #990000; text-decoration:none;} /* can use #383, unvisited link is a maroon color, no underline. Note: link must come before hover, visited, and focus */
    • a:hover {font-size:120%; color: #000000;} /* can use #000, mouseover link makes text bigger. Note: hover must come after link and before visited and focus */
    • a:visited, a:focus {color: #666666;} /* can use #666, visited link is a medium gray. Note: visited and focus must come after link and hover. */
    • table {border: 1px #ccc solid; vertical-align:top; padding:3px; margin:6px;} /* can use #ccc, instead of #cccccc */
    • td {background-image:url(folder/imagename.ext); background-repeat:norepeat;} /* Non repeating background image. To repeat downward only, use repeat-y. To repeat to the right, use repeat-x. */

     

     

    BACK TO TOP

     

     

    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

     

     

    BODY SECTION Inline CS Styling Rules

     

    Cascading Style Rules are the method you use create a style to apply to your XHTML code. These can be coded in the Body Section of your web page, although you should move away from this method as soon as you get a handle on basic styling. Style rules have a standard format plus two basic parts:

     

    CHEATSHEET

     

    ALL XHTML styling MUST always use: style="".

     

    • Quote markes MUST be double, not single.
    • Can only be used inside of a style="" attribute for another tag, such as <p style=""></p>, img style="" />.
    • Code style: tag/selector, style segment, semi-colon concluder for each attribute/value pair
    • Selector/element/rule: Determines which elements are affected - <p style="font-size:2; color:#D00000;">
    • Declaration: One or more attribute/value pairs - <p style="font-size:2; color:#D00000;">
    • ALL rules need to have the attribute/value paired style shown after style=" and must close with another " (quote marks)
    • Attribute: <p style="font-size:2; color:#D00000;">
    • Value: <p style="font-size:2; color:#D00000;">
    • All measurements need a qualifier - px, %, etc.
    • Every attribute/value pair needs a semi colon to 'finish' it.
    • You cannot use text, image or link styles for table, table row, or table data cell tags.
    • You cannot use table, table row, and table data cell items for text and images.

     

    Quick examples

    • general use and format - normal tags: <tag style="elementattribute1: value; elementattribute2: value;"> </tag>
    • general use and format - self-closing tags: <tag style="elementattribute1: value;"  /tag>
    • body background image: <body style="background-image:url(folder/imagename.ext);"></body>
    • body background color: <body style="background-color:#990000;"></body>
    • body text: <body style="font-family:Arial; text-align:center;"></body>
    • text font and margin: <h2 style="font-family:Arial, helvetica, sans-serif; color:#333; margin:15px;" ></h2>
    • text size, color, and centering:<p style="font-size:4; color:#ccc; text-align:right;"></p>
    • text and line spacing:<p style="line-height:90%; letter-spacing:2px;"></p>
    • text left padding (indent):<p style="padding-left:10px;"></p>
    • text link color:<a href="url" style="color:#999;"></a>
    • text span styling:<span style="color:#480000; font-size:x-large; font-style: italic;"></span>
    • image width and border: <p><img style="width:300px; border-style: none;" /></p>
    • image/text wrapping: <p><img style="float:right;"></p> for a left image text wrapping, and float:left for a right image text wrapping.
    • table:<table style="text-align:left; border: 1px black solid; background-color:#ccc;" >
    • table: <table style=" border:2px #003 solid; border-collapse:collapse;">
    • table:<td style="width:50%; vertical-align:top; background-image:url(folder/imagename.ext);"> </td>
    • div: <div style="margin-left:20px; font-family:sans-serif; font-variant: small-caps; line-height: 50px;" ></div>

     

    Colors

    • Use HEX colors (Always use the # in front of the color: #ffffff)
    • Use HEX colors with six of the SAME letter or number can be truncated to the first 3: #000000 = #000, #cccccc = #ccc.
    • background-color: - <table>, <tr>, <td>, <body>, text tags
    • border-color, border-style, border-color - <td>
    • color: - for text coloring only
    • W3C web safe colors

     

    Accessibility

    • Images: alt and title attributes required
    • Links: name attributes required

     

     

    BACK TO TOP

     

     

    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

     

     

    BODY SECTION: Basic Styling - HTML Starter

     

    Muchof embedded/inline attribites and styling options have gone out of date, but here are a few reliables.

     

    Links

    • Link: <a href="URL" title="title">Text Here</a> Creates a hyperlink by clicking on text.
    • Linktypes: <a href="linktype">Text Here</a>. Can choose ftp://ftp.site.com/path; news;newsgroup, news:article, mailto:name@site.com, telnet://site
    • Anchor: <a id="anchorname">NO TEXT</a> Creates an anchor location within a document.
    • Anchor Link: <a href="#anchorname">Text Here</a> Anchor link so you can click to scroll to the anchor id (listed just above), Needs the # before assigned name
    • Linking Image: <a href="imagename" name-"name"><img src="image.jpg" /></a> Links to an image that you click on instead of text.
    • Creates keyboard shortcuts for links: <a href="URL" accesskey="value">Text Here</a>
    • Open the link in another tab/window: <a href="URL" title="title" target="_blank">Text Here</a>
    • Change link color: <a href="URL" style="color:#000;">Text Here</a> Can't change visited or hovered links with embedded/inline code.

     

    Basic Inline Text styles

    • Bold and Italics <strong>, <em>
    • Sub and superscripts: <sub>, <sup>
    • Blockquotes: <blockquote>
    • Pre: <pre>
    • Quote: <q> - doesn't work on all browsers anymore.

     

    Text Additions

    • List-Unordered (bullet): <ul><li></li></ul>, list attribute type="value" is depreciated.
    • List-Ordered (number): <ol><li></li></ol> list attribute type="value" is depreciated.
    • List - definition (check the book)

     

    Tables

    • Table: style="border: 1px; background-color:#ccc; width:80%;" or width=""
    • Table data cell (td): colspan="", rowspan=""
    • Table header cell (th): colspan="", rowspan=""
    • There are NO styling options for Table Rows (tr)

     

    StandAlone Tags - including Image

    • Break: <br />
    • Horizontal Rule: <hr />
    • Image: <img src="location" alt="image info" title="image info" />. MUST have alt, title
    • Meta tags: <meta name="name" content="content" />

     

    DO NOT EVER EVER NEVER USE these tags and attributes:

    • center
    • font
    • basefont
    • menu
    • font
    • br
    • b
    • i
    • u
    • NO on these attributes: align=, valign=, bgcolor=, bgANYTHING=, border=, height=, hspace=, alink=, vlink=, width=, vspace=, size=, hr=noshade, border=, link=, type=, value=
    • NO NO NO NEIN NYET UNH-UNH NOnononnonono!!

     

    Your code and styling must be consistent with XHTML 1.0 Transitional or Strict, not older versions of HTML.

     

     

    BACK TO TOP