Quick Reference – CSS

Chapter 1 – Introduction to CSS

What is CSS?

CSS, which stands for Cascading Style Sheets, is a language used alongside HTML to separate a webpage’s content (the HTML part) from the design and formatting (the CSS part). It defines fonts, colors, margins, lines, height, width, backgrounds, images, positions and other visual aspects of a webpage, something which HTML was not originally designed to do. Simply put, CSS decides how your HTML is displayed.

CSS is supported by all modern browsers today, however each browser (and each version of each browser) may interpret CSS in different ways. It is always best to view your documents in multiple browsers to check their appearance in each one.

CSS can be applied to an HTML document using any one of three methods:

  • Inline: CSS is added directly to an HTML element.
  • Internal: CSS is added to an HTML file’s header and affects the elements in that document.
  • External: CSS is maintained in an external file containing only CSS and referenced by the webpages on your website.

CSS is a very powerful tool, as it affects the mood and tone of your entire website with the benefit of less code and more options than HTML.

CSS Syntax

The CSS syntax is a set of rules that define how CSS should be written. CSS is, in that sense, no different from any other language. If I wrote this sentence backward and upside down, it would not be following the rules, and it is doubtful that anyone would understand it. When a web browser reads CSS code, it expects certain rules to be followed so that it can know what to do with what it is reading.

Although there are three different ways that CSS can be applied to an HTML document, the basic syntax is the same. That syntax is:

selector { property: value; }

The “selector” will specify which HTML element that the style will apply to. For example:

p { property: value; }

The “p” is an HTML element meaning “paragraph”, so this selector value will apply to all paragraph elements found in the HTML file.

The “property” will specify which attribute of style that you want to change. For example:

p { border: value; }

The “property” is now set to “border”, meaning that we are telling the browser that we want all of our paragraphs to have a border. The “value” will tell the browser what type of border that we want. For example:

