CSS Basics

What is CSS anyhow? CSS is alternatively called a Cascading Style Sheet. Great! Now that we know what CSS stands for, we can start to learn! HA! We need to know a little more about them before we start learning, however.

What is CSS anyhow?

• Cascading Style Sheet
• These styles define how to display HTML elements
• Using external stylesheets can save time and work!
• External Style Sheets can be saved in CSS files “myfile.css”

Beyond this list, CSS is a way to display elements within an (X)HTML page. You can easily create global values that will spread across multiple pages of your website if you choose to do so. External Style Sheets save time and unnecessary work for you.

Is CSS supported by Browers?

Yep! CSS is supported by all modern browsers whether you use Mozilla Firefox, Google Chrome, Microsoft’s Internet Explorer, Opera, etc.. CSS is supported.

Syntax

Yay for learning!! Now we learn some of the basics of CSS syntax. We must follow this syntax in order to write CSS. Like HTML, CSS has a “start tag” that is really called the SELECTOR. An HTML “attribute” is equivalent to a CSS PROPERTY and the HTML “value” is the same as a CSS VALUE.

Here is the general syntax for CSS that we must use!

1

selector {property: value;}

Assuming you have prior knowledge with HTML4.0 or XHTML 1.0 Transitional (or beyond) then you know the general markup for a standard html page. Note: This is not all that w3c requires to validate your webpage, this is for pure explanatory purposes. Example below:

1

Content goes here

The CSS selector is usually the (X)HTML element/tag you wish to define, the property is the attribute you want to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces which are like the opening a closing tags of HTML. Example:

1

body {color: blue;}

This will set all text within the body tags of an (X)HTML page to the color of blue. You may also use rbg or hex values as well. Another example is:

1

p {font-family: "sans serif";}

This will set all text within a p tag to sans serif text. Note: be sure to put properties with multiple values in double quotes.

CSS Selectors with multiple Properties

Now that we have the general syntax of CSS down, we can tackle more complicated aspects or writing CSS. Here’s an example:

1

body {margin: auto; text-align: center; color: #470b0b;}

So everything within the body tags of the (X)HTML page will have a margin that is automatic (that means the browser will choose), the text of your page will be aligned to the center, and the color of the text will be #470b0b (this is a dark maroon). colorpicker.com is a great site where you can choose all sorts of colors!

Though it isn’t improper to write multiple properties on one line like in the example above, this makes your CSS less readable to someone else or even you if you have hundreds of lines of CSS. Generally, you’ll give each property its own line like so:

1
2
3
4
5
6
7
8
9

body {
margin: auto;
text-align: center;
color: #470b0b;
}

Grouping

You can have multiple selectors for one or more properties in CSS. Let us assume that you want h1, h2, h3, h4, h5, and h6 all to be orange in color. To achieve this using CSS we can use the example below:

1

h1, h2, h3, h4, h5, h6 {color: orange;}

Each selector is separated by a comma and a space. The result will show all header elements within an (X)HTML page will be orange in color.

The class selector

The class selector is how you would define different styles for the same HTML element.

Say that you want you want to have two paragraphs of text. One paragraph with blue text and the other with green text. Here’s how you would do this with a class selector:

1
2
3

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

The HTML you would put in would be as follows:

1
2
3

<p class="blue">blue text here</p>
<p class="green">green text here</p>

You may also apply more than one class selector to HTML elements. Example:

1

<p class="blue bold">bold blue text here</p>

Just be sure to actually define the class selector before you actually use it.

You may also omit the tag name in the selector if you want the class to apply to any HTML element regardless of tag. Example:

1

.center {text-align: center;}

This means that all elements within an HTML tag will be centered. The corresponding HTML would be:

1
2
3

<h3 class="center">Learn CSS Quick!</h3>
<p class="center">Learn CSS Quick!</p>

Since the class selector omits a particular tag before it, you are able to use this text-align property where ever you wish to use it.

The id Selector

You may also define CSS elements with the id selector denoted by a # in front of the selector. Example:

1

#center {color: orange;}

This id in the example above will match any element that has the id of orange to its properties and values that we type, in this case changing the text color to orange. Example:

1
2
3
4
5
6

<p id="orange">Orange text here</p>

<div id="orange">Orange text here</div>
<span id="orange">Orange text here</span>

You may also treat the id selector in the general sense (I use this very loosely) as the class selector. Consider the following:

1
2
3
4
5
6
7
8
9

p#text1 {
text-align: center;
color: red;
line-height: 1.1em;
}

This style will match any p element having the id of “text1″ so:

1

<p id="text1">Centered red text</p>

How should I name my CSS Class Selectors and id Selectors?

Generally a Class Selector will be labeled with uppercase letters, lowercase letters, hyphens, and numbers that come AFTER the selector.

1
2
3
4
5
6
7

.good-selector {property: value;} This is good
.1good-selector {property: value;} This is bad
#good-selector {property: value;} This is good
#1good-selector {property: value;} This is bad

Do not start a class selector with a number! Only Internet Explorer supports this feature and other browsers do not.
Do not start an id selector with a number! Mozilla Firefox does not support this feature!!

CSS Comments

CSS comments are mainly used to explain your code to yourself and more importantly, outside readers; however, you may also use comments in the building process to easily check code. A CSS comment starts with “/*” and ends with “*/”

1
2
3
4
5
6
7
8
9
10
11
12
13

/*This is a CSS comment*/
body {
margin: auto;
line-height: 1.1em; /*This is a comment*/
color: #ffffff;
/*padding: 0px;*/ This is commented out code
}

How to link external style sheets in your source code

You can link external css documents into your source code by typing the following:

1
2
3
4
5

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

Content here

With this method, we can use one “global” style sheet for multiple pages of a website.