Quick Reference

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.

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:

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:

CSS Comments

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:

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.

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:

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:

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:

(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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

CSS Unordered Lists

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.

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: