Blogging Tips » CSS

Creating a Drop Down Menu

Sarah — Thu, 09 Apr 2009 19:00:47 +0000

Horizontal navigation is quite popular however it becomes restrictive once you’ve got too many pages to list. Once you reach this point then you either need to convert to using a vertical navigation, or start using drop down menus.

Drop downs used to rely on JavaScript however all modern browsers can now manage drop down menus with just CSS (IE7+, Firefox, Opera, Safari; note, JavaScript is still required for IE6 and below).

The HTML Navigation

First we need to set up the html correctly. To do this we need to use nested lists. A list is usually written as


    Page 1
    Page 2
    Page 3
    Page 4

We need to then create a list for each drop down and nest it into the list item for the parent link ie.


    Page 1
        
            Subpage 1
            Subpage 2
            Subpage 3
        
    
    Page 2
        
            Subpage 1
            Subpage 2
            Subpage 3
        
    
    Page 3
        
            Subpage 1
            Subpage 2
            Subpage 3
        
    
    Page 4
        
            Subpage 1
            Subpage 2
            Subpage 3

As you can see, to nest the list the parent item and the sub menu is all wrapped within the list item tags (note, if you use WordPress then your page navigation is automatically created like this by default).

The CSS Code

With the CSS code, first we need to turn our list into a horizontal list. I’ve covered this previously on List Properties. So we need to add in the code required to make a horizontal menu and we’ll make it neat at the same time, which is

#menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu li {
    float: left;
    width: 75px;
    margin: 0 1px;
    background: #900;
    text-align: center;
    border: 1px solid #009;
}
#menu a {
    color: #fff;
    display: block;
    text-decoration: none;
    padding: 2px 0 3px;
    width: 75px;
}
#menu a:hover {
    background: #000;
}

Now we need to hide the sub menu out of sight until it’s required. To do this we use absolute positioning and ‘push’ it off the page eg.

#menu li ul {
	position: absolute;
	width: 75px;
	left: -5000px;
}

This will hide the menu visually however a screenreader will still read the menu as normal, as will a search engine spider.

Now all we need to do is to set the menu to display when the user hovers over the parent menu. To do with we use the :hover pseudo class ie.

#menu li:hover ul {
	left: auto;
}

By using the property value of auto, we bring the list back into view, and make it appear below the parent link as it should.

Finally we need to tidy up the sub menu by removing the margins, padding and list style from it by targeting the sub menu in the first ruleset above. We also need to remove the left and right margin from the sub menu list items, as it will inherit the 1px left/right margin from our ruleset above for #nav li. Also, because we’ve used a border on the list items, the sub menu list has shifted over a pixel to the right, so we can fix this by using a negative margin to move it back to the left and line it up correctly ie.

#menu li li {
	margin: 0 0 0 -1px;
}

This gives us the final menu code and working example – Dropdown Menu Example.

This code and the menu is based on the Son of Suckerfish Dropdowns, where you can also see how to create multiple dropdowns and also how to add in the JavaScript code to have the menu working for IE6 and below as well.

Copyright © 2010 Blogging Tips. This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact us so we can take legal action immediately.

Creating a Drop Down Menu

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

Explaining CSS Selectors Part III

Sarah — Thu, 26 Mar 2009 20:00:09 +0000

This is the final part in this 3 part series (see Part I and Part II), and we’re on to Pseudo-element selectors.

:first-line

The :first-line pseudo-element allows you to target the first line of a given target, which must be either a block level element, inline-block, table cell or caption. So, for example, if you wanted to make the first line of a paragraph red then you could use

p:first-line { color: red }

The properties available to use with this selector are similar to that of the inline elements, which you can associate with text formatting eg. font, text-transform, line-height etc.

:first-letter

This selector allows you to target the first letter of the given tag and is commonly used to create a large initial letter or a drop cap. The properties available are that of the text formatting properties, along with border, padding and margin.

To make a larger initial letter then you could just apply a font size and weight to it eg.

p:first-letter {
    font-size: 2em;
    font-weight: bold;
}

To create a drop cap we would need to float the letter as well eg.

p:first-letter {
    font-size: 2em;
    font-weight: bold;
    float: left;
}

:before and :after

Finally, the :before and :after selectors allow you to add content to your site by targeting specific elements. They’re used in conjunction with the content property. For example, if you wanted to insert a word at the start of the paragraph with an id of dynamic you could use

p#dynamic:before { content: "Chapter 1: " }

Which would then take a piece of content such as

