CSS Basics

CSS stands for Cascading Style Sheets and are styles that are applied to html tags that allow easy appearance changes throughout a document. CSS can control multiple documents by being called with a separate CSS stylesheet.

Objectives:

• Inline CSS
• Internal CSS
• External CSS
• CSS Syntax
• Id and Class
• CSS Precedence

Inline CSS

Inline styles are placed in the html tag you wish to style. If you use the span tag it can style type inline without going to the next line like a block level element would.

Example:

This is blue text

Code:

This is blue text

Internal CSS

Internal styles are typically listed in the head of the html document within style tags. Internal styles look just like external styles except they are not placed in an external stylesheet.

Example:

External CSS

External CSS stylesheets are used when styles are used on several html documents. Most websites are created using external stylesheets. You can control the look of the entire website with one stylesheet. Each page must contain the style sheet within link tags in the head of the page.

Example:

CSS Syntax

The CSS structure includes a selector, property, value and format. The selector can be an element type, or a specific element or elements targeted by a specified id or class.

Selector examples include p tag, div tag, and span tag.

Property examples include color, font-size, and font-family.

Value examples would include blue, 14px, and Arial.

Id and Class

An id or class is how you name a tag. Id’s can only be used once on a document for example a footer would normally be called as an id. A class on the other hand can be used multiple time in a document.

id example:

class example:

blue paragraphy text

CSS:

#footer{
text-align:center;
}

.blue{
color:blue;
}

CSS Precedence

Sometimes CSS properties will overlap, in those cases the most specific rule will apply. A class will always take precedence over a general tag because a class is more specific. Referencing an id will take precedence over a class because an id is more specific than a class.

Example:

text