Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

CSS Basics

CSS = Cascading Style Sheets.

In previous tutorials, you have learned that xhtml defines the structure of your page.

Cascading style sheets (CSS) control how the page is presented to your visitors. Colors, margins, fonts, alignment, layout and a lot more can be controlled with CSS.

A Word About the Past

Before CSS, formatting color was normally defined within the <body> tag or with  tags.

For example, to format colors for background, text, and links, attributes were added to the body tag.

<body bgcolor="#ffffff" text="#333399" link="#cc00cc" vlink="#660099" alink="#9999ff">

To format the text color of a specific paragraph, the font tag was used.

This paragraph will be black

Some reasons to use CSS instead:

The  tag and <body> attributes bgcolor, text, link, vlink, and alink are all deprecated by the W3C
The  tag is an inline tag, so html coding could be extremely cluttered with lots of font changes. This adds weight to the file and makes troubleshooting your code harder.
Redesigning a web site using an external CSS file is less time consuming. The time savings could be phenomenal compared to a web site using  tags.
Using an external CSS file gives designers the freedom to experiment with several different designs, while never needing to edit the (x)html coding. For example, take a peek at the CSS Zen Garden web site. The basic xhtml structure is the same for every single page design, but each design is different because of the unique external CSS file.
Keeping the structure of your web page separate from the presentation of your page allows your page to be easily viewed by several different browsers (such as text readers and cell phones.)
CSS is simpler and more efficient! Your web pages will load faster and that saves bandwidth!
Search engines will have an easier time scanning your document and you might possibly be placed higher in their results.

Basic CSS Syntax

CSS might seem a little strange and intimidating initially, but give yourself a little time. Experimentation and practice are the keys to learning CSS!

CSS syntax is a different than (x)html coding.

The basic syntax of a CSS rule is selector {property: value;}

Looking at the example image below, the first element is the selector. The selector represents the element or tag you are referencing. In this case, the "p" selector represents the paragraph tag. Make sense so far?

basic css syntax

The next element is the property. This is the characteristic that effects the selector. In the above example, the property is color.

After the property, a colon (:) is typed. The [space] after the colon is optional.

The next element of the rule is the value. Every property must contain a value, which further describes the property. In the above example the value of color is the hexadecimal code #000000 (black.)

The property and value together construct what is called a declaration. One or more declarations form a declaration block.

A colon (:) is always added after the property.
It is very important to always end every declaration with a semi-colon (;)
The declaration is enclosed between opening and closing braces { }
It is possible to have more than one declaration for one property. In that situation, all the declarations will be enclosed in between the braces and each will end with a semi-colon.