"Hello", she said, "how are you today?"

to become

Chapter 1: "Hello", she said, "how are you today?"

The content property can accept a standard string, it can also accept the values of

open-quote: Adds an opening quote eg. for at the start of paragraphs within a blockquote.
close-quote: Adds a closing quote eg. for at the end of the final paragraph of a blockquote.
no-open-quote: Doesn’t add a quote mark at the start but does increment the quote level when a quote hierarchy has been defined (see below)
no-close-quote: Doesn’t add a quote mark at the end but does decrement the quote level when a quote hierarchy has been defined (see below)
An attribute value: This will get the value of a specific attribute

In order to use open-quote and close-quote the value for the quote marks needs to be defined with the ‘quotes’ property, for example:

q { quotes: '"' '"' "'" "'"; }
q:before { content: open-quote; }
q:after  { content: close-quote; }

The above CSS would set the opening and closing quote marks to be a double quotes with nested quotes set to use single opening and closing quote marks.

A working example of how to make use of the attribute value is to use the cite attribute for a blockquote tag. Then we can use the :after selector and content property to grab the value within this cite attribute and output it after the blockquote eg. (CSS code courtesey of David Anderson)

blockquote[cite]:after {
	display : block;
	margin : 0 0 5px;
	padding : 0 0 2px 0;
	font-weight : bold;
	font-size : 90%;
	content : "[source: "" " attr(cite)"]";
}

There is much more that the content property can do such as counters and improved list numbering, however these would require their own individual posts which I will come around to.

Hopefully this has opened your eyes to the amount of additional functionality and targeting that CSS can give. Some of these options are not very well supported in IE7, hopefully now with IE8 out, we can start to use more of the functionality that is available to us, and start to move away from the total lack of support in IE6 for anything more than the standard CSS selectors!

Explaining CSS Selectors Part III

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

Explaining CSS Selectors Part II

Sarah — Thu, 19 Mar 2009 20:00:51 +0000

See last weeks post for part one of Explaining CSS Selectors.

Attribute Selectors

Attribute selectors allow you to target a group of items on a page by matching a particular attribute. This opens up a whole new method of selecting your targets. Unfortunately attribute selectors are not supported in IE6 (which is why they’re not very commonly used), and IE7’s support is a bit buggy at times, however with IE8 out today, hopefully support for these selectors will be greatly increased and we can finally get away from being held back by supporting IE6 users.

Attribute selectors can be used in a number of ways. You start with either a HTML selector or the universal selector (*) followed by the attribute selector within square brackets ie.

img[alt] { border: 2px solid red; }
img[rel="external"] { border: 2px solid blue; }
img[alt~="photo"] { border: 2px solid green; }
p[lang|="en"] { color: red; }

Going through the methods above:

This will give any image on a page a red border if the image has an alt attribute
This will give any image with an attribute of rel that has the exact value of external, a blue border
This will give any image with an alt attribute whose value contains the word photo somewhere in it, a green border
This will set any paragraph of text to be red, if it has been assigned a language attribute whose value starts with ‘en’ followed by a hyphen and then usually further information eg. en-US or en-GB

Pseudo-classes

Pseudo-classes allow you to target even more specific elements on the page. We’ve seen some of these before however I’ll cover them all below.

:first-child

The first-child pseudo-class matches an element that is the first child element of another element. For example, to target the first list item in a list you could use

ul li:first-child { margin-left: 20px }

:link

Allows you to specify the properties for an unvisited anchor link eg.

a:link { colour: blue; }

:visited

Allows you to specify the properties for a visited anchor link.

Dynamic pseudo-classes

There are 3 dynamic pseudo-classes that are usually activated by a user on the page. The 3 selectors are

:hover: Activates when the user hovers their pointer over an element on the page eg. a link
:focus: Activates when the element has focus
:active: Applies when the element has been activated

Next week I’ll cover the last of the selectors, the pseudo-elements, and also give some every day examples of using these more advanced selectors.

Explaining CSS Selectors Part II

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

Explaining CSS Selectors Part I

Sarah — Thu, 12 Mar 2009 20:00:36 +0000

Now that we’ve covered a lot of information on HTML and some brief information on CSS, it’s now time to explore the power of CSS even more.

Selectors

