Web Design/CSS

Cascading Style Sheets(CSS)

Introduction

What you'll need to know

Since CSS formats HTML you will need to know some of the basics:

How to create a HTML file, *.html.
<html>...</html>, <head>...</head>, <body>...</body> tags
<p>..</p>, <h1>...</h1> tags

If you haven't had any experience with HTML or would like a refresher check out Build a basic web page.

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.
With CSS you can change the font, size, color, background, and even position of text.
CSS was developed primarily to separate the formatting and presentation of a site from it's content and structure, the HTML.
CSS can be used three different ways: Inline, Embedded, and External.
A single External CSS file can be used by many pages on a website, making the process of changing the look of an entire site as simple as editing one file.
CSS will greatly improve the look and feel of your website and save hours of time…after spending a few hours learning it.

The Basics

Inline CSS (OK only in certain circumstances)

Inline CSS is the simplest way to format your HTML, it is also universally considered bad form, therefore, you should never, ever use it on a published site unless there are justifiable circumstances.

The main purpose of CSS is to separate the presentation from the structure and content (HTML).

If you choose to use inline CSS you will create a site that is difficult to maintain and lose the benefits of the cascading effect over all your pages.

That being said we will go over its use because beginning the simplest form of CSS, it’s the best way to learn some basics. Let's start with a plain heading tag:

		<h1>Hello World!</h1>

Viewing this in web browser will show "Hello World" in black Times New Roman font. What if we want to have the text in red? Well we just add in some inline CSS:

		<h1 style="color: red">Hello World!</h1>

Simple, right? You can do this with any CSS styling, let's say we want to have our header centered:

		<h1 style="color: red; text-align:center">Hello World!</h1>

Notice that there is no space between the colon and center, that's because in CSS white spaces (spaces, tabs, and line breaks) do not matter. You can place all of your CSS on one line, though it would be hard to read. Also notice that there is a semicolon between the end of the color property and the beginning of the text property, think of this and placing a comma between a list of items or numbers (1, 2, 3 is not the same as 123).

Inline CSS should not really be used for the reasons listed above, but feel free to go through the CSS References (unfinished) and try out some different styles to see what all CSS can do. Also check out the Inline Styles tutorial for more examples.

Embedded CSS (better)

Embedded CSS is a better alternative to inline, here the CSS is separated from the structure and content(HTML), but it's still located in the HTML file. This style of CSS is best for single pages or if you would like to quickly experiment with site wide changes on a small scale. Embedded CSS should be located in the head of the HTML inside of the style tag. You can technically places the style tag in the body of the HTML but this means that the content will load THEN be styled. Meaning it will flicker into the color or font you specified and is generally a sign of bad craftsmanship and should be avoided. So to insert CSS into your HTML all you need in the style tag in the head.

		<head>
		<style type="text/css">
		</style>
		</head>

So if we wanted to take our original Hello World header and color is red here all we would need is the same coding:

		<head>
		<style type="text/css">
		h1 {
		color: red;
		}
		</style>
		</head>

