CSS Tutorial is an excellent resource for beginners who want to learn about CSS and its basics. They can also be used as a reference for experienced designers who want to refresh their knowledge on CSS.
Contents
- 1 What is CSS?
- 2 Step 1 – Beginner CSS
- 3 Step 2 – Intermediate CSS
- 4 Final Step 3- Advanced CSS
What is CSS?
CSS stands for Cascading Style Sheets. It is a language that allows web designers to specify the presentation of a document written in HTML and CSS. It is used to control the layout, appearance, and behavior of a document written in HTML and CSS. It is also used to separate content from presentation so that it can be reused or modified without affecting the rest of the document. CSS has been around since 1996 when it was created by Håkon Wium Lie, Bert Bos, and Chris Lilley.
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
All browsers support CSS today.
CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
Take Your CSS Tutorial Now!
Step 1 – Beginner CSS
Applying CSS
In-line
In-line styles are plonked straight into the HTML tags using the style
attribute.
They look something like this:
<p style="color: red">text</p>
This will make that specific paragraph red.
But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.
Internal
Embedded, or internal styles are used for the whole page. Inside the head
tags, the style
tags surround all of the styles for the page.
This would look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <style type="text/css"> p { color: red; } a { color: blue; } </style> ...
This will make all of the paragraphs in the page red and all of the links blue.
Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour…
External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:
p { color: red; } a { color: blue; }
If this file is saved as “web.css” then it can be linked to in the HTML like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="web.css" /> ...
In the CSS Advanced Tutorial, we will see that there are other ways of linking external style sheets, but this will suffice for now.
To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as “web.css” in the same directory as your HTML file.
Now change your HTML file so that it starts something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> <link rel="stylesheet" type="text/css" href="web.css" /> </head> ...
Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.
CSS Selectors, Properties and Values
Whereas HTML has tags, CSS has ‘selectors‘.
Selectors are the names given to styles in internal and external style
sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific tag.
For each selector there are ‘properties‘ inside curly brackets, which simply take the form of words such as color
, font-weight
or background-color
.A value is given to the property following a colon (NOT an ‘equals’ sign) and semi-colons separate the properties.
body { font-size: 0.8em; color: navy; }
This will apply the given values to the font-size
and color
properties to the body
selector.
So basically, when this is applied to an HTML document, text between the body
tags (which is the content of the whole window) will be 0.8 ems in size and navy in colour.
Lengths and Percentages
There are many property-specific units for values used in CSS, but
there are some general units that are used in a number of properties and
it is worth familiarizing yourself with these before continuing.
em (such as font-size: 2em
) is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size.
px (such as font-size: 12px
) is the unit for pixels.
pt (such as font-size: 12pt
) is the unit for points.
% (such as font-size: 80%
) is the unit for… wait for it… percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0
.
Because of this, it is generally accepted that ‘em’ or ‘%’ are the best units to use for font-sizes (and possibly even heights and widths, which we shall come across in the CSS Advanced Tutorial), rather than ‘px’, which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example.
CSS Colors
CSS colors are used to define the color of text, background, and other elements on a web page. They can be defined by using hexadecimal codes or RGB values.
CSS brings 16,777,216 colors to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code.
red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00
There are 17 valid predefined color names. They are aqua
, black
, blue
, fuchsia
, gray
, green
, lime
, maroon
, navy
, olive
, orange
, purple
, red
, silver
, teal
, white
, and yellow
.
transparent
is also a valid value.
The three values in the rbg value are from 0 to 255, 0 being the lowest level (for example no red), 255 being the highest level (for example full red). These values can also be a percentage.
Hexadecimal (previously and more accurately known as ‘hexadecimal‘) is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.
The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00
becomes #ff0000
, #c96
becomes #cc9966
etc.). The three-digit version is easier to decipher (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact color.
‘color’ and ‘background-color’
Colors can be applied by using color
and background-color
(note that this must be the American English ‘color’ and not ‘color’).
A blue background and yellow text could look like this:
h1 { color: yellow; background-color: blue; }
These colors might be a little too harsh, so you could change the code of your CSS file for slightly different shades:
body { font-size: 0.8em; color: navy; } h1 { color: #ffc; background-color: #009; }
Save the CSS file and refresh your browser. You will see the colors of the first heading (the h1
element) have changed to yellow and blue.
You can apply the color
and background-color
properties to most HTML elements, including body
, which will change the colors of the page and everything in it.
CSS Text
CSS Text is a CSS property that allows you to add text to an element. It is a way of adding text to an element without using HTML. This can be used for styling purposes, such as changing the color or font-family of the text, or for adding content, such as images and links.
You can alter the size and shape of the text on a web page with a range of properties, outlined below:
font-family
CSS font family is a typeface that is used to create text in webpages. It can be applied to any text within the webpage and can be used for various purposes such as body copy, headlines, and so on.
This is the font itself, such as Times New Roman, Arial, or Verdana. The font you specify must be on the user’s computer, so there is little point in using obscure fonts.
There are a select few ‘safe‘ fonts (the most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specify, the browser will go through the list until it finds one it does have.
This is useful because different computers sometimes have different fonts installed. So font-family: arial, helvetica
, for example, is used so that similar fonts are used on PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and so helvetica, which it does normally have, will be used).
Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman"
.
font-size
Font size is one of the most important aspects of design. It can make or break a website or app. This is why it is important to have the best font-size for your website/app.
CSS Font-size allows you to set custom font-sizes in your CSS code. There are three ways to use this:
1) Using Em, Px, and % as unit prefixes:
p { font-size: 2em; }
2) Setting a fixed size:
p { font-size: 16px; }
3) Using rem values to scale:
p { font-size: 1rem; }
articular style or tone.
The size of the font. Be careful with this – text such as headings should not just be a paragraph in a large font; you should still use headings (h1
, h2
etc.) even though, in practice, you could make the font-size of a paragraph larger than that of a heading (not recommended for sensible people).
font-weight
Font-weight is a CSS property that defines the weight of a font. It is used to influence the size and weight of text in an element, It is most commonly used for emphasis or to change the appearance of text in an element.
There are three font-weight values: normal, bold, and bolder. With these three values, you can create any number of weights that fall between 100% and 900%.
This states whether the text is bold or not. In practice this usually only works as font-weight: bold
or font-weight: normal
. In theory it can also be bolder
, lighter
, 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
or 900
, but seeing as many browsers shake their heads and say “I don’t think so”, it’s safer to stick with bold
and normal
.
font-style
CSS font style is a property of CSS that lets you set the font-style of a given text. It can be used to change the weight, slant, and letter-spacing of text.
This states whether the text is italic or not. It can be font-style: italic
or font-style: normal
.
text-decoration
CSS text decoration is a technique that can be used to add some flair and style to your text. There are many ways you can do this, but the most common way is by adding a background image or color behind the text.
This states whether the text is underlined or not. This can be:
text-decoration: overline
, which places a line above the text.text-decoration: line-through
, strike-through, which puts a line through the text.text-decoration: underline
should only be used for links because users generally expect underlined text to be links.
This property is usually used to decorate links, such as specifying no underline with text-decoration: none
.
text-transform
CSS text transform is used to change the way a word or phrase looks when it's displayed in a web page. It can be used to turn a word into uppercase, lowercase, or even make it appear as if it was written in different languages.
This will change the case of the text.
text-transform: capitalize
turns the first letter of every word into uppercase.text-transform: uppercase
turns everything into uppercase.text-transform: lowercase
turns everything into lowercase.text-transform: none
I’ll leave for you to work out.
body { font-family: arial, helvetica, sans-serif;font-size: 0.8em; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } a { text-decoration: none; } strong { font-style: italic;text-transform: uppercase; }
Text spacing
CSS text spacing is a way for developers to control the spacing between words in a CSS document. It is also referred as letter-spacing or word-spacing. It can be used to create different effects, such as changing the size of each letter, adding space between letters, or even changing the color of a text.
The letter-spacing
and word-spacing
properties are for spacing between letters or words. The value can be a length or normal
.
The line-height
property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so ’2′ will be two times the font size, for example), a length, a percentage or normal
.
The text-align
property will align the text inside an element to left
, right
, center
or justify
.
The text-indent
property will indent
the first line of a paragraph, for example, to a given length or percentage. This is a style traditionally used in print, but rarely in digital media such as the web.
p { letter-spacing: 0.5em;word-spacing: 2em;line-height: 1.5;text-align: center; }
CSS Margins and Padding
Margins and padding are the two most important CSS properties. They are used to set the outer boundary of a container and give it an aesthetically pleasing look.
What is the difference between margins and padding?
The difference between margins and padding is that margins are on the top, bottom, left and right of a page while the padding is in-between.
- Margins: Margins define the space between an element’s content and the edges of its container.
- Padding: Padding defines how much space is between an element’s content and its border, or how much space is taken up by an element’s padding, border, or margin.
Margin
and Padding
are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
h2
to the following:h2 { font-size: 1.5em; background-color: #ccc;margin: 1em;padding: 3em; }
You will see that this leaves one-character width space around the
secondary header and the header itself is fat from the three-character
width padding.
The four sides of an element can also be set individually. margin-top
, margin-right
, margin-bottom
, margin-left
, padding-top
, padding-right
, padding-bottom
and padding-left
are the self-explanatory properties you can use.
The Box Model
Margins, padding and borders (see next page) are all part of what’s known as the Box Model.
The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:
You don’t have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that’s a powerful thing!
What is the difference between top, left, right, bottom, and center margins?
The margins on a page are the empty spaces between the main content and the sidebars.
The top margin is the space between the top of the text and the top of the page. The left margin is where text starts, and it extends to where it ends. The bottom margin is where text ends, and it extends to where it starts again. The right margin is where text starts, and it extends to where it ends. The center margin is an empty space in between paragraphs or other parts of a document.
How does margin-left affect the calculation of width for an element?
Margin-left is a CSS property that specifies how far left an element's content is from the left edge of its container.
Margin-left affects the calculation of width for an element. It can be used to align the text along the left edge of the container, or to create space between text and a right side margin.
CSS Borders
CSS borders are a way to add visual elements to a web page. They can be used to create borders around images, boxes, and paragraphs, Which are not just for aesthetic purposes – they also have functional benefits like controlling the space between different elements on the page.
Borders can be applied to most HTML elements within the body.
To make a border around an element, all you need is border-style
. The values can be solid
, dotted
, dashed
, double
, groove
, ridge
, inset
and outset
.
border-width
sets the width of the border, which is usually in pixels. There are also properties for border-top-width
, border-right-width
, border-bottom-width
and border-left-width
.
Finally, border-color
sets the colour.
Add the following code to the CSS file:
h2 { border-style: dashed;border-width: 3px;border-left-width: 10px;border-right-width: 10px;border-color: red; }
This will make a red dashed border around all HTML secondary headers (the h2
element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).
Putting It All Together
The code below covers all of the CSS methods in this section. If you save this as your CSS file and look at the HTML file then you should now understand what each CSS property does and how to apply them. The best way to fully understand all of this is to mess around with the HTML and the CSS files and see what happens when you change things.
body { font-family: arial, helvetica, sans-serif; font-size: 80%; color: black; background-color: #ffc; margin: 1em; padding: 0; } /* By the way, this is a comment */ p { line-height: 1.5em; } h1 { color: #ffc; background-color: #900; font-size: 2em; margin: 0; margin-bottom: 0.5em; padding: 0.25em; font-style: italic; text-align: center; letter-spacing: 0.5em; border-bottom-style: solid; border-bottom-width: 0.5em; border-bottom-color: #c00; } h2 { color: white; background-color: #090; font-size: 1.5em; margin: 0; padding: 0.1em; padding-left: 1em; } h3 { color: #999; font-size: 1.25em; } img { border-style: dashed; border-width: 2px; border-color: #ccc; } a { text-decoration: none; } strong { font-style: italic; text-transform: uppercase; } li { color: #900; font-style: italic; } table { background-color: #ccc; }
Step 2 – Intermediate CSS
CSS Class and ID Selectors
CSS class and ID selectors are the ways to style an HTML element. They are used to create different styles for an element or group of elements.
For the CSS Beginner Tutorial we looked solely at HTML selectors – those that represent an HTML tag.
You can also define your own selectors in the form of Class and ID selectors.
The benefit of this is that you can have the same HTML element, but present it differently depending on its class or ID.
In the CSS, a class selector is a name preceded by a full stop (.
) and an ID selector is a name preceded by a hash character (#
).
So the CSS might look something like:
#top { background-color: #ccc; padding: 1em } .intro { color: red; font-weight: bold; }
The HTML refers to the CSS by using the attributes id
and class
. It could look something like this:
<div id="top"> <h1>Chocolate curry</h1> <p class="intro">This is my first post.</p> <p class="intro">Mmm mm mmmmm</p> </div>
The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever }
will only be applied to paragraph elements that have the class ‘jam’.
CSS Class Selectors
.class-name {
}
.class-name a { text-decoration: none; }
.class-name a:hover { text-decoration: underline; }
ID Selectors:
#id-name {
}
#id-name div { border: 1px solid red; }
Grouping and Nesting
CSS Grouping and Nesting are two of the most important concepts in CSS. These concepts allow us to control the way a website looks without having to worry about how it will look on different devices.
CSS Grouping
CSS groupings are used to create a layout with an orderly structure and a logical flow. They also help us to organize elements on the page in order to present them in an appealing and useful way.
You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.
For example, if you have something like:
h2 { color: red; } .thisOtherClass { color: red; } .yetAnotherClass { color: red; }
You could make it:
h2, .thisOtherClass, .yetAnotherClass { color: red; }
CSS Nesting
Nesting is used when we need more space between certain elements on the page that have similar styles, such as headings, paragraphs, or lists.
If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
For example:
#top { background-color: #ccc; padding: 1em } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; }
Removes the need for classes or ID’s if it is applied to HTML that looks something like this:
<div id="top"><h1>Fish curry</h1><p>This is my recipe for making fish curry.</p><p>Mmm mm mmmmm</p></div>
This is because, by separating selectors with spaces, we are saying ‘h1
inside ID top
is colour #ff0
‘ and ‘p
inside ID top
is red
and bold
‘.
This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.
CSS Pseudo Classes
Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.
Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.
link
is for an unvisited link.visited
is for a link to a page that has already been visited.active
is for a link when it is gains focus (for example, when it is clicked on).hover
is for a link when the cursor is held over it.
a.snowman:link { color: blue; } a.snowman:visited { color: purple; } a.snowman:active { color: red; } a.snowman:hover { text-decoration: none; color: blue; background-color: yellow; }
Although CSS gives you control to bypass it, maintaining different colours for visited links is good practice as many users still expect this. As pseudo classes (other than hover
) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.
Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colours to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.
You should also be able to use the hover
pseudo class with elements other than links. Unfortunately, Internet Explorer doesn’t support this method. This is a bloody irritation because there are lots of nice little tricks you can do that look delightful in other browsers.
CSS Shorthand Properties
Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.
margin
, padding
and border-width
allow you to amalgamate margin-top-width
, margin-right-width
, margin-bottom-width
etc. in the form of property: top right bottom left;
So:
p { border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 20px; }
Can be summed up as:
p { border-width: 1px 5px 10px 20px; }
border-width
, border-color
and border-style
can also be summed up as, for example:
p { border: 1px red solid; }
(This can also be applied to border-top
, border-right
etc.)
By stating just two values (such as margin: 1em 10em;
), the first value will be the top and bottom and the second value will be the right and left.
Font-related properties can also be gathered together with the font
property:
p { font: italic bold 1em/1.5 courier; }
(Where the ‘/1.5′ is the line-height)
So, to put it all together, try this code:
p { font: 1em/1.5 "Times New Roman", times, serif; padding: 3em 1em; border: 1px black solid; border-width: 1px 5px 5px 1px; border-color: red green blue yellow; margin: 1em 5em; }
CSS Background Images
There are a number of properties involved in the manipulation of background images.
Luckily, the property background
can deal with them all.
body { background:url(http://freebloggingtricks.com/wp-content/uploads/2013/12/5.png) no-repeat top right; }
This amalgamates these properties:
background-color
, which we have come across before.background-image
, which is the location of the image itself.background-repeat
, which is how the image repeats itself. This can berepeat
(equivalent to a ’tile’ effect across the whole background),repeat-y
(repeating on the ‘y-axis’, above and below),repeat-x
(repeating on the ‘x-axis’, side-by-side) orno-repeat
(which shows just one instance of the image).background-position
, which can betop
,center
,bottom
,left
,right
or any sensible combination, such as above.
Background-images can be used in most HTML elements – not just for the whole page (body) and can be used for simple but effective results, such as shaped corners.
It is easy to get carried away with background images and plaster them all over your web pages. Some visually hyperactive people might believe it looks good to have a full-on brightly coloured photograph tiled across the background of a page, giving the user a Mensa-esque challenge in deciphering the foreground text. This is an extreme example, but the fact is that the most user-friendly, readable text is black on a plain white background or white on a plain black background (there is also a suggestion that a slightly off-white or off-black background is better as this reduces glare).
So, the best use of background images is either to use them where there will be no content over the top or making the background image very light, which would also reduce the file size of the image, because there should be less colours involved (supposing you are using an indexed-colour format, such as GIF).
Final Step 3- Advanced CSS
CSS Display
CSS Display is a CSS property that allows you to show or hide an element based on its position in the viewport. This property is primarily used to create responsive design. It can also be used for other purposes such as hiding content from specific parts of the screen or to create a slide-out menu.
A key trick to the manipulation of HTML elements is understanding that there’s nothing at all special about how most of them work. Most pages could be made up from just a few tags that can be styled any which way you choose. The browser’s default visual representation of most HTML elements consist of varying font styles, margins, padding and, essentially, display types.
The most fundamental types of display are inline, block-line and none and they can be manipulated with the display
property and the values inline
, block
and none
.
inline
does just what it says – elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline.
block
puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line.
none
, well, doesn’t display the element, which may sound pretty useless but can be used to good effect with accessibility considerations, alternate stylesheets or advanced hover effects.
The original default style-sheet for this site for example, manipulates a few traditionally in-line and block-line elements to fit the design.
h1 { display: inline; font-size: 2em; } #header p { display: inline; font-size: 0.9em; padding-left: 2em; }
This enabled the title ‘htmldog.com’ and the tag-line to be displayed next to each other rather than above and below each other while maintaining optimum accessibility.
#navigation, #seeAlso, #comments, #standards { display: none; }
The above code is used in the print-only styles to basically ‘turn-off’ those elements, such as navigation, which are insignificant to the single page.
display: none
and visibility: hidden
vary in that display: none
takes the element completely out of play, where as visibility: hidden
keeps the element and its flow in place without visually representing its contents. For example, if the second paragraph of 3 were set to display: none
, the first paragraph would run straight in to the third whereas if it were set to visibility: hidden
, there would be a gap where the paragraph should be.
Tables
Perhaps the best way to understand the table-related display property values is to think of HTML tables. table
is the initial display and you can mimic the tr
and td
elements with the table-row
and table-cell
values respectively.
The display
property goes further by offering table-column
, table-row-group
, table-column-group
, table-header-group
, table-footer-group
and table-caption
as values, which are all quite self-descriptive. The immediately obvious benefit of these values is that you can construct a table by columns, rather than the row-biased method used in HTML.
Finally, the value inline-table
basically sets the table without line breaks before and after it.
Getting carried away with CSS tables can seriously damage your accessibility. HTML should be used to convey meaning, so if you have tabular data it should be arranged in HTML tables. Using CSS tables exclusively could result in a mash of data that is completely unreadable without the CSS. Bad. And not in a Michael Jackson way.
Other display types
list-item
is self descriptive and displays as in the way that you would usually expect an li
HTML element to. To work properly then, elements displayed this way should be nested in a ul
or ol
element.
run-in
makes an element either in-line or block-line depending on the display of its parent. It doesn’t work on IE or Mozilla based browsers. Very helpful.
compact
also makes the element inline or block-line depending on the context. It doesn’t work that well either…
marker
is used exclusively with the :before
and :after
pseudo elements to define the display of the value of the content
property. The automatic display of the content
property is already marker
, so this is only useful if you are overriding a previous display
property for the pseudo element.
CSS Page Layout
CSS layouts are very powerful for creating different types of websites and apps. They can be created with a variety of tools like HTML, CSS or JavaScript. It is also very flexible since they can be applied on any web page with no limitations on the design or content.
Layout with CSS is easy. If you are used to laying out a page with tables, it may at first appear difficult, but it isn’t, it’s just different and actually makes much more sense.
You need to look at each part of the page as an individual chunk that you can shove wherever you choose. You can place these chunks absolutely or relative to another chunk.
Positioning
The position
property is used to define whether an element is absolute
, relative
, static
or fixed
.
The value static
is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.
relative
is much like static
, but the element can be offset from its original position with the properties top
, right
, bottom
and left
.
absolute
pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute element can be placed anywhere on the page using top
, right
, bottom
and left
.
fixed
behaves like absolute
, but it will absolutely position an element in reference to the browser window as opposed to the web page, so, theoretically, fixed elements should stay exactly where they are on the screen even when the page is scrolled. Why theoretically? Why else – this works great in browsers such as Mozilla and Opera, but in IE it doesn’t work at all.
Layout using absolute positioning
You can create a traditional two-column layout with absolute positioning if you have something like the following HTML:
<div id="navigation"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </div> <div id="content"> <h1>Ra ra banjo banjo</h1> <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo.
Ra ra banjo banjo.Ra ra banjo banjo.</p> <p>(Ra ra banjo banjo)</p> </div>
And if you apply the following CSS:
#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }
You will see that this will set the navigation bar to the left and set the width to 10 em’s. Because the navigation is absolutely positioned, it has nothing to do with the flow of the rest of the page, so all that is needed is to set the left margin of the content area to be equal to the width of the navigation bar.
How bloody easy. And you aren’t limited to this two-column approach. With clever positioning, you can arrange as many blocks as you like. If you wanted to add a third column, for example, you could add a ‘navigation2′ chunk to the HTML and change the CSS to:
#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left
margin to 10em */ }
The only downside to absolutely positioned elements is that because they live in a world of their own, there is no way of accurately determining where they end. If you were to use the examples above and all of your pages had small navigation bars and large content areas, you would be okay, but, especially when using relative values for widths and sizes, you often have to abandon any hope of placing anything, such as a footer, below these elements. If you wanted to do such a thing, it would be necessary to float your chunks, rather than absolutely positioning them.
Floating
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it.
Floating is normally used to position smaller elements within a page (in the original default CSS for this site, the ‘Next Page’ links in the HTML Beginner Tutorial and CSS Beginner Tutorial are floated right. See also the :first-letter
example in Pseudo Elements), but it can also be used with bigger chunks, such as navigation columns.
Taking the HTML example below, you could apply the following CSS:
#navigation { float: left; width: 10em; } #navigation2 { float: right; width: 10em; } #content { margin: 0 10em; }
If you do not want the next element to wrap around the floating objects, you can apply the clear property. clear: left will clear left floated elements, clear: right will clear right floated elements and clear: both will clear both left and right floated elements. So if, for example, you wanted a footer to your page, you could add a chunk of HTML with the id ‘footer’ and then add the following CSS:
#footer { clear: both; }
And there you have it. A footer that will appear underneath all columns, regardless of the length of any of them.
This has been a general introduction to positioning and floating, with emphasis to the larger ‘chunks’ of a page, but remember, these methods can be applied to any element within those chunks too. With a combination of positioning, floating, margins, padding and borders, you should be able to represent ANY web design and there is nothing that can be done in tables that can not be done with CSS.
The ONLY reason for using tables for layout at all is if you are trying to accommodate ancient browsers. This is where CSS really shows its advantages – it results in a highly accessible page a fraction of the weight of an equivalent table-based page.
CSS At-Rules
CSS At-Rules are very important in adding visual appeal to your website. They can change the layout of your site, the color scheme, and add more functionality to your website, Which are a set of rules that tell CSS how to render a particular element on your web page. There are three types of at-rules: Global, Specific, and Inheritance.
At-rules encapsulate a bunch of CSS rules and apply them to something specific. Woo.
Importing
The import
at-rule will bolt on another style sheet. For example, if you want to add the styles of another style sheet to your existing one, you would add something like:
@import url(addonstyles.css);
This is often used in place of the link
element to link a CSS file to an HTML page, by essentially having an internal style sheet that looks something like this:
<style type="text/css" media="all">@import url(monkey.css);</style>
The benefit of this is that older browsers, such as Netscape 4.x don’t have a clue about at-rules and so won’t link to the style-sheet, which, if you have well-structured markup, will leave functional (although un-styled) plain HTML.
Media types
The media
at-rule will apply its contents to a specified media, such as print. For example:
@media print { body { font-size: 10pt; font-family: times new roman, times, serif; } #navigation { display: none; } }
The media-type can be:
all
– for every media under, over, around and in the sun.aural
– for speech synthesizers.handheld
– for handheld devices.print
– for printers.projection
– for projectors.screen
– for computer screens.
You can also use braille
, embossed
, tty
or tv
.
Note: having said all of that, the only media-types currently supported by IE are all
, screen
and print
.
Character sets
The charset
at-rule simply sets the character set encoding of an external stylesheet. It would appear at the top of the stylesheet and look something like @charset "ISO-8859-1";
Font faces
The font-face
at-rule is used for a detailed description of a font and can embed an external font in your CSS.
It requires a font-family
descriptor, which the font can be referenced to, the value of which can be an existing font name (so overwriting that font when conditions are met) or it can be a completely new name. To embed a font, the src
descriptor is used. Other descriptors added to the font-face
at-rule become conditions for that embedded font to be used, for example, if you were to add a font-weight: bold
style to the at-rule, the src
of the font-family
will only be applied to a selector with the font-family
property if the font-weight
property is also set to bold
.
You might use a font-face at-rule like this:
@font-face { font-family: somerandomfontname;src: url(somefont.eot); font-weight: bold; } p { font-family: somerandomfontname; font-weight: bold; }
This will apply the somefont.eot font to paragraphs (it would not if the p
selector was not set to font-weight: bold
).
Support for embedded fonts is patchy at best. Mozilla based browsers don’t support them and have no immediate plans to do so. Only Internet Explorer seems to have any kind of decent support and this is by no means straightforward. To embed fonts with IE, you need to use Microsoft’s WEFT software, which will convert the characters of a TrueType font into a condensed OpenType font (and this can then only be used on the URI that you specify). Because of this limited (and quite complicated) compatibility, it is best not to use fonts that do not have an adequate alternative system font.
Pages
The page
at-rule is for paged media and is an advanced way to apply styles to printed media. It defines a page block that extends on the box model (see Margins and Padding) so that you can define the size and presentation of a single page.
There are a number of conventions that apply to page
at-rules, such as there is no padding or border and this isn’t a computer screen we’re talking about – pixels and ems as units aren’t allowed.
There are a number of specific properties that can be used, such as size
, which can be set to portrait
, landscape
, auto
or a length. The marks
property can also be used to define crop marks.
@page { size: 15cm 20cm; margin: 3cm; marks: cross; }
Pseudo-classes for paged media There are three pseudo-classes that are used specifically in conjunction with the page
at-rule, which would take the form of @page :pseudo-class { stuff }
.
:first
applies to the first page of the paged media.
:left
and :right
apply to left-facing and right-facing pages respectively. This might be used to specify a greater left margin on left-facing pages and a greater right margin on right-facing pages.
There are a number of other facets specific to the page at-rule such as page-breaks and named pages, but seeing as this at-rule works on hardly any browser, you’ve probably wasted enough time reading this part anyway. It’s a nice enough idea though.
CSS Pseudo Elements
CSS Pseudo Elements are a way to add CSS-like behaviors to HTML elements. They are often used for styling purposes. It can be a powerful tool for designers, but they can also be abused when used on the wrong element or in the wrong context.
Pseudo-elements suck on to selectors much like pseudo-classes, taking the form of selector:pseudoelement { property: value; }
. There are four of the suckers.
First letters and First lines
The first-letter
pseudo element applies to the first letter of an element and first-line
to the top line of an element. You could, for examples create drop caps and a bold first-line for paragraphs like this:
p:first-letter { font-size: 3em; float: left; } p:first-line { font-weight: bold; }
Before and after
The before
and after
pseudo elements are used in conjunction with the content
property to place content either side of an element without touching the HTML.
The value of the content
property can be open-quote
, close-quote
, no-open-quote
, no-close-quote
, any string enclosed in quotation marks or any image using url(imagename)
.
blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } li:before { content: "POW: " } p:before { content: url(images/jam.jpg) }
Sounds great, dunnit? Well, as with so many things (-sigh-), most users won’t be able to see the before or after effects because IE just can’t be bothered with them.
CSS Specificity
If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.
It may not seem like something that important, and in most cases you won’t come across any conflicts at all, but the larger and more complex your CSS files become, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts turning up.
If the selectors are the same then the latest one will always take precedence. For example, if you had:
p { color: red; } p { color: blue; }
p
elements would be coloured blue because that rule came last.
However, you won’t usually have identical selectors with conflicting declarations on purpose (because there’s not much point). Conflicts quite legitimately come up, however, when you have nested selectors. In the following example:
div p { color: red; } p { color: blue; }
It might seem that p
elements within a div
element would be coloured blue, seeing as a rule to colour p
elements blue comes last, but they would actually be coloured red due to the specificity of the first selector. Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.
The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. Then you add them all up and hey presto, you have the specificity value.
p
has a specificity of 1 (1 HTML selector)div p
has a specificity of 2 (2 HTML selectors; 1+1).tree
has a specificity of 10 (1 class selector)div p.tree
has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)#baobab
has a specificity of 100 (1 id selector)body #content .alternative p
has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
So if all of these examples were used, div p.tree
(with a specificity of 12) would win out over div p
(with a specificity of 2) and body #content .alternative p
would win out over all of them, regardless of the order.
3 Helpful CSS solutions provided by BytesizeCSS
The clear fix
If you often create layouts with XHTML & CSS and end up appending the <br style=”clear: both;” /> or <div class=”clear”></div> ‘fix' to your markup when a containing element does not wrap it's floated children, then now is the time to stop! There is a much more efficient way to acheive this with CSS alone.
Whenever you come across this problem (in modern browsers excluding IE) you can resolve it by simply applying the following to the wrapper element:
#wrapper:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
I tend to add a .clear class that contains this block of code which you can then apply to any wrapper that requires it. However, for static elements (that are unlikely to change very often) like #header, #navigation and #footer, I just chain them on to the selector.
.clear:after,
#header:after,
#navigation:after,
#footer:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
Now I don't want to see anymore uneccessary <div>'s or <br />'s 😉
Fix hasLayout with one line of CSS
First of all, if you have no idea what hasLayout is, take a look at this excellent explanation and then we can begin!
As that page explains, there are several ways to fix the issue by setting height/width/position etc. on a particular element that is missing hasLayout but when coding an XHTML & CSS layout this can amount to several selectors containing whatever hasLayout fix works/you pick at the time. It can get messy and is only really necessary for IE.
Soooo… why not create ONE style that fixes all your hasLayout problems, by default, for IE only?
In the <head> of your document you will need to add a conditional comment to include an IE only stylesheet as follows:
<!--[if lte IE 7]> <link href="/css/ie.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]-->
This basically checks to see if the browser is less than or equal to (lte) IE7 and if so, it will include the IE stylesheet.
Now that's out of the way, open the stylesheet and add the following line of CSS:
div, ul { zoom: 1; }
and that's it! Now you needn't worry about hasLayout anymore* 🙂
* Well, you may experience oddities with UL's and chances are that if you do, it is something to do with this rule. I sometimes have to remove the UL selector from this rule and specify hasLayout for UL's on a case by case basis.
Image replacement for h1 logos – semantic or not?
For years I have used the well known image replacement technique for my logos and placed them within an <h1> tag but I recently started to wonder exactly how semantic (or not) using that technique actually is…
Ideally, the <h1> should only ever appear once within a page to show that it is the most important information on the page. This instantly creates problems when you come to subpages on your site. Things like “About me” and “My portfolio” are really what should appear in h1's because they are describing the whole page content and subsequently, SEO is improved. However, if you have already used a h1 for you logo, you are then forced to lower the importance of these subpage headers by placing them in h2's.
So, I wondered… should a logo really be an h1 and should we use image replacement? For the SEO/semantic reasons above I concluded that it shouldn't be an h1, but what should it be instead?
In my opinion, to actually SEE the graphical representation of a logo is important. It's a visualisation that associates itself with you/your business and therefore ensures people think of you when they see similar shapes/colours or even a blank page with your logo on it. It's not there for aesthetics, it's there to represent you. I believe that because of this the user should always see it, it's an informative image and should be marked up as one.
<a href="/home/" id="logo">
<img src="logo.png" alt="company name" />
</a>
This way, a user will always see your logo with or without CSS and you're marking it up for what it really is.