Selectors allow you to target specific tags, ids, classes, attributes and more, on a page, ie. target a specific item or a group of items. We’ve seen and used these already briefly, to target type selectors (h1, div, p, a, etc), ID selectors (#idname) and class selectors (.classname).

The following is perfectly fine to use:

h1 { color: red; }
#redtext { color: red; }
.redtext { color: red; font-size: 10px }

And to achieve the same effect we can use

h1, #redtext, .redtext { color: red; }
.redtext { font-size: 10px; }

Universal Selector

The Universial selector is an asterisk – *

This selector, when used on its own, will target every element in a HTML document eg.

* { color: black }

Which would then set all text to be the colour black unless you choose to override it with a more specific selector.

Descendent Selectors

Following on from this, we also have descendent selectors, whereby you can specifically target a selector within another selector eg.

.redtext { color: red }
#somediv p .redtext { color: blue; }

This would mean anything with a class of ‘redtext’ would be in red, however if it’s inside a paragraph within a div with the #somediv id, it would be blue instead.

Child Selectors

Child selectors are similar to descedant selectors except you are just targeting selectors that are direct children. The syntax of this is to use a greater-than sign eg.

#somediv > p { color: red }

Which would only change the text colour of paragraphs that are direct children of the somediv ID. For example. If you had markup similar to


    Paragraph 1
    
        Paragraph 2

With a descendant selector of “#somediv p” you would target both paragraphs, however with the child selector as above, you would only target the first paragraph, as the second one is not a direct child of the #somediv ID, but of the div within it.

You can also use descendant selectors with child selectors eg.

#somediv div > p { color: red }

Which would then target the second paragraph.

Adjacent Sibiling Selectors

These selectors allow you to target a selector that comes after a specific selector in the markup, and both have the same parent selector. For example, if you wanted to target the h2 that directly followed a h1 then you would use

h1 + h2 { color: red }

This would only change the text of a h2 to red if it came straight after the h1 in markup. eg.


    Main Site Title
    This header will be in red
    Something here

    This header won't be affected
    Something here

    
        Another main title here
    

    This header won't be affected either
    Something here

Next week I’ll explain attribute selectors and pseudo-elements and pseudo-classes.

Explaining CSS Selectors Part I

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

Understanding the float property

Sarah — Thu, 12 Feb 2009 20:00:09 +0000

To be able to control your layouts you need to understand the float property. I’ve briefly mentioned this before and given examples of how to use it but not actually explained it in full. Note, for the following examples I’ve used inline styles, purely to give you an example and show you the code used, however, as always, external stylesheets should be used to reduce code, to create reusable code and to use CSS as it was intended for.

Example Usage

The float property allows you to control the position of specific elements and the content or other elements that follow. For example, you can position an image to the left of some content¹, and have the content flow around the image, or you can make a horizontal menu by using a list and floating the items next to each other².

Example 1: Image and Content

Floating to the left of this content is a photo of yours truly. As you can see, this text flows around the image, similar to how the now deprecated align=”left” attribute used to work for images. This, of course, is just a simple example of usage however it’s very useful to use in blog posts or on standard content pages to have your image fitting in with the content nicely.

To create the above I’ve used the following code:

Floating to the left of this content is a photo of yours truly. As you can see, this text flows around the image, similar to how the now deprecated align="left" attribute used to work for images. This, of course, is just a simple example of usage however it's very useful to use in blog posts or on standard content pages to have your image fitting in with the content nicely.

Example 2: Horizontal Menu

The above example was created with the code:


Link 1
Link 2
Link 3
Link 4

The difference with this and the first example is that above I’ve had to give each list item a width. You usually need to give your floated element a width unless it already has a fixed width assigned (eg. like an image), else it will expand to fit the container it’s in, and then the float would be pointless.

Clearing Floats

Often, the side effect of using a float is that people don’t understand how to stop the float from taking over. For example, if you had an image floated to the left, with some content, then a second image to also float left, and content, you would probably want one image above the other regardless of content length, however I’m sure you’ve seen sites were people have ended up with:

Floating to the left of this content is a photo of Sarah.

Floating to the left of this content is a photo of Kevin.

As you can see, this isn’t the desired outcome, so we need to clear the float using the clear property.

The clear property accepts 4 values, left, right, both or none. The property works by moving the element down until it’s clear of all floated properties to either the left, right or both, depending on which value is selected. Of course the none value is there to allow you to override a clear property if you need to (remember inheritance).

So to fix the example above we would need to clear the float for the second image and paragraph ie.

Floating to the left of this content is a photo of Sarah.

Floating to the left of this content is a photo of Kevin.

This has been fixed on the second paragraph using:

...

Often though you do not necessarily have an element to add the clear to, or you don’t want to have update every ruleset to add in a clear. So sometimes an easier fix is to create a class and just give that a property of clear eg.

.clearme {
    clear: both;
}

Then, you can just add the clearme class where needed. If you don’t have an element to add the class to for some reason then you can also use an empty div eg.

There are more sophisticated ways of clearing floated elements, the above is a basic example but should give you an idea of how to keep floats under control.

Conclusion

This is a fairly advanced aspect of understanding CSS, but once you can grasp the logic behind floats then your layout control will be so much better and you’ll find coding up layouts much quicker and easier to do.

Understanding the float property

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

CSS Basics: List Properties II and a Horizontal Menu

Sarah — Thu, 01 Jan 2009 20:00:07 +0000

Last week I wrote about the specific CSS list properties. This week I’m going to cover some of the positioning properties that are useful with lists but can be used with other html elements as well.

Margins and Padding

Every element can have both a margin and padding given to it, i.e.

Here the element ends at the border, then the margin is the spacing outside of the border, and the padding is the spacing between the border and the content.

Both properties are similar to use. For example with the margin property you can use

ul {
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 20px;
}

Or you can use the shorthand version:

ul {
    margin: 10px 0 5px 20px;
}

As explained before on HTML Basics: Images, the margin property can accept 1, 2, 3 or 4 values:

1 value: Sets the margin for all sides ie. the top, right, bottom and left margins.
2 values: The first value sets the top and bottom margins, the second sets the left and right margins.
3 values: The first value sets the top margin, the second sets the left and right margin, the third sets the bottom margin.
4 values: Sets the margin values in the order top right bottom left.

To use the padding property, you use virtually the same property except you swap ‘margin’ with ‘padding’ eg.

ul {
    padding: 10px 0 5px 20px;
}
li {
    padding-top: 5px;
}

By default lists have a predefined amount of margin and padding, so these are two properties that you’ll often want to alter in your CSS to get them to fit into your design.

Box Model image courtesy of David Anderson.

Horizontal Menu

Lists are often used (and rightly so!) for navigation, however the horizontal navigation is often a bit tricky for some, when the basics are fairly straightforward. First of all, we need a menu eg.


    
        Home
        Forums
        Directory
	Themes

Then we need to remove the bullets from the menu, and remove the margin and padding, so that we can start with a clean slate. To do this we use

#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Finally we need to give each list item a width and then we use the float property, which allows us to float each list item next to each other (the float property will be explained in depth in the future). To do this we can use the following CSS

#nav li {
    float: left;
    width: 100px;
}

