Using CSS in HTML Basics

Styles Vs. Stylesheets

Styles are the CSS code. They can be stored in a Stylesheet, a style tag or style attribute of an HTML tag.

Stylefont-size:12px;

Page specific styles are typically kept in the <head> tag of a document. It uses the <style type="text/css"> tag. If you want your styles to be used across an entire web site or series of documents, you can create a stylesheet.

Linked or imported styles = CSS Style Sheets
Style sheets are typically written using ".css" suffix. They can be linked to your web pages by using either <style>@import("style.css"); </style>

or

<link href="css/style.css"" />

If you are just learning the difference is like splitting hairs. It used to matter more to older browsers. My practice was always to link to a master stylesheet, then use @import on that one to bring in modular styles. For example, nav.css would hold navigation styles, header.css would hold header styles, print. css would hold css for printing pages, and overrides.css would hold css for browser specific hacks.

How can I format html using CSS?

There are 4 basic ways to target html tags in css.

  1. Inline Style - USE FOR: Unique HTML that needs formatting outside of a style declaration - Apply css in the html tag
    <p style="font-size:14px;">14 PixelText </p>
  2. CSS ID - USE FOR: Unique element on a page - By using the "#" sign in the css preceding the html tag's id. Use this for unique elements on the page, since IDs are unique.

    <style type="text/css">
    #biggertext {font-size:14px; }
    </style>

    <p id="biggertext">14 PixelText </p>
  3. CSS CLASS NAME - USE FOR: Recurring elements - To use a class, you need to add css class to the html tag using class="class-name." Then in the CSS, the class name should be preceded by a "."
    <style type="text/css">
    .class-name { font-size:14px;}
    </style>

    <span class="class-name"> Some text </span>
  4. HTML TAG RE-WRITING - USE FOR: Redefining all instances of an html tag in a page or site. <style type="text/css">
    p { font-size:14px;}
    </style>

How can I get rid of the gray dotted line or outline around a link using CSS?

a { outline: 0; }

How can I get an object to appear on top of another object?


You can move it around using left, top, right, bottom properties, and layer depths using position:absolute; z-index from 0-999 (Firefox's highest is layer is 999).

.some-div { position:absolute;width:200px;left:100px;top:100px; z-index:100; }

Note: If IE and you have two relatively positioned elements with two different z-Indexes, IE appearsto ignore this. You need to have both elements in the same relative container for z-index to work.

.nav LI {
padding-right: 0px;
padding-left: 0px;
margin: 0px;
width: auto;
position:relative;
<[!--[if IE]>position:static ; < ![endif]-->
}

Image Backgrounds: You can also use images as background images and put text on top by using the background-image property.

 

How can I make a box transparent using CSS?

.tranparent {
opacity: .8;
filter: alpha(opacity=80);
}

How do I center a div or other container?

Set the parent element to text-align:center; (for IE)

.center-div {
width:800px;
margin-left:auto;
margin-right:auto;
}

What is the most effective way to handle IE/Firefox differences?

First write the firefox css then use an IE conditional statement after. If you have a large number of these statements, you can include them at the end of your stylesheet as a "CSS Override"

<!--[if IE 6]>
Special instructions for IE 6
<![endif]-->

Or in a separate stylesheet

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Why can't I set width on a css element in my design?

Some css tags are "block" type by default, and some are "inline"

<span> is inline, so it cannot have a width applied to it... unless you specify display:block in the css.

<div> is a block element by default so you can specify width and height by dedault.

How can I follow CSS formatting standards and make my code more readable?

What I believe to be the bestway to make the code stand out more distinctly from other scripts, validate in xhtml, and be most legible, CSS has evolved into a clean, readable style description language. Thes suggestions are arguable, but the cleanest CSS follows these formatting guidelines:

  1. always use lower case.
  2. css should use descriptive names that are hyphenated like .navigation-primary .navigation-secondary, etc
  3. never use camelHumped names or underscores. Camel humped names are hard to read and look bad. Underscores don't work in all browsers for IDs.
  4. these are arguable, but the bottom line is that if you want your CSS to look professional to other coders, you'll get a big head start following this protocol.
  5. import stylesheets for better code organization and easier editing.