Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / CSS / The basics of CSS explained

Jul 21, 2009 By Jared Heinrichs Leave a Comment

The basics of CSS explained

In this post I will go over the basics of CSS. In a nutshell CSS can not be used by itself. It is a markup language that allows you change the characteristics of HTML tags like “p”, “h1”, “h2” etc. You can easily change the color, size and position without making your HTML code look muddy. CSS also allows you to re-use your styles accross multiple pages.

What is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles are normally stored in Style Sheets
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files
  • Multiple style definitions will cascade into one final definition.

Styles Solved a Big Problem

The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of a document, like:

<p>This is a paragraph.</p>

<h1>This is a heading</h1>

When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.

To solve this problem, the World Wide Web Consortium (W3C) – responsible for standardizing HTML – created CSS in addition to HTML 4.0.

With HTML 4.0, all formatting can be removed from the HTML document and stored in a separate CSS file.

All browsers support CSS today.

CSS Saves a Lot of Work

Styles sheets define HOW HTML elements are to be displayed.

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single CSS document!

Multiple Styles Will Cascade into One

Style sheets allow style information to be specified in many ways.

Styles can be specified:

  • inside an HTML element
  • inside the head section of an HTML page
  • in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

Cascading order – What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

*NOTE* If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

My first example is going to rely on 2 files.

  1. index.html
  2. default.css

You can name these files what ever you want but please make sure to update the HTML code to always point to the .css file.

index.html contents

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>This is a test</title>
<link rel=”stylesheet” type=”text/css” href=”default.css” />
</head>
<body>
<div>
<div>
<h1 id=yellow>Header</h1>
</div>

<div>
<h1>Body</h1>
</div>

<div>
<h1 id=yellow>Footer</h1>
</div>

</div>
</body>
</html>

default.css contents

/* CSS Document */

#yellow
{
color:green;
}

h1
{
font-size:50pt
}

.main_header h1, .main_body h1
{
color:red;
text-align:left;
}

.main_header h1
{
color:blue;
}

Can you guess what the output will yield? See below for what the output will closely look like.

Header

Body

Footer

You might be wondering why:

  • I thought items further down the css file have higher Priority then items higher on the page.
  • <h1> tag under main_header is not “RED”
  • <h1> tag under main_header is not “BLUE”
  • Why are all the <h1> tags all the same size?
  • Why is “Header” and “Footer” green? Shouldn’t they be yellow?
  • What’s the difference between “IDs” and “CLASSES”

Why the <h1> tag is not RED or BLUE.

There are two main CSS types. “IDs” and “Classes”. You can tell which items in a css file are id’s by looking for “#”. The ID type is has a higher priority then classes. Even if a CLASS comes after an ID, The ID will always win out on the characteristics that it wants to change.

Why are all the <h1> Tags the same size?

The reason why all the tags are the same size is that I created a “h1” class all by itself. This type of class will effect all <h1> tags in the page the same way unless you change the characteristics of the item with a “id” or a “class” further down the CSS page.

Why is the “header” and “Footer” green?

The reason for this is even though I called the ID “yellow”, I made the text color green. Now you might say “why the heck did you do that?”. I did it to prove a point. The title has no correlation to the properties of the item.

What is the difference between “IDs” and “CLASSES”?

The difference between IDs and CLASSES are “CLASSES”  tend to be used to make general changes to specific HTML tags and can be only used once. ID’s have higher priority then CLASSES which make them good at over written the default settings the CSS classes. ID’s can be used several times on a page.

Interested in learning more about CSS? Here is a few good links:

Intro to CSS by w3Schools

How to format CSS files

Filed Under: CSS

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design