And from a basic point of view, that’s all there is to it! The code above gives each list item a width of 100 pixels, and then using the float property with a value of left, each item gets floated left, then the next item is positioned next to it. You can see this in action on the basic menu example.

Of course, this doesn’t look very pretty, so we can jazz this up a little with the following CSS

#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
    width: 75px;
    margin: 0 1px;
    background: #900;
    text-align: center;
    border: 1px solid #009;
}
#nav a {
    color: #fff;
    display: block;
    text-decoration: none;
    padding: 2px 0 3px;
}
#nav a:hover {
    background: #000;
}

Here I’ve added some extra styles to the list item, to put a slight gap between each item using the margin property, given the list items a background colour and border to give it a more button look. Then for the links they’ve had the colour changed to white, the underline removed and have a bit of padding. I’ve also used display: block, which we’ve not used before. This changes the link from inline, meaning just the text is clickable, to making the whole containing element (ie. the list item in this case) clickable. It makes the link more of a button. As a final touch I’ve set the background of the link to change on hover.

You can see this example in the second menu example.

As you can see, the posts from the past few weeks on the HTML and CSS Basics are starting to give us enough to be able to understand and create some intermediate solutions

CSS Basics: List Properties II and a Horizontal Menu

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

CSS Basics: List Properties

Sarah — Thu, 25 Dec 2008 20:00:03 +0000

Last week I covered the HTML Basics for using Lists. This week and next, we will cover the CSS properties for use with lists.

List Specific Properties

We have 3 properties that are specifically for unordered and ordered lists.

list-style-type

The list-style-type property allows you to control the appearance of the list ‘marker’ ie. the bullet point style for unordered lists or the numbering system for an ordered list. For both types of lists you can have the values of inherit or none. The latter will remove the bullet/number altogether.

For an unordered list you can select to have a value of disc, circle or square e.g.

ul.squarelist {
    list-style-type: square;
}
ul.disclist {
    list-style-type: disc;
}