p { border: 1px dotted #000000; }

This example, when translated to plain English, would say: “I want all my paragraphs to have a border! I want this border to be a dotted black line that is 1 pixel in size on all four sides!”. CSS values are demanding little things, aren’t they?

In CSS, multiple declarations can be made, and whitespace is ignored, so the following two examples mean the exact same thing to the browser:

p { margin: 0; border: 1px dotted #000000; }

p {
margin: 0;
border: 1px dotted #000000;
}

CSS allows selectors to be grouped together (comma separated) if the same style applies to them all, as shown in the following example, which specifies that all text inside of these HTML elements should be green:

p, h1, h2 { color: green; }

It is important to note that a full colon is used to separate the property from the value, and a semicolon is used to express the end of the value, or declaration. The braces { & } are also necessary to determine which declarations apply to which selector. If any of these are forgotten, mysterious things may happen… or they may not. You’ll have to try it and see.

Inline CSS

There are three different ways that CSS can be used to style an HTML document. Inline CSS is prioritized over the other two methods (internal and external). That means that if you use more than one of these methods to try to style the same HTML file, inline CSS will override the other methods and have the final say in the document’s style.

The syntax, or rules of application, that inline CSS uses is a little different than the syntax used in internal and external CSS, mostly because inline CSS is applied directly to each HTML element, instead of being applied to all instances of an element with only one declaration. You will notice that the “selector” does not need to be specified in inline CSS.

Inline CSS is used in the following manner:

<p style="border: 1px dotted #000000;"> </p>

The paragraph tags <p> & </p> should be familiar to you. The style attribute, style=””, which contains the property and the value, might also have a familiar look and feel to it. It is used in place of the braces { & } that are used in internal and external CSS.

Inline CSS defeats two major purposes of using CSS, one by cluttering up your HTML file when the style could be kept separate, and another by causing unnecessary repetition by having to manually apply the same style to every element in the file. This is why inline CSS should only be used for styles that do not apply to every element in your file or on your website.

External CSS

External, or linked style sheets are ideal when the same style is applied to an entire website, as the style can be maintained by editing a single file. There are two parts to external style sheets, the link to the CSS file, and the CSS file itself.

External style sheets are linked to an HTML file by adding the <link> tag into the head of each HTML file.

<html>
<head>
<link rel="stylesheet" type="text/css" href="myboringfilename.css">
</head>
<body>
<p>You page content goes here.</p>
</body>
</html>

Inside the link tag, the “rel” attribute defines the relation between the current document and the linked document. The “type” specifies the type of document linked, and the “href” is the file name and path to the css file.

We also need the external CSS file that is being linked to. Any CSS stylesheet, containing only CSS, must be identified by a “.css” file extension, similar to how an HTML file is identified by its “.html” file extension. I would not recommend the use of word processors (i.e. Microsoft Word, StarOffice Writer, or Abiword) to save or create CSS files. Text editors such as Notepad or Wordpad on Windows machines, and Kwrite or Kate on Linux machines, are a better option. When saving the file, make sure that you type in the file name and the extension (example: myboringfilename.css) and that if there is a “Save as Type” dropdown option on the Save menu, that the type is set to “All Files”.

Once your CSS file is created, you can test it by saving the HTML code above into an HTML file, and saving the following example to you myboringfilename.css file:

p {
border: 1px dotted #000000;
}

Now try opening the HTML file in your browser and see what happens… this is not a science experiment, so I can assure you that even if you don’t get the result that you think you are going to get, your monitor will not explode.

CSS Classes & IDs

Classes and ids make it possible to apply multiple unique styles to an HTML element so that you can have a choice of which style you use each time you use the HTML element. If you want one paragraph on your page to have a dotted border, for example, and the other to have a solid border, classes and ids can make that happen.

Classes are identified in CSS with a dot (.) preceding the name of the class, like the example below:

.dotted-border { border: 1px dotted #000000; }
or
p.dotted-border { border: 1px dotted #000000; }

The class name is “dotted-border”. The selector (the name of the HTML element) should only be specified if that selector is the only HTML element that the class will ever apply to. The dotted-border class is then referenced from the HTML element on the webpage in the following manner:

<p class="dotted-border"> </p>

Classes can be used and re-used multiple times on the same page, but ids can only be used once on each page. This makes ids ideal for styling navigation and other unique elements. Remember it this way: While a class implies a number of people, an id (short for identification) would be unique to one person.

Ids are identified in CSS with a number sign (#) preceding the name of the id, like the example below:

#solid-border { border: 1px solid #000000; }
or
p #solid-border { border: 1px solid #000000; }

As with classes, ids do not require the selector, or the name of the HTML element, because the element is specified when the id is referenced, or called, in the following manner:

<p id="solid-border"> </p>

Classes and IDs are used for internal and external CSS, but not for inline. Can you figure out why?

Summary:

Name Symbol Description
Class . Can Use More Than Once Per Page
Id # Can Use Once Per Page

CSS Comments

Comments are useful in CSS for two main reasons:

1. Writing Notes/Reminders to Yourself Inside of a CSS File
2. Temporarily Hiding Rules/Declarations While Testing a CSS File

CSS comments will be ignored by the browser, although they can be viewed in the source code.

Each comment begins with /* and ends with */ just like PHP multi-line comments. CSS comments can span multiple lines, and can appear inside or outside of rule sets.

/* This
is a
multi-line
comment. */

p {
border: 1px dotted #000000;
padding: 15px;
/* margin: 25px; */
}

Chapter 2 – The Inner Workings of CSS

CSS Display

You can probably guess that we will now be discussing how elements are displayed, or more precisely, how visible is element is or is not, and how much space an element will take up on the page.

In case you are not familiar with “block-level” and “inline” elements we will summarize them. Block-level elements stand out, using up 100% of the available width and forcing line breaks before and after the element. Inline elements do not interrupt the flow of the elements surrounding them, and only take up as much room as they need.

CSS allows you to over-ride an HTML element’s default and specify whether or not the element is block-level or inline. An example of this is:

For Inline CSS:
<p style="display: block;"> </p>
<b style="display: inline;"> </b>
For Internal or External CSS:
p { display: block; }
b { display: inline; }

So what would this example mean? Not much! The paragraph element is, by default, a block-level element and the bold element is inline. Switching the display type, however, forces the paragraph to become inline and the bold element to become a block-level element. Hmmm, the possibilities… will become more clear as we continue.

In the meantime, another display option is available. The use of “none” as a display value will cause the contents of the element to not appear on the webpage.

<p style="display: none;">I want a hair cut please.</p>
<p style="visibility: hidden;">Certainly, which one?</p>

Neither of the above elements will show up on a webpage, but the element containing “visibility: hidden;” will take up space on the webpage, while “display: none;” will not take up space. Again, rarely useful, but now you know!

In many cases, using the HTML <div> element as a container for other elements will be sufficient to create a block-level effect, while the <span> element can be used for inline formatting. Knowing the display properties will, however, be necessary for more advanced effects.

The CSS Box Model

Every HTML element is a box. It might be a large box, it might be a small box, it might not look like a box, but it is still a box. With that in mind, the box model can be described as a series of boxes placed inside one another and formatted in such a way as to create the desired effect. Box models are all about the visual presentation (layout and design) of a webpage. Let’s take a look at a very basic box model:

css-box-model

Beginning on the inside and working our way outward, we see a box containing the actual contents of a webpage, such as text, images, links, etc. The content is the most important part of the box model. The padding, border, and margin are all optional.

Padding is whitespace that fits between the content and the border so that the two do not run into one another or appear squished together.

The border can be either unspecified and invisible, or provide various visual effects that surround the content and padding.

The margin is similar to padding, except that it is outside of the border and allows the box some room to breath away from the other elements nearby.

Before you begin to think “Wow! This is too complicated!” let’s take a look at how simple it is to make a box model using CSS.

p {
padding: 15px;
border: 1px dashed #658C00;
margin: 30px;
}

Using an HTML paragraph element, and applying the above padding, border, and margin properties to that element we get the following result:

What is the difference between a guitar and a tuna fish?
You can tune a guitar but you can’t tuna fish.

If you’re willing to admit that box models might be a little bit easier than they seemed at first, then go ahead and take a look at the next few pages to learn more about applying padding, borders, and margins.

CSS Margins & Padding

Margins and padding are identical in that they both add whitespace to an area, but unique in that their areas cannot overlap. Padding is applied to the area between an element’s content and its border, while margins are applied to the area outside of the border, between the border and other elements.

CSS Margins

There are five margin properties available. Each property can accept three different types of values. These values are:

Value Purpose Example
Auto Allows the Browser to Determine the Margin or Lack of Margin margin: auto;
Length Sets a Fixed Margin In Pixels (px), Points (pt) or Font-Size (em) margin: 5em;
Percent (%) Sets the Margin As A Percentage of the Containing Element margin: 5%;

Four of the five margin properties are self-explanatory as to which margin size they are setting:

p {
margin-top: 25px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}

The fifth margin property is a short-hand of the other four. It can contain 1-4 values at one time.

margin: 5px;   /* Sets All 4 Margins to the Same Value */
margin: 5px 10px;   /* Top & Bottom Are 5px, Right & Left Are 10px */
margin: 5px 10px 15px;   /* Top Is 5px, Right & Left Are 10px, Bottom Is 15px*/
margin: 5px 10px 15px 20px;   /* Sets Top, Right, Bottom & Left */

CSS Padding

The properties and values for CSS padding are identical to margins, with the exception that the value of “auto” does not exist, and the word “margin” is replaced with “padding”.

p {
padding-top: 25%;
padding-right: 25%;
padding-bottom: 25%;
padding-left: 25%;
}

p { padding: 5px; }   /* Sets All 4 Sides to the Same Value */
p { padding: 5px 10px; }   /* Top & Bottom Are 5px, Right & Left Are 10px */
p { padding: 5px 10px 15px; }   /* Top Is 5, Right/Left Are 10, Bottom Is 15 */
p { padding: 5px 10px 15px 20px; }   /* Sets Top, Right, Bottom & Left */

CSS Borders

The border around an HTML element is, by default, invisible. CSS can be used to make the border visible and customize its style, size and color.

The style of the border must be set before that the size and color can be applied. These can all be set in a single declaration, but let’s first take a look at each individual declaration. The following border styles can be applied:

p { border-style: none; }

p { border-style: hidden; }

p { border-style: dotted; }

p { border-style: dashed; }

p { border-style: solid; }

p { border-style: double; }

p { border-style: inset; }

p { border-style: ridge; }

p { border-style: groove; }

There are four different values that can be used to set the width of each type of border:

p { border-style: solid; border-width: 1px; } /* Length Value Can Vary */

p { border-style: solid; border-width: thin; }

p { border-style: solid; border-width: medium; }

p { border-style: solid; border-width: thick; }

The default color for a border, when not otherwise specified, is black. The “border-color” property can be used to specify the color. There are three types of values that can be used:

p { border-style: solid; border-width: 1px; border-color: green; }

p { border-style: solid; border-width: 1px; border-color: #008000; }

p { border-style: solid; border-width: 1px; border-color: rgb(0, 128, 0); }

It is possible to set the style, width and/or color of specific sides of a border, instead of all four sides, by using one or more of the following properties:

border-top-color: value;
border-top-style: value;
border-top-width: value;
border-right-color: value;
border-right-style: value;
border-right-width: value;
border-bottom-color: value;
border-bottom-style: value;
border-bottom-width: value;
border-left-color: value;
border-left-style: value;
border-left-width: value;

And last but not least, you can condense the style, width and color values into a single declaration in one or more of the following manners:

p { border: 1px solid #008000; }

p {
border-top: 1px solid #0096C5;
border-right: 1px solid #008000;
border-bottom: 1px solid #FFA100;
border-left: 1px solid #008000;
}

(Keep in mind that although all of our examples here only apply borders to the HTML paragraph element, borders are not at all limited to this HTML element.)

CSS Dimensions

Now that we have explored box models, and how to set the padding, border and margin around an element, we can learn how to control the dimensions of an element, or box. If specific dimensions are not set, the size of the element will expand or contract to fit around the size of its contents, but there will be times when you will need an element/box to conform to a certain size. There are six properties for this purpose:

Property Purpose
width Sets the Width of the Box/Element
min-width Sets the Minimum Width of the Box/Element
max-width Sets the Maximum Width of the Box/Element
height Sets the Height of the Box/Element
min-height Sets the Minimum Height of the Box/Element
max-height Sets the Maximum Height of the Box/Element

The dimensions properties can accept three types of values:

Value Purpose Example Example
Auto Allows the Browser to Determine the Width or Height width: auto; height: auto;
Length Fixes The Size In Pixels (px), Points (pt) or Font-Size (em) width: 5em; height: 5em;
Percent Sets the Size As A Percentage of the Containing Element width: 5%; height: 5%;

Now we can take a look at some examples of what can happen when we control the dimensions of a paragraph element. A border is added to each paragraph so that the size is visible.

p { width: 300px; height: 100px; }

p { width: 20%; }

p { min-width: 20%; } /* Notice that when a minimum is specified the element is allowed to expand, taking up as much width and height as necessary, up to 100% of the width available. */

p { max-height: 20px; } /* Notice that when a maximum is specified, if the element has more content than will fit in the space, the content will spill over the edges of the specified space. This easily causes a problem because the contents can run into other elements on the page. */

 

CSS Dimensions

Now that we have explored box models, and how to set the padding, border and margin around an element, we can learn how to control the dimensions of an element, or box. If specific dimensions are not set, the size of the element will expand or contract to fit around the size of its contents, but there will be times when you will need an element/box to conform to a certain size. There are six properties for this purpose:

Property Purpose
width Sets the Width of the Box/Element
min-width Sets the Minimum Width of the Box/Element
max-width Sets the Maximum Width of the Box/Element
height Sets the Height of the Box/Element
min-height Sets the Minimum Height of the Box/Element
max-height Sets the Maximum Height of the Box/Element

The dimensions properties can accept three types of values:

Value Purpose Example Example
Auto Allows the Browser to Determine the Width or Height width: auto; height: auto;
Length Fixes The Size In Pixels (px), Points (pt) or Font-Size (em) width: 5em; height: 5em;
Percent Sets the Size As A Percentage of the Containing Element width: 5%; height: 5%;

Now we can take a look at some examples of what can happen when we control the dimensions of a paragraph element. A border is added to each paragraph so that the size is visible.

p { width: 300px; height: 100px; }

p { width: 20%; }

p { min-width: 20%; } /* Notice that when a minimum is specified the element is allowed to expand, taking up as much width and height as necessary, up to 100% of the width available. */

p { max-height: 20px; } /* Notice that when a maximum is specified, if the element has more content than will fit in the space, the content will spill over the edges of the specified space. This easily causes a problem because the contents can run into other elements on the page. */

CSS Overflow

The CSS overflow property can determine how a specifically sized HTML element is displayed by adding scrollbars, hiding the excess contents, or enlarging the element so that all of its contents are visible. The overflow property can accept only four values (with no more than one of those values per declaration).

The following paragraph elements will give you an example of how that the overflow property can be used.

overflow: auto;

This paragraph has a solid 1px green border, a width of 650px and a height of 100px.

If the contents of this paragraph exceed either the width or the height specified, the “auto” value will cause scrollbars to appear so that the user can scroll up and down and/or right and left to view the contents.

overflow: scroll;

This paragraph has a solid 1px green border, a width of 650px and a height of 100px.

If the overflow value is set to “scroll” the scrollbars appear whether or not the contents exceed the width and/or height specified.

overflow: visible;

This paragraph has a solid 1px green border, a width of 650px and a height of 100px.

The overflow value “visible” will prevent any scrollbars from appearing, even if the contents of the element exceed the width and/or height specified.

overflow: hidden;

This paragraph has a solid 1px green border, a width of 650px and a height of 100px.

The “hidden” overflow value will maintain the element’s size, prevent scrollbars from appearing and crop the contents so that none appear outside of the box.

CSS Alignment

HTML elements can be horizontally aligned to the left (which is the default), right or center of their containing elements. One way to do this is to set the element’s margin.

Setting the left and right margins to auto will center an element by equally splitting the available margin. Aligning an element to the left or the right requires one margin to be set to zero and the other margin to be set to auto. (Elements with a width of 100% cannot be aligned.)

This Is A Paragraph

 

If you clicked on the buttons above, you will notice that for the sake of our example, each button moves the little blue-bordered paragraph around. The text on each button describes the settings that are applied to the paragraph in order to place it in each position.

Now let’s look at a practical example by centering a little blue-bordered paragraph.

  <p style="border: 1px solid #005A98; margin-left: auto; margin-right: auto;
width: 400px;">Why does a flamingo lift up one leg?<br />
Because if he lifted up both legs he would fall over!<p>

The result is:

Why does a flamingo lift up one leg?
Because if he lifted up both legs he would fall over!

CSS Floating

Using CSS, an HTML element can be pushed, or “floated”, to the far left or the far right of its containing element, allowing text and other inline elements to wrap around it. This is a feature most commonly used on images, although some layouts use it as well.

<p style="border: 1px solid #0096C5;">
<img src="elephant.gif" style="float: right;" />
Paragraph Text Goes Here
</p>

This example, with “float: right;” in the <img /> element, will result in the following paragraph:

A doctor of psychology was doing his normal morning rounds when he entered a patient’s room. He found Patient #1 sitting on the floor, pretending to saw a piece of wood in half.

Patient #2 was hanging from the ceiling, by his feet.

The doctor asked Patient #1 what he was doing. The patient replied, “I’m sawing this piece of wood in half.” The doctor inquired of Patient #1 what Patient #2 was doing. Patient #1 replied, “Oh. He thinks he’s a light bulb.”

The doctor looks up and notices Patient #2’s face is going all red, so he asks Patient #1, “Shouldn’t we ask him to get down from there before he hurts himself?”

Patient #1 replies, “What? And work in the dark?”

(It will sometimes be necessary to set a margin around the floated element so that the surrounding text does not run into it.)

If multiple elements are floated to the same side they will be lined up next to each other, but if the “clear” attribute is set in each element with a value of “left” or “right” (depending on the side the elements are floated to), each new element will float to that side below the previous element instead of beside it.

<p style="border: 1px solid #0096C5;">
<img src="elephant.gif" style="float: left; clear: left;" />
<img src="fish-orange.gif" style="float: left; clear: left;" />
Paragraph Text Goes Here
</p>

The above example will result in the following paragraph:

While sports fishing off the Florida coast, a tourist capsized his boat. He could swim, but his fear of alligators kept him clinging to the overturned craft.Spotting an old beachcomber standing on the shore, the tourist shouted, “Are there any gators around here?!”

“Naw,” the man hollered back, “they ain’t been around for years!”

“Feeling safe, the tourist started swimming leisurely toward the shore.

About halfway there he asked the guy, “How’d you get rid of the gators?”

“We didn’t do nothin’,” the beachcomber said. “The sharks got ‘em.”

 

CSS Positioning & Layers

In the flow of a normal webpage, HTML elements are visible in the order that they are introduced, each one directly following the other. CSS can be used to interrupt the normal flow and force elements into different positions, or even cause them to overlap.

The method of positioning is set using the position property, after which the top, right, bottom and left properties are used to place the element in its position. The width and height properties can be used to control the size of each positioned element.

Positioning is by far the most difficult part of CSS to understand, but we will cover a few of the basics of each method of positioning, as an introduction.

position: static;

HTML elements are static by default, meaning that they go with the flow of the page, wherever on the page they are located. This position would only need to be set as a means to over-ride another position that has been set.

position: relative;

Relative positioning will move an element around away from the space it would normally occupy, leaving empty space.

p {
position: relative;
top: -20px;
left: 20px;
}

The top and left properties in our example are set with numerical pixel values, one negative and one positive. The negative value will cause the element to move that many pixels outside (in this case out the top) of its normal position. The positive value will cause the element to move that many pixels inside (in this case inside from the left side) of its containing element.

Relative positioning may seem difficult and unnecessary now, but it can be useful when used alongside other positioning properties to create CSS layouts, for example.

position: absolute;

Absolute positioning removes an element from the normal flow of the document and places it exactly where you tell it to. The elements surrounding an element with absolute positioning act as if the element does not exist, and will move back together without leaving an empty space for the element.

Any element that is absolutely positioned will be positioned relative to the browser window unless that element is contained inside another element that has a position set that is not a static position. In other words, if the absolutely positioned element is not inside of another positioned element, then it will, by default, position itself at the top left of the window, unless you specify exactly where to position it using a combination of the top, right, bottom and/or left properties.

p {
position: absolute;
top: 5px;
left: 5px;
}

This example will set our paragraph 5 pixels away from (below/inside of) the top of the browser window, and 5 pixels away from (inside of) the left side of the browser window.

position: fixed;

Fixed positions are nearly identical to absolute positions, in that they are removed from the normal flow of the document and fixed in an exact spot on the page while all other elements act as if it does not exist. The main difference between absolution positioning and fixed positioning is that a fixed position will remain in the spot on the page, even when the page is scrolled.

p {
position: fixed;
top: 15px;
right: 15px;
}

This example will set our paragraph 15 pixels away from (below/inside of) the top of the browser window, and 15 pixels away from (inside of) the right side of the browser window.

Layers

Elements that are moved outside of the normal flow of the document can be caused to overlap other elements. In order to determine which of these positioned elements should be on top and which should be on the bottom, the z-index property is used.

The value of the z-index determines where in the stack that each positioned element will end up when they are overlapped. Positive numerical values indicate that the element should be moved toward the top of the stack, and negative numerical values indicate that the element should be moved toward the bottom of the stack. The higher the positive value, the higher up in the stack the element will appear. The lower the negative value, the further down the stack that the element will be squashed.

p.top {
position: absolute;
z-index: 5;
}

p.middle {
position: absolute;
z-index: 0;
}

p.bottom {
position: absolute;
z-index: -5;
}

Positioned properly, the z-index layers in the above example could cause an overlapping effect like the one pictured below.

css-layers

Chapter 3 – CSS Styling

CSS Font Styling

Changing the size, color, family and other font styles is made very simple with CSS. Unique font properties can be applied to any element containing font, or applied to an entire website using the body { } selector in an external stylesheet.

CSS Font Families

There are 6 fonts that are available to most browsers/computers. The available fonts are:

Font Font-Family Description
Times New Roman Serif Characters Have Small Lines On Ends
Georgia Serif Characters Have Small Lines On Ends
Arial Sans-serif Characters Without (Sans) The Small Lines On Ends
Verdana Sans-serif Characters Without (Sans) The Small Lines On Ends
Courier New Monospace Characters Are All The Same Width
Lucida Console Monospace Characters Are All The Same Width

The font is set using the font-family property. Since not all browsers/computers have all 6 fonts available to them, more than one of these 6 fonts can be set at a time, so that a second or third preference can be used if the first is not.

body { font-family: Verdana, Arial, "Times New Roman"; }

The code above sets Verdana as the default font for the entire webpage or website, with Arial and Times New Roman as the runners-up if Verdana is not available. “Times New Roman”, or any other font with spaces in its name, must be enclosed in quotation marks.

CSS Font Size

Font size is set using the font-size property, along with one of the following values.

Value Description
length Fixed Font Size In px, cm, pt, em, Etc.
% Percentage of Parent Element’s Font Size
small Sets Font Size to “Small”
smaller Sets Font Size to “Smaller”
x-small Sets Font Size to “X-Small”
xx-small Sets Font Size to “XX-Small”
medium Sets Font Size to “Medium”
large Sets Font Size to “Large”
larger Sets Font Size to “Larger”
x-large Sets Font Size to “X-Large”
xx-large Sets Font Size to “XX-Large”

body { font-size: 14px; }
h1 { font-size: 250%; }
p { font-size: large; }

CSS Font Color

Font colors are set using the “color” property, which accepts three types of values: color names, hexadecimal values, and RGB. The following code will give some examples:

<p>
<span style="color: red;"> </span><br />
<span style="color: #0096C5;"> </span><br /><br />
<span style="color: rgb(255, 153, 0);"> </span><br />
<span style="color: #693;"> </span>
</p>

Why did the boy bring a ladder to school?
He wanted to see what High School was like!

What dog keeps the best time?
A watch dog!

CSS Font Weight

The thickness of a font is controlled by the font-weight property. This property accepts numerical values between 100 and 900, or any of the three reserved words “normal”, “bold” and “bolder” at a time.

<p>
<span style="font-weight: bold;">Why was the broom late?</span><br />
<span style="font-weight: normal;">It over swept!</span>
</p>

Why was the broom late?
It over swept!

CSS Font Style

The font-style property determines whether or not the font is italicized. This property accepts any of the three reserved words “normal”, “italic” and “oblique” at a time.

<p>
<span style="font-style: italic;">Why do cows use the doorbell?</span><br />
<span style="font-style: oblique;">Because their horns don't work!</span>
</p>

Why do cows use the doorbell?
Because their horns don’t work!

CSS Font Variant

CSS gives you the option of converting all characters to small capitals by using the font-variant property. This property accepts any one of the two reserved words “normal” and “small-caps” at a time. Note that any capitals that this property is applied to appear larger than the small caps, and that this property may not work on all fonts.

<p>
<span style="font-variant: small-caps;"> </span><br />
<span style="font-variant: normal;"> </span>
</p>

What do birds need when they are sick?
A tweetment!

CSS Text Styling

Several properties are available that can format text to increase (or decrease!) readability and add special effects.

CSS Text Spacing

Extra whitespace can be added between words, characters or lines of text using three different properties. Each property accepts a numerical value (px, pt, em, mm, cm, etc.) indicating the amount of spacing.

word-spacing: 20px;
letter-spacing: 15px;
line-height: 10px;

Where do ants go for their holidays?

Frants!

This paragraph has a low line-height value, with causes the lines to overlap one another. The higher the positive value, the further apart the lines would be spaced. A line-height value of zero causes each line to be place directly on top of the previous line… have fun trying to read that!

CSS Text Indentation

The first line of a block of text can be indented using the text-indent property with a positive numerical value.

p { text-indent: 25px; }

This paragraph begins with a 25px indentation that can be applied to all paragraphs on a webpage by adding a single line of CSS to an external stylesheet. Pretty neat, huh?

CSS Text Decoration

Text decorations are lines that go over, through, or under text, or do not show up at all. They can also cause text to blink, which can be a very annoying feature that I would not recommend for general use. Text decorations are often used to remove underlines from links, etc.

text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
text-decoration: blink;

This Is An Example of text-decoration: none;

This Is An Example of text-decoration: overline;

This Is An Example of text-decoration: line-through;

This Is An Example of text-decoration: underline;

This Is An Example of text-decoration: blink;

CSS Text Transformation

The text-transform property will change the capitalization of the text that it is applied to. Four values are available to this property.

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;

This is an example of text-transform: none;

This is an example of text-transform: capitalize;

This is an example of text-transform: uppercase;

This is an example of text-transform: lowercase;

CSS Text Alignment

Text is horizontally aligned to the left by default, but can be centered, justified, or aligned to the right using the text-align property.

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

This paragraph is aligned to the left. It is the default setting when a text alignment is not specified. It is also the easiest to read, as it is the standard that everyone is accustomed to.

This paragraph is aligned to the right. It usually makes paragraphs difficult to read, but may be useful for positioning small lines of text.

This paragraph is centered.

This paragraph is justified, meaning that it is stretched across 100 % of the available width so that the two sides of the paragraph are even. I can’t see, personally, why this is any better or worse than aligning to the left, but to each his or her own!

Vertical CSS Text Alignment

Text and can be aligned vertically using the vertical-align property. Various HTML elements, such as the image element, can be vertically aligned as well. This property accepts the following values:

length Positive or Negative Numerical Value (px, pt, em, cm, in, etc.)
percentage Positive or Negative Percentage Value (%)
baseline (Default) Aligns An Element’s Base With Parent Element
bottom Align’s Element’s Bottom With Lowest Element on Line
middle Vertically Aligns Element In Middle of Parent Element
sub Aligns Element As A Subscript
super Aligns Element As A Superscript
text-top Aligns the Top of An Element With the Top of Its Parent Element’s Font
text-bottom Aligns the Bottom of An Element With the Bottom of Its Parent Element’s Font
top Aligns the Top of An Element With the Top of the Tallest Element In the Line

CSS Text Shadows

Not all browsers support the text-shadow property, which does exactly what its name suggests, but it can be a fun effect when it is supported. This property accepts four values at one time. One value sets the color of the shadow, two values (positive or negative numerical values) set the location of the shadow, and a 4th value sets the blurriness of the shadow.

p { text-shadow: #658C00 4px 4px 8px; }

This paragraph may or may not have a shadow, depending on the browser that you are using.

p { color: black; text-shadow: 2px 2px 3px #999999; }

This paragraph may or may not have a shadow, depending on the browser that you are using.

p { color: white; text-shadow: black 0.1em 0.1em 0.2em; }

This paragraph may or may not have a shadow, depending on the browser that you are using.

Multiple sets of values can be specified at a time, comma separated, to create a glowing effect.

p {
color: white;
font-size: 25px;
text-shadow: 0 0 24px #FFA100, 0 0 4px #FFA100, 1px 1px 2px #C0C0C0;
}

This paragraph may or may not be glowing.

CSS Backgrounds

Backgrounds are solid white by default, however they can be modified by using CSS to set a specific background color and/or image, and by choosing how that a background image is displayed.

Backgrounds can be set for an entire webpage by setting the background properties in the body { } selector. They can also be set for specific elements, such as <div>, <p>, <table> and <ul>, to name a few.

CSS Background Color

The background color is set by the background-color property along with a color value.

body { background-color: #FFFF99; }

CSS Background Images

A background image can be set by using a number of individual properties, or a single background property that accepts multiple values.

The background-image property is used to set a background image. The path to the image needs to be specified.

body {
background-image: url('images/animals/seagull.gif');
}

CSS Background Repeat

By default, a background image will repeat itself on the entire webpage, both horizontally and vertically. Setting the background-repeat property can control or prevent this repetition. The background-repeat property accepts any one of four values at a time.

background-repeat: repeat; (Default Setting, Repeats Image All Over the Page)
background-repeat: repeat-x; (Background Image Will Only Repeat Horizontally)
background-repeat: repeat-y; (Background Image Will Only Repeat Vertically)
background-repeat: no-repeat; (Background Image Will Be Shown Only Once)

CSS Background Position

It may become useful to move the background image to a specific location on the webpage, or in the element that it is set in. The default location for the background image is the top left corner, but other locations can be set using the background-position property. Two values must be specified, one to set the horizontal position and the other to set the vertical position.

background-position: 25px 25px; (Length Can Be Specified in px, cm, pt, etc.)
background-position: 50% 50%; (Percentages Can Be Used)
background-position: left top; (Default Position, Equivalent to 0% 0%)
background-position: left center; (Equivalent to 0% 50%)
background-position: left bottom; (Equivalent to 0% 100%)
background-position: right top; (Equivalent to 100% 0%)
background-position: right center; (Equivalent to 100% 50%)
background-position: right bottom; (Equivalent to 100% 100%)
background-position: center top; (Equivalent to 50% 0%)
background-position: center center; (Equivalent to 50% 50%)
background-position: center bottom; (Equivalent to 50% 100%)

CSS Background Attachment

Now that we know how to set a background image in place, it is time to decide whether or not the image should scroll with the rest of the page, or stay fixed in place, allowing the page’s contents to scroll over it.

background-attachment: scroll; (Default Value, Scrolls With Page)
background-attachment: fixed; (Background Image Does Not Scroll With Page)

CSS Background

And now, last but not least, the shortcut that you didn’t know you were waiting for. The background property allows all of the other background properties to be set in a single declaration.

background: #FFF url('../images/animals/seagull.gif') no-repeat scroll top right;

The background property shown in the example above was applied to this paragraph element, along with a grey border.

It’s pretty neat what CSS can do, isn’t it?

What do you call a boomerang that doesn’t come back?
A stick!

CSS Links

If you’ve been on the internet for a few years you might be able to remember a time when text links were all identified by their blue color with underlines. Now, thanks to CSS, most links are customized to match the color and style of the website they are on, and you can follow the trend.

All of the CSS properties that can be applied to fonts (as well as most properties that can be applied to text) can also be applied to links, allowing you to determine the family, size, color, weight, style, and decoration of your links. The possibilities are endless; there are five different styles of links on this website alone. Can you find them?

a {
color: red;
font-size: 14px;
text-decoration: underline;
}

As seen by the example above, the link selector can easily be styled according to your preference using properties that we have already learned. What we now need to learn are several effects called “pseudo-classes” that are unique to links and allow different styles to be applied to links in different states. There are four states that a link can be in.

link link has not been clicked and the mouse pointer is not hovering over it
visited link has been clicked and the mouse pointer is not hovering over it
hover mouse pointer is currently hovering over link
active link is being clicked as we speak (read)

It is important to keep these four states in the order they are listed above, as this is the correct order to create a functional link.

Pseudo-classes are added to the link selector, separated by a semicolon. Any properties and values specified in one of these pseudo-classes will apply only to the links that meet the states described by the pseudo-classes.

a {
color: #6633FF;
font-size: 14px;
text-decoration: underline;
}

a:visited { color: #006699; }
a:hover { text-decoration: none; color: FF9966; }
a:active { color: #FFFF99; }

Applying the code above will produce this colorful little link:

flamingo

CSS Lists

CSS lists, both ordered and unordered, can be customized in a variety of ways using the list-style-type property.

CSS Ordered Lists

The list-style-type property accepts any one of twelve different values for ordered lists.

ol {
list-style-type: none;
list-style-type: decimal; (Example: 1, 2, 3, 4, 5, etc.)
list-style-type: decimal-leading-zero; (Example: 01, 02, 03, 04, 05, etc.)
list-style-type: lower-alpha; (Example: a, b, c, etc.)
list-style-type: upper-alpha; (Example: A, B, C, etc.)
list-style-type: lower-latin; (Example: a, b, c, etc.)
list-style-type: upper-latin; (Example: A, B, C, etc.)
list-style-type: lower-roman; (Example: i, ii, iii, iv, v, etc.)
list-style-type: upper-roman; (Example: I, II, III, IV, V, etc.)
list-style-type: lower-greek; (Example: alpha, beta, gamma, etc.)
list-style-type: armenian; (Traditional Armenian Numbering)
list-style-type: georgian; (Example: an, ban, gan, etc.)
}

CSS Unordered Lists

The list-style-type property accepts any one of four different values for unordered lists.

ul {
list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
}

Using Images As List Markers

The list-style-image property allows an image to be set as the list marker in place of normal bullets. Although this property can be applied to both ordered lists and unordered lists, it is better to apply it only to unordered lists, and to specify the list-style-type property as well, so that it can be used if the image is for some reason unavailable.

ul {
list-style-image: url('../images/bullet.gif');
list-style-type: disc;
}

These two preferences can be set in one declaration using the list-style property.

ul {
list-style: disc url('../images/bullet.gif');
}

  • This Is An Unordered List With Images Replacing the Bullets Using CSS
  • What do you call an ant who skips school?
  • A truant!

CSS Cursors

What is black and white and red all over? A sunburnt zebra! Why does the mouse pointer change when it hovers over this paragraph? Because I told it to. How did I tell it to? CSS!

Modern browsers support seventeen different values that can be applied to the cursor property to replicate different icons. Hovering over each description below will give you an example of each icon.

Value Description
auto This Is the Default Cursor Set By Each Browser When Hovering Over Text
default This Is the Default Cursor When Not Hovering Over Text
pointer This Cursor Looks Like A Finger Pointing
text This Cursor Indicates the Mouse Is Hovering Over Text
crosshair This Cursor Looks Like Crosshair
help This Cursor Should Indicate That Help Is Available
move This Cursor Indicates That Something Can Be Moved
wait This Cursor Indicates That Something Is Busy
progress This Cursor Indicates That Something Is In Progress
n-resize This Cursor Indicates That A Box Edge Can Be Moved North (Up)
s-resize This Cursor Indicates That A Box Edge Can Be Moved South (Down)
e-resize This Cursor Indicates That A Box Edge Can Be Moved East (Right)
w-resize This Cursor Indicates That A Box Edge Can Be Moved West (Left)
ne-resize This Cursor Indicates That A Box Edge Can Be Moved North/East (Up & Right)
nw-resize This Cursor Indicates That A Box Edge Can Be Moved North/West (Up & Left)
se-resize This Cursor Indicates That A Box Edge Can Be Moved South/East (Down & Right)
sw-resize This Cursor Indicates That A Box Edge Can Be Moved South/West (Down & Left)

Applying a value to the cursor property is pretty much self-explanatory:

cursor: help;
cursor: move;
cursor: pointer;

Don’t have too much fun with cursors, because you run the risk of confusing your visitors.

CSS Pseudo-Elements

Pseudo-elements can be used to style specific portions of an element. (They are also called “selectors”.) A common example would be adding an indentation to the first line of every paragraph element, without having to manually add HTML spaces to each element.

Pseudo-elements are attached to a selector with a full colon, and accept common styling properties such as color, font and background.

:first-letter

This pseudo-element affects the first character of the element (selector, class or id) that it is applied to. It accepts the following properties:

  • background
  • border
  • clear
  • color
  • float
  • font
  • line-height
  • margin
  • padding
  • text-decoration
  • text-transform
  • word-spacing
p.fls:first-letter {
font-size: 20px;
padding-left: 15px;
}

The first letter of this paragraph, which happens to be a “T”, is styled differently than the rest of the paragraph using a class called “fls” to which the :first-letter pseudo-element is applied with the properties shown in the example above

:first-line

This pseudo-element affects the first line of the element (selector, class or id) that it is applied to. It accepts the following properties:

  • background
  • clear
  • color
  • font
  • letter-spacing
  • line-height
  • text-decoration
  • text-transform
  • vertical-align
  • word-spacing

p.flis:first-line {
color: #658C00;
text-decoration: underline;
}

The first line of this paragraph is styled differently than the rest of the paragraph using a class called “flis” to which the :first-line pseudo-element is applied with the properties shown in the example above

:before & :after

These pseudo-elements can be used to add content before and/or after each element they are applied to. The “content” property should be used to specify the content to be inserted. That content can also be styled using other properties.

p.quote:before {
content: url(quote-before.gif);
}

p.quote:after {
content: url(quote-after.gif);
}

Applied, the above example might look something like this:

Keep smiling; it makes people wonder what you’re up to.

Chapter 4 – Advanced CSS

CSS Layouts

Laying out your webpage is a process which should begin with a sheet of paper or a graphical computer program, as you decide what you want your website to look like, because the design itself can “make or break” a website all on its own.

For a website layout you will need to decide how many columns are necessary, and if a header and footer will be added. The example that we will be using here is a simple two-column layout with a header, a footer and a width of 100%, which expands and contracts according to the size of your screen:

HTML-2-Column-Layout

This layout can be brought to life using the following code:

<html>
<head>
<title>An HTML And CSS Webpage Layout</title>
</head>
<body style="margin: 0; border: 0;">

<div style=”width: 100%; background: #006DA6;”>Header</div>

<div style=”float: left; width: 100%;”>
<div style=”margin-left: 280px;”>
<div style=”margin-top: 0; background: #FFA100;”>
<br /> <br /> Contents <br /> <br /> <br />
</div>
</div>
</div>

<div style=”float: left; width: 280px; margin-left: -100%;”>
<div style=”margin-top: 0; background: #658C00;”>
<br /> <br /> Navigation <br /> <br /> <br />
</div>
</div>

<div style=”width: 100%; background: #006DA6;”>Footer</div>

</body>
</html>

Better yet, CSS allows us to divide our style from our content and cut down on the clutter by putting all of that CSS into a separate file. The HTML file will contain the following code:

<html>
<head>
<title>An HTML And CSS Webpage Layout</title>
<link rel="stylesheet" href="boring-style-file-name.css" type="text/css">
</head>
<body>

<div id=”header”>Header</div>

<div id=”content-container1″>
<div id=”content-container2″>
<div id=”content”>
<br /> <br /> Contents <br /> <br /> <br />
</div>
</div>
</div>

<div id=”navigation-container”>
<div id=”navigation”>
<br /> <br /> Navigation <br /> <br /> <br />
</div>
</div>

<div id=”footer”>Footer</div>

</body>
</html>

The external CSS stylesheet, referenced above as being a file called “boring-style-file-name.css” should contain this code:

body {
margin: 0;
border: 0;
}

#header {
width: 100%;
background: #006DA6;
}

#content-container1 {
float: left;
width: 100%;
}

#content-container2 {
margin-left: 280px;
}

#content {
margin-top: 0;
background: #FFA100;
}

#navigation-container {
float: left;
width: 280px;
margin-left: -100%;
}

#navigation {
margin-top: 0;
background: #658C00;
}

#footer {
width: 100%;
background: #006DA6;
}

Go ahead and make some files and try it out!

CSS Attribute Selectors

Most HTML elements support attributes, which can be used as CSS selectors by defining the attribute in braces [].

The most basic example of an attribute selector is:

[href] { color: teal; }

This example basically colors the text of all elements containing the “href” attribute. A more specific example will also name the element selector:

a[href] { color: teal; }

There are other ways to style elements, so what’s the point? The point is that attribute selectors allow you to play with the value of the attribute to produce unique results. Consider the following:

a[href=http://www.lessons99.com/] { color: teal; }

Now the style is only applied if the anchor element <a> contains an “href” attribute with the value of “http://www.lessons99.com/”.

Identifying the type of a document that is being linked to, and adding an icon next to that link, is one of the most common uses of attribute selectors.

a[href$=".pdf"] {
padding-left: 20px;
background: url('images/examples/pdf.gif') no-repeat left center;
}

Now, using “$=”, we have declared that any href attribute that contains a value of “.pdf” should have an icon that identifies the linked document as a PDF file. The result is:

CSS Cheat Sheet

Now you can put some attribute selectors together and come up with your own unique styles.

Comments