Category Archive: Tutorials

CSS Tutorial part 2

CSS ID Selector

Before we discuss the “ID” selector in CSS, we must first distinguish between a class in CSS and an ID in CSS. Classes and IDs are similar in CSS as both will allow you to style specific elements of your choice. However, classes were designed to be used multiple times throughout a web page. CSS IDs were designed to only be used once in a single web page.

Classes use the period (“.”) sign to denote a class. On the other hand, IDs use the pound (“#”) sign to denote a CSS ID.

Let’s use an example with the <p> tag:

p#redParagraph
{
color:#ff0000;
}

The word following the pound (“#”) sign is the name assigned to your ID. The name of the ID can be anything. In this example, if a <p> tag has the ID “redParagraph” assigned to it, the text in the paragraph would be colored red. To apply an ID to a <p> tag, we use:

<p id="redParagraph">This paragraph will be colored red.</p>

Remember, IDs should only be used once throughout an entire document. If you wish to apply a style more than once, use classes.

CSS guide

Internal and External CSS Stylesheets

Now that we have a basic idea of CSS syntax, we need to add the stylesheets and apply them to our website.

There are two types of style sheets: internal and external. External style sheets are best because they allow you to edit all your CSS in one file.

External Style Sheets

External stylesheets must be added before the </head> HTML tag. It must also be a file in “.css” format. Here’s an example:

<head>
<link rel="stylesheet" type="text/css" href="path/to/your/stylesheet.css" />
</head>

The external stylesheet should not contain any HTML or any other code. Only CSS is allowed. Here’s an example of what’s contained in an external style sheet:

p {color:#ff0000;}
font {color:#000000;}
div {text-align:right;}

Internal Style Sheets

Internal stylesheets are style sheets stored inside the same web page it’s styling.

Just like external stylesheets, internal stylesheets should be placed above the HTML </head> tag.

<head>
<style type="text/css">
<!--
p {color:#ff0000;}
font {color:#000000;}
div {text-align:right;}
-->
</style>
</head>

If a web page is using both an internal and external stylesheet, and both style sheets have definitions for the same element then CSS will use the definition from the external style sheet. For example, if a web page uses both an external and internal stylesheet that both contains definitions for the <h3> tag, the definition for the <h3> tag used in the external style sheet will be used on the web page. (more…)

CSS Tutorial

Introduction to CSS

Before beginning with CSS, you should be comfortable with either HTML or XHTML. These languages are usually interwoven with CSS.

Originally, HTML was designed to define elements in a document or web page. For example, a paragraph would be known as <p>, a link would be <a>, and so forth.

As internet browsers kept adding more formatting tags (such as the <font> tag), it became difficult and cumbersome to style a web page due to the lack of a single coherent standard. CSS (Cascading Style Sheets) were introduced by the World Wide Web Consortium (W3C) to remedy this problem.

CSS is supported by all major browsers.

What Are Style Sheets?

Style sheets are separate documents that define how our HTML elements should appear. For example, should all text in tables be presented as a blue font color?

Style sheets allow us to centralize the styling elements of our entire website into one document. This can save a lot of work when you want to change your layouts, fonts, and more.

External style sheets are usually saved in .css format.

CSS Tutorial

The “Style” Attribute in CSS

The “style” attribute is an HTML attribute often used in conjunction with CSS syntax.

The “style” attribute can be applied to almost HTML element from the <table> to the <body> tag.

The basic syntax for the style attribute is:

<div style="">

In our example, we used the “div” HTML element. Once again, the “style” attribute can be applied to any HTML element — not just the “div” element.

Inside the quotation marks for the style attribute, we place any CSS code.

Here’s another example:

<div style="font-size:12pt;">

This time, we used a little bit of CSS code (which we will explain later in the tutorial). Notice we ended with a semi-colon. This is used to separate CSS statements. We can apply multiple CSS statements in one “style” attribute by separating them with semi-colons as follows:

<div style="font-size:12pt;font-weight:bold;">

The individual CSS code will be explained later in the tutorial.

The “style” attribute can be used on nearly every HTML element. However, the “style” attribute is not recommended. It’s better to use an external style sheet to store and centralize all of your CSS code. A single style sheet can reduce page load times and make it easier to manage your website.

CSS Syntax

We will now begin to use external style sheets. To start with CSS, just create a file with the extension “.css” to begin.

CSS syntax is composed of the selector, the property, and the value.

It’s usually written in this form:

selector {property: value}

The “selector” is the HTML element you want to modify. This can be the <body> tag, the <font> tag, and more. The “property” is the attribute to modify and the “value” is the modification applied to the property.

Let’s use a real world CSS example:

font {color:#000000}

#000000 is the hexidecimal (hex) code for the color “black.” Please refer to our HTML text formatting tutorial for a more in-depth explanation on hex codes.

The above CSS code will turn all text enclosed in the <font> tag to be colored black. (more…)