For an ordered list you can use the following property values:

decimal: Sequential numbers starting from 1
decimal-leading-zero: Sequential numbers starting from 0
lower-roman: Lowercase roman numerals – i, ii, iii, iv, v etc.
upper-roman: Uppercase roman numerals
lower-greek: Lowercase greek alphabet – α, β, γ etc.
lower-latin: Lowercase latin alphabet – a, b, c, d, e etc.
upper-latin: Uppercase latin alphabet
armenian: Armenian numbering
georgian: Georgian numbering

Example usage of these would be

ol.roman {
    list-style-type: lower-roman;
}
ol.alpha {
    list-style-type: lower-latin;
}

Giving

First item
Second item
Third item

and

First item
Second item
Third item

list-style-image

For unordered lists, you can also specify an image to use for the bullet point. The property value is the same as setting a background image ie.

ul {
    list-style-image: url("http://www.domain.com/path/to/file/bullet.gif");
}

This will then display as the bullet point instead of the bullet point, providing you haven’t set the list-style-type value to ‘none’.

list-style-position

Finally the third list specific property is the position of the marker. By default you have a bullet point away from the block of text which is the value ‘outside’, however you can also give the property value of ‘inside’ to bring the bullet point into the block of text for each list item i.e.

Outside Position

ul.outside {
    list-style-position: outside;
}

First item
First item, second line
Second item
Second item, second line

Inside Position

ul.inside {
    list-style-position: inside;
}

First item
First item, second line
Second item
Second item, second line

As you can see, the second list has the bullet within the block of text.

list-style

The list-style property allows you to combine all 3 list style properties in one property. There is no specific order for these property values e.g.

ul {
    list-style: circle inside url("images/square-bullet.gif");
}

This would give your unordered lists circle bullet points, positioned inside the list item block, and would use the square-bullet.gif image for the bullet point (which would then replace the circle bullet points providing the image loads).

Additional CSS Properties

Lists can also use the standard background and font styling properties, along with certain positioning properties which will be covered next week.

CSS Basics: List Properties

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

CSS Basics: Font Styling

Sarah — Thu, 04 Dec 2008 20:00:11 +0000

Let’s face it, the default settings on browsers are hardly great for the look of your site. So next step, with your HTML page, is to add in some font styling.

The Font Properties

Font properties work on any selector that contains text. Most font properties are easy to spot as they start with the word ‘font’, however our first selector is simply ‘color’ (and our last selector is line-height). This is one point to remember, as ‘font-color’ will not work!

color

We’ve seen the color property when styling page links a couple of weeks ago. This property allows you to set the color of the text within the target selector, and accepts the hexadecimal, RGB and pre-defined colour names, as a value.

As briefly mentioned last week, it’s recommended to always set a background colour when setting a font colour, so that you can be certain if something else doesn’t load, or for some other reason, your text will always be readable.

So an example of use would be

body {
    color: black;
    background: white;
}
h1 {
    color: navy;
    background: white;
}
p {
    color: white;
    background: navy;
}

The above sets the body properties to have black text with a white background. All selectors within the body (ie. everything on the page except for links) will inherit this if they’re not specifically set further down in the stylesheet. I’ve then set all h1 headers to be in a navy blue, and then all paragraphs of content will have a navy background with white text.

font-family

This sets the font to be used for the text. It takes a comma separated list of fonts, and the priority reads from left to right. If the user doesn’t have the first font specified, it will try the next and the next until a match is found. However, it’s widely recommended to ensure that one of the fall back fonts is a ‘web safe’ font, which are fonts that are generally available on the default installations of computers. You should also have the last font in the list as a generic family name, such as serif or sans-serif.

For multiple word names, eg. Times New Roman, these should be surrounded by quotes ie. “Times New Roman”. An example of this is

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

If you want to use the Arial font, then also specify Helvetica for Mac Users, which is their equivalent e.g.

body {
    font-family: Arial, Helvetica, "Times New Roman", sans-serif;
}

font-size

This controls the size of the text. It can accept a value in pixels (px), em, ex or a percentage (it can also accept a numerical value in mm, cm, inches, points (pt) and pc, however it’s not recommended to use these length measurements). It can also accept one of a number of predefined values – xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit.

body { font-size: 12px; }
p { font-size: 11px; }

font-style

This allows you to effectively set the font to be italic or not. It accepts one of 4 values, italic, normal, oblique or inherit.

body { font-style: italic; }
p { font-style: none; }