Put the whole style together p {color: #000000;} and the browser will display all paragraph text as black on your page.

Four Different Ways to Define CSS

Inline
Embedded
Imported
Linked

Inline CSS

I do not recommend using inline styles. In my opinion, it’s almost as bad as using  tags, and defeats the purpose of separating content from presentation. Inline CSS can bloat your files, and cause difficult troubleshooting.

The syntax of an inline style

This particular paragraph will be black.

Embedded CSS Styles

Embedded style can be really helpful when you are first learning to code CSS, as it is very easy to edit and troubleshoot the code. I don’t recommend using it once you begin to build larger web sites, because similar to inline styles, embedded css defeats the purpose of separating content and presentation. Since embedded styles are easily accessible in your coding, it is not difficult to move them to an external style sheet at a later time.

Embedded styles are contained in a <style> tag nested in between the opening <head> and closing </head> tags.

<style type="text/css">

<!--

p {color: #000000;}

-->

</style>

Linked and Imported CSS Styles

Linked and imported styles are very similar, since they both access an external style sheet file.

An external style sheet is a file saved with the .css extension; it contains the same styles as embedded css, but without the <style> tag.

CSS Inheritance

CSS Inheritance means if a certain style is applied to an element, the child elements (descendants) will also be affected by that same style. In other words, the style is inherited.

For example, if a gray color style is applied to the p element:

p {color: #666666;}

This text will be gray.

All paragraph text including the text nested in the  tag will display as the color gray. Because the  tag is a descendant (or child) of the  tag, the style is inherited.

Take a look at this rule:

body {color: #ff0000;}

In modern browsers, the above rule will render formatting of all body elements as the color red. It includes all elements contained in the body, such as paragraphs, headings, and other text/tags nested in the <body> tag. These tags would inherit the style, unless a different style was defined for that element.

CSS Comments

When you want to leave little notes concerning your (x)html coding, you could use  right?

Well, what if you want to create notes about the CSS code, you can use CSS comments.

The syntax for CSS comments is

/* This is a css comment */

/* This is a css comment that spans more than one line. */

You may be thinking, gee, however will I remember which comes first the (/) or the (*). Very confusing, huh?

Well, I have to admit that I could never remember the exact syntax of a CSS comment, so I thought of a little hint to help me remember, and I hope it works for you too. Think of a CSS comment as a tennis match. The two players are volleying the tennis ball back and forth. The * is the ball and the / is the racket.

Like this:

/* tennis anyone? */

FAQ

How useful are CSS comments? I can’t think of anything to do with them.

Answer: As you learn more about CSS, you will find lots of great uses for CSS comments, but until then, use them to describe colors you are using. It is sometimes hard to remember what color is what when using hex codes, so comments help a lot.

body {color: #ff0000;} /* all text will be red */

Recommended Books for CSS Beginners

14 Comments

Comment by Jenn on October 16th, 2007

I think your site is lacking in the visual how-to’s many of us have already read the books but need a visual to go with what the text is talking about.

A Website should help us, not give us all the same information found on every other page.

This becomes very boring.

Good Luck, change your content and you’ll get more people.
Comment by debbie T on October 16th, 2007

Thanks for your comments, Jenn, and if I had 50 hours in a day, I would love to add more content. Just don’t have the time.

About my content, everything is rehashed everywhere else, especially when you are talking about basic CSS and XHTML.

If you can find web design info that that isn’t already found on a web page or book somewhere, then that is a real find!

I just put my own spin on explaining what I know, and if you find it boring, then I guess it isn’t for you.

This site isn’t for everyone, in fact, is there one web site that will make everyone happy?

Good luck in finding what you need! With the thousands of web design sites out there, I am sure you will find what you are looking for!
Comment by david on October 22nd, 2007

i have a question.
is web font supposed to be pixelated?
Comment by debbie T on October 22nd, 2007

Hello David,

It all depends on the font quality and monitor resolution, but yes I think that some fonts can look pixelated. A lot of the mono-spaced ones might.
Comment by Stacy Watson on November 28th, 2007

I simply don’t understand where in the source coding I put the Link tag to refrence my CSS. Fist do I upload the css directly to the server?
Secound how should the Link tag read?
I tried href=www.unionroad.org/women/Master.css
UnionRoad Women- PageName

Hello world.

Really any information you could help me with would be great.
Comment by debbie T on November 28th, 2007

This tutorial doesn’t cover linked or imported CSS sheets. You might check out the next tutorial on Embedded css.

Other than that, try searching on google for “linked css” or “external css file” – there are tons of other tutorials.

Good luck, and thanks for commenting!
Comment by ROBERT on January 24th, 2008

I recently visited your website.
it’s a very good one, very informative.
I was looking for info about creating
borders through css tags.
Comment by debbie T on January 27th, 2008

Hello Robert! Thanks for your comments, glad to hear you are enjoying the site!
Comment by ryan on February 2nd, 2008

CSS can be a little intimidating at first, but a good way to learn it is to download the Web Developer Toolbar for Firefox, pull up a web page, and take a look at the CSS code and see how it controls the page layout and appearance.
Comment by debbie T on February 2nd, 2008

Thanks for your comment, Ryan, but please refrain from spamming me with your affiliate link(s). It is a pretty slimy thing to do.

I have removed your link.
Comment by Muditha on February 26th, 2008

Thanx Debbie./ This site is really helpful to me. Im already using html, css etc. I gain knowledge by doing sites. But using ur all tutorials I really understand what Im doing. Thank you very much.
Comment by debbie T on March 5th, 2008

Thank you Muditha. I appreciate your comments!!!
Comment by sri on May 17th, 2008

need more advanced …
Comment by Amy on June 8th, 2008

this is so confusing i am trying to get a div layout for my myspace but it just isn’t working
so i have been finding really cute ones and heave read hundreds of tutorials but i am getting to confused how do u gett everything to show up