There are three sections to this CSS code. First the Selector, this tells the browser what HTML element to grab, it can be a tag name, id, or class (we'll go over these later). Here we are telling the browser to grab h1. Second is the Property, this states what part of the grabbed element we will be changing. Here we are stating that we would like to change the color. Lastly is the Value, this tells the browser what we would like to do with part of our grabbed element. Here we tell the browser that we want to change it red. So in simple English we are telling our browser, color h1 red.

One more thing to point out is the format that the CSS is written. As mentioned before white spaces don't matter, but readability does. So you can place all three sections and curly braces in one line, but coming back and editing fifty lines of CSS this way will only lead to headaches and frustration. So it's ok for small presentation changes but on the large scale go with this format. The curly braces are also a very important part of the CSS if you forget to close one everything written afterwards will not work.

Now lets center our header and give it a thick black, dashed border. It's not as hard as it might sound:

		<head>
		<style type="text/css">
		h1 {
		color: red;
		text-align:center;
		border-style: dashed;
		border-width: 10px;
		border-color: black;
		}
		</style>
		</head>

Here we placed line breaks after the semicolons to make the CSS easier to read and edit later. There is no limit to the number of Properties and Values you can edit with a single Selector. So you can add margin, padding, font-weight, font-size, color, background-color, etc.

Embedded CSS is a great way to get into the groove of changing the CSS on a small scale and to learn all the things you can do, so check out the CSS Reference (unfinished) and the Embedded CSS.

External CSS (best)

What makes External CSS the best option is that it give you the full power of CSS. You can quickly change the look and feel of an entire site by changing one file and once you have the CSS created adding more pages becomes much easier and faster. So let's start with how to create an external CSS page.

Using your text editor create a new file, select Save As…, and save the file into the folder with your HTML using a .css extension. That's it you will want a name that is relevant to the site so it doesn't get mixed up, but for this example we will use 'mystyle.css'.

Now that we have a CSS file created let go over the different ways to add it to you HTML page. First we will use the link tag in the head:

		<head>
		<link rel="stylesheet" type="text/css" href="mystyle.css" />
		</head>

The rel section tells the browser the relationship this file has to the HTML, using "stylesheet" indicated that this is the preferred style for this page. The type section lets the browser know that this is a CSS file and if it doesn't support it can ignore it. Neither of these are required but they are considered best practices. The most important part is the href it points to where the file you want to use is located. Just adding files like images to HTML if they are in a director different than the HTML use the backslash; "/css/mystyle.css"

Another way to add CSS to your page is with the @import statement inside the style tags.

		<head>
		<style>
		@import url(mystyle.css)
		<style>
		</head>

Now the import may seem like a simpler option when adding CSS, but(depending on who you ask) it can create a slower loading site. The upside is that you can upload several CSS files and the file loaded last overrides the files before it. If your making a simple site that this should not be an issue and either will work for you. There are several sites out there that will help you out to decide which is best for you.

With our CSS file added to the HTML we can edit our Hello World header. It's the same as in the Embedded CSS, but with in the "mystyle.css file and without the style tags.

		/* add any CSS to this file */
		h1 {
		color: red;
		text-align:center;
		border-style: dashed;
		border-width: 10px;
		border-color: black;
		}

In CSS files the comment is indicated by the opening and closing of the slashes and asterisks as shown above. That is it for External CSS if you would like to see more examples check out the External CSS tutorials and you can practice more Properties found in the CSS Reference (unfinished).

CSS Selector Classes and IDs

Classes

We mentioned earlier the basic idea of Selectors and I think it's time to go over them in more detail. Let's say you have two paragraphs and you want one to be blue and the other to be gold. Using a simple p Selector we will change both paragraphs to the same color. This is where Selector Classes come in, but first we need to make the classes in the HTML:

		<body>
		<p class="blue">Blue</p>
		<p class="gold">Gold</p>
		</body>

Here all we have done is added class="" with what ever you would like to name your class. This will be the name in which the CSS will look for in your HTML. Now let's format each of these paragraphs.

		p.blue {
		color: blue;
		}
		p.gold {
		color: gold;
		}

In order to find the right class the Selector must first be called followed by a period then the name of the class. You can use the same class name for multiple properties lets say we have two headers on our page:

		<body>
		<h2 class="blue">Blue</h2> 
		<p>&amp;</p>
		<h2 class="gold">Gold</h2>
		<p class="blue">Blue</p>
		<p class="gold">Gold</p>
		</body>

If we were to run this page the way that it is, both headers would be black. That is because we have set the CSS to change only the paragraphs. We remedy this by simply removing the p:

		.blue {
		color: blue;
		}
		.gold {
		color: gold;
		}

This tells the CSS to grab any Property with the given class name and change it's format. So you can change many different elements fonts, colors, and background, etc. by simple giving them the same class.

IDs

IDs are similar to classes in that they can be used to identify properties, but they are unique, so can only be used once in a page. Let's say we wanted to make the ampersand bold, first we add the id.

		<body>
		<h2 class="blue">Blue</h2> 
		<p id="ampersand">&amp;<p>
		<h2 class="gold">Gold</h2>
		<p class="blue">Blue</p>
		<p class="gold">Gold</p>
		</body>

Now we will add the bold styling to the CSS:

		#ampersand  {
		font-weight: bold;
		}

To identify the id we use the # sign instead of the period. We will have more on classes and how they interact with one another the CSS points system in more the advanced sections.

Selecting Entire Elements

You can also select entire elements by listing the element name in a similar syntax as shown before.^[1]

		p  {
		font-size: 12px;
		}

This makes all <p> elements have a size of 12px without adding any ID or class to the element. If you want to see more examples check out the CSS Selector Classes.

CSS Tutorials

CSS In Action

An example of the power of CSS is illustrated at Zen Garden, where various CSS templates create some very different pages using the same html code – CSS does all the work! Take a look at [http://www.mezzoblue.com/zengarden/alldesigns/]

↑ "CSS Selectors Reference". www.w3schools.com. Retrieved 2024-05-30.

[1] "CSS Selectors Reference". www.w3schools.com. Retrieved 2024-05-30.

[1]