font-variant

This allows you to set the font to display in small capitals or not. It accepts one of 3 values, small-caps, normal, inherit.

h1 { font-variant: small-caps; }

font-weight

This sets the font weight of the text. It accepts the values lighter, normal, bold, bolder or a number of either 100, 200, 300, through to 900 (multiples of 100) – however the support for numbers is quite inconsistent across browsers.

An example of use would be

a { font-weight: bold }
a:visited { font-weight: normal }

line-height

This is our other selector for fonts that doesn’t start with ‘font’. The line-height selector controls the height of the line that the text sits in. If the line-height given is larger than the font size specified, then the text is vertically centered within the given line-height ie. a font size of 10px with a line height of 20px will mean that there will be 5px of white space above and below the text eg.

p#specificdiv {
    font-size: 10px;
    line-height: 20px;
}

Font Shorthand

As with the background properties, we have a shorthand version for the font properties (this doesn’t include color). Using this is slightly stricter than the background shorthand however. A full example is

body {
    font: italics bold small-caps 10px/15px Arial, Helvetica, sans-serif;
}

This is in the order of font-style font-weight font-variant font-size/line-height font-family.

You can omit all of these besides font-size and font-family, which are always required when using the font property. Also, ensure that the last two values, regardless of what else is used, are the font-size (with or without the line-height) and the font family. Any of the following examples would be fine to use

body {
    font: 12px Arial, Helvetica, sans-serif;
}
p#specificdiv {
    font: italics bold 11px Arial, Helvetica, sans-serif;
}
h1 {
    font: small-caps 14px/18px Arial, Helvetica, sans-serif;
}

For the items not set, the default of normal is automatically used, so even if the body selector has a italics setting, if the font property is used on the h1 and it doesn’t specify italics then it will be reset to normal and not inherit the italics value.

Next week I’ll go back to the HTML basics and continue through some more mark up to allow you to improve on your basic understanding, or understand your current theme a little more!

CSS Basics: Font Styling

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

CSS Basics: The Background Properties

Sarah — Thu, 27 Nov 2008 20:00:22 +0000

Last week I briefly touched on a few selector properties when styling hyperlinks. I’m going to start to go into more properties. These properties can be used on any selector (although not every property will necessarily have an effect on some selectors).

CSS Selectors

Just to recap, a selector is the tag, id or class you’re targeting eg.

h1 { ... }
#idname { ... }
.classname { ... }

and multiple selectors can be used, using a comma to separate them

h1, #idname { ... }

or you can target a selector more specifically with a space between each descendant

body div h1 { ... }

Properties and Values

In the rule set for the selector(s) you have properties and values. An example ruleset is

selector {
    property: value;
    property2: value1 value2;
}

The Background Properties

A background can be changed on virtually any selector, although it’s not always wise to do so! You can change the background to a different colour, or have an image displaying instead.

The background properties allow you to change the background colour and/or image of the selector. The individual properties and their values are listed below.

background-color

Allows you to set the background colour of the selector. Accepts a hexadecimal colour eg. #aabbcc (when you have matching pairs, this can also be written as #abc), specific colour names eg. white, black, RGB colours eg. rgb(255, 255, 255). Finally it can also accept the value ‘transparent’. e.g.

h1 { background-color: #000; }
h2 { background-color: black; }
h3 { background-color: rgb(0, 0, 0); }
h4 { background-color: transparent; }

background-image

Background images are most commonly seen on the body selector, however they can be used on plenty of other selectors too. This property accept ‘none’ or a url to a background image eg.

body { background-image: none; }
body { background-image: url(/path/to/images/background.gif); }

background-attachment

Allows you to control whether a background image is fixed or scolls with the page. Accepts two values – scroll or fixed. When you fix a background it is fixed to the viewport and not to the selector, regardless of which selector is used.

body { background-attachment: fixed; }
body { background-attachment: scroll; }

background-position

Controls the starting position of the background image. Typically a background will be fixed to the top left corner (0,0 – x,y co-ordinates), however with this property you can change this starting point using co-ordinate positions with a measurement, percentages for the horizontal and vertical positioning, or keywords – top, bottom, left, right and center. e.g.

/* would start the background image at 100px from the top and left side of the browser */
body { background-position: 100px, 100px; }
/* both of the following would start the image halfway across the page and at the top */
body { background-position: 50% 0%; }
body { background-position: center top; }

background-repeat

This controls how the background image is repeated. The options are a continual repeat/tiling, which is default, then you have the option of no repeat, to repeat horizontally only, or to repeat vertically only. e.g.

/* This sets the background image to repeat */
body { background-repeat: repeat; }
/* this would repeat the image horizontally from the starting point */
body { background-repeat: repeat-x; }
/* this would repeat the image vertically from the starting point */
body { background-repeat: repeat-y; }
/* this would display the background image just once, at the starting point specified by the position property */
body { background-repeat: no-repeat; }

The Shorthand Property

Using the properties above you could set the background of a body selector to be white, display a fixed background image and have it repeating down the right hand side of the page using the following ruleset:

body {
    background-color: #fff;
    background-image: url(/images/backgrounds/background.gif);
    background-attachment: fixed;
    background-position: top right;
    background-repeat: repeat-y;
}

However, that’s a lot of typing for one ruleset! Luckily we also have a short hand property that can combine one or more of these properties. The background property accepts one or more of the values used above, in no strict order. So to replicate the above we could use

body {
    background: #fff url(/images/backgrounds/background.gif) fixed top right repeat-y;
}

If we just wanted to set the background colour we could use

body {
    background: #fff;
}

Alternatively, you could just set a background image to display in the top left of the screen, once.

body {
    background: url(/images/backgrounds/background.gif) fixed no-repeat;
}

Next week I’ll be explaining how you can style your text, however to allow you to get started with using the background property you of course need to be able to ensure your text can be read on top of it! So to do this we use the color selector, seen last week with styling links. To set the text colour of any selector we use this property. So for example, a white background with black text, and then paragraphs with white text on a black background could be

body {
    background: #fff;
    color: #000;
}
p {
    background: #000;
    color: #fff;
}

Whatever you do, just make sure your text is always readable. As a guideline from the W3C, if you set a background colour you should always set a font colour (with enough contrast between to the two), and vice versa. This is to ensure that no defaults get in the way, or if you also set a background image, and the image didn’t display, then you would have a suitable background colour to ensure the text can be seen.

For a good example of how backgrounds can be used have a look at Eric Meyer’s Complexspiral Demo.

CSS Basics: The Background Properties

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

CSS Basics: Styling Links

Sarah — Thu, 20 Nov 2008 20:00:37 +0000

Last week I explained about linking pages using the anchor tag. This week is about styling those links. For the basics of styling read my previous post Understanding CSS.

Target the anchor tag

In our CSS we can simply target the anchor tag using the a as the selector. So if we wanted our links to always be green and bold we could use

a {
    color: green;
    font-weight: bold;
}

If you wanted to have links in a div with the id of topmenu to be white (because perhaps the topmenu has a black background) but all other links to be in blue then we could have

a {
    color: blue;
}

#topmenu a {
    color: white;
}

Notice here, the first ruleset uses just a as the selector. This means all anchor links. However, the second ruleset uses #topmenu a as the selector, and this means all anchor links enclosed in the element with an id of topmenu i.e.


   Home | About | Contact

By putting the ‘#topmenu a’ ruleset second you automatically override the properties in the first ruleset with the second ruleset’s property values. This means that the colour is set in the first ruleset and the second ruleset overrides the colour for that particular selector. However, if you set perhaps the font weight to be bold in the first ruleset, if you didn’t specify anything for the font weight in the second ruleset then it would inherit the font weight setting from the first ruleset.

So to recap:

Single tag selectors apply to every instance of that tag on a page eg. a, p, h1, div
You can override some or all properties by specifying a second (anywhere later in the file), more targeted selector eg. #idname a, #content p
Any properties not specified in the second ruleset will automatically be inherited from any rulesets already applied to that tag.

If, for example, you had a top menu with a black background colour and a side menu with a blue background colour, and you wanted white links in the top menu, yellow links in the side menu, and blue links everywhere else, but you wanted bold links for the side menu and the page links then you would use

a {
    color: blue;
    font-weight: bold;
}

#topmenu a {
    color: white;
    font-weight: normal;
}

#sidemenu a {
    color: yellow;
}

As you can see here, the topmenu links have had both their colour and font weight over written, whereas the sidemenu just has the colour changed. Both the topmenu and the sidemenu will only inherit their rules from the first ruleset for the anchor tag. The sidemenu ruleset will not inherit anything from the topmenu ruleset as they are unrelated, so the order of these two rulesets has no bearing on the outcome.

Styling Link States

With page links we can go one step further and style the different states for a hyperlink. A hyperlink typically has 5 states which we target using pseudo-classes:

:link: The state for a link that has not yet been visited
:visited: The state of a visited link
:hover: The state of a link when the mouse is hovering over it
:active: The state of a link when it is being clicked
:focus: The state of a link when it is selected but hasn’t been clicked (this is unsupported in current versions of Internet Explorer)

These pseudo-classes are not just limited to the anchor tag in browsers that support them (such as Internet Explorer 7, Firefox and Opera).

So now we can specify what colour link to use before and after the link has been visited, and we can also have the link change to a third, different colour, when someone hovers their mouse over it. So, for example, we could have all links, in all states, in bold, and then we’d have non visited, visited and hover states in blue, purple and red respectively. To do this we’d use

a {
    font-weight: bold;
}
a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
}

Another common property with links is the text-decoration which is used to control whether a link is underlined or not. Often you’ll see sites with non underlined links until you hover over them. To achieve this we can use the following:

a {
    font-weight: bold;
    text-decoration: none;
}
a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
    text-decoration: underline;
}

The other values that the text-decoration property can have besides none and underline are overline, line-through, blink and inherit (although I wouldn’t ever recommend using blink as it’s just distracting).

You can set other properties on links such as a background colour, font size, font family and more. Next week I’ll explain more of these properties and how they can be used.

CSS Basics: Styling Links

A selection of e-books to help you improve as a blogger. Find out more at www.bloggingtips.com/books/

Understanding CSS

Sarah — Thu, 23 Oct 2008 20:00:15 +0000

CSS stands for Cascading Style Sheets. Its job is to control the presentation of a web page document, written in (x)HTML. The idea is that your web document, written in (x)HTML, contains the content and structure of your page, and then you apply the CSS to give the page colour and layout, keeping content separate from design. To understand more on this way of working I recommend reading SitePoint’s – What is CSS?.

There are 3 ways in which we can apply CSS styles to a web page.

In an external style sheet
In an internal style sheet
Using inline styles

CSS Rulesets

For an internal or external stylesheet, the CSS is made up of rulesets, which contain the selector (usually an (x)HTML tag, id or class), then the properties and their values to apply to that selector, eg.

selector1 {
    property1: value;
    property2: value;
}
selector2 {
    property3: value;
    property1: value;
}

We’ll be dealing more with CSS and the various properties available over the forthcoming weeks.

External Style Sheets

To link to an external style sheet you can either use the link tag or import the style sheet in. With some versions of Internet Explorer still being a bit buggy with the @import method, it’s usually a good idea to stick with the link tag.

The Link Tag

To use the link tag you insert the following code into the head section of your (x)HTML document (ie. between the … tags).

Here the attribute href contains the path to the style sheet. This can be relative to the page eg. ../css/style.css or relative to the root of the site eg. /css/style.css. The rel then usually contains the value of ’stylesheet’ to tell the document that the linked file is a style sheet. You can also specify a value of ‘alternate’ to specify an alternative style sheet. This won’t be loaded by default but the user can switch to it via their browser settings. However, we’ll get onto alternate style sheets another time!

The link tag is also used for linking other files so be sure to have a correct rel attribute in there. The type attribute tells the browser what type of content the file contains, which for style sheets is plain text css code. Finally, we have an optional attribute of media which lets you tell the browser how and when the style sheet should be used. Examples of media values is all (default), screen (for colour computer screens), handheld (for handheld devices eg. PDA) and print (for print preview and printing a document). If media is omitted then it is set to all by default.

The @import Method

To use the @import method we insert the following into the head section of the web document

The value of the path inside the brackets of the url should either be relative to the page importing the file or relative to the root, as with the href value of the link tag. Although Internet Explorer can have problems when you specify media types with the @import method, there’s no problem using this method within an external style sheet, so you could link to an external style sheet using the link tag in the top of a web document, and then in the external style sheet you could use the @import method to include various style sheets. This is ideal for large sites where multiple style sheets are used for easy structure.

The content of an external style sheet will contain rule sets which are made up of selectors and their property value pairs. A typical example could be

body {
    background-color: #ffffff;
    color: #000000;
}
h1 {
    color:#ff0000;
}
etc.

Only this type of coding should be in a CSS style sheet. No HTML tags (in diamond brackets) or anything else should be there otherwise the style sheet will probably not load correctly.

The Internal Style Sheet

The internal style sheet is similar to the external version, in that all of the rules are kept together, however instead of it being applied via a link tag or @import rule, all of the rules are inserted between style tags in the head section of the document. For example