Common CSS

CSS has a deceptively simple syntax but it remains difficult to implement designs. This is partly due to a bewildering number of properties as well as the simplicity of the language. Our aim here is to take a tour through the most commonly used CSS properties.

We shall use this comprehensive CSS properties refernce.

To apply CSS, we need an HTML file to work with. Take a copy of the common_elements.html file and save it as common_css.html file. We shall use this file throughout the following exercises.

Typography

Traditionally, developers had to rely on the fonts installed locally and this varied a great deal on different systems. The introduction of the @font-face in CSS allows for online fonts; this is currently experimental technology but the specification will soon stabilise and browsers are incresingly supporting it.

Exercise – Typography

Try each of the buttons to see the overall look and feel of the exercise change.


  1. Visit Google fonts.
  2. Add several fonts to your collection; note, you can review (option at the bottom of the page) each font in a complete page.
  3. Once you have chosen your fonts, click use; the page is refreshed with a link element and the CSS, font-family declaration to include in your site.
  4. Copy the link element and paste it into the head element in the common_css.html file.
  5. A font applied to the body element is inherited by all child elements, making the font the default. Choose one of your fonts for the default and include it in the common_css.css file. Depending on your font name, the code will be similar to:
    body {
    	font-family: 'Kite One', sans-serif;
    }	
    
  6. Consider the content of the common_css.html file and decide their fonts and include the CSS in the common_css.css file.
    Remember selectors can be specified as a comma seperated list to have the same CSS rule, for example: h1, h2, h3 { font-family: 'Kite One', sans-serif; }
  7. Visit the CSS properties refernce and consider the following font-size, font-stretch, font-style, font-variant, font-weight properties to apply.

Colour scheme

Graphics designers talk of colour theory and complementary or triad schemes. For implementation, what is required is the values of colours to be specified by CSS for various elements within a page. There are various tools that help with colour schemes.

For a relatively simple coloue picker, visit the Mozzilla Developer Network color picker tool. Simply move the small circle on the main colour pallet and the sliders next to it untill the desired color is displayed with its value. For a more comprehensive color scheme generator, visit the Color scheme designer. Another excellent colour tool to build and share colour schemes is Adobe Kuler; it has a nice facility to create a colour scheme from an image you upload.

Adobe Kuler is another excellent colour tool to build and share colour schemes. It has a nice facility to create a colour scheme from an image you upload.

Exercise – Colour scheme

Try the following buttons to see the overall look and feel of the page change.


  1. Visit Adobe Kuler, it is intuitive to use. Your aim is to note a set of hexadecimal colour values for the background, header, footer and the sections in common_css.htmlfile.
  2. Choose a scheme by selecting one of the circles under the main title and move the small circle on the main colour wheel.
  3. There are many options, but be sure to select web colours in the color space drop down menu at the top of the page and the excellent preview of a typical light and dark page.
  4. There is a preview for accessibility with a setting for different visual colour impairment.
  5. Hovering over any of the colours reveals the hexadecimal value of the colour and there is an export option for the hexadecimal values that can be used in the CSS colour attribute values.
  6. A colour applied to the body element is inherited by all child elements, making the colour the default. Choose a colour for each part of the page and include it in the common_css.css file. Depending on the color value, the code will be similar to:
    header {
    	background-color: #bbff00;
    	color: #663300;
    }	
    
    It is good practice to specify color together with background-color
  7. Consider the content of the common_css.html file and decide on a colour scheme and include the CSS in the common_css.css file.
    Remember selectors can be specified as a comma seperated list to have the same CSS rule, for example: h1, h2, h3 { font-family: 'Kite One', sans-serif; }

Graphics

Visit the BBc radio 1 website. The impact of the site is the work of graphic artisits and designers. For developers, it is important to know the implementation techniques for embedding grahics and choosing the appropriate graphics format. We will cover these techniques in the exercises with background images and graphics menus. However, there is a certain amount of graphics manipulation that is desirable. Consider the two images of Venus. Whilst the background colour is sometimes necessary, the manipulated image with background opacity is sometimes desirable.

VenusVenus transparent

GimpGimp is a versatile open source editor that has a good tutorial on opacity and does all the scalling and exporting of images that you are likely to need.

Exercise – Graphics

  1. Right-mouse click on the Venus image with the green background and save the image, venus.png in your project directory.
  2. Use your favourite graphics editor to make the background transparent. GimpGimp is a versatile open source editor that has a good tutorial on opacity and does all the scalling and exporting of images that you are likely to need.
  3. Scale the image to 75% of its current size.
  4. In the common_css.html file, insert a new paragraph <p><img id="ex_float" src="venus.png" alt="Beautiful Venus" /></p> element. This can be used to apply the following CSS:
    #ex_float {
    	float: left;
    }
  5. Save the above CSS in the common_css.cssfile.
  6. Copy the text in the paragraph below the Graphics heading and insert it immediately after the end img tag. This is to provide some text for the image to float next to.
  7. Save and refresh the browser to see the image float to the left. Change the float value to right and refresh the browser.

Background image

To include a background image, we first need to restrict the width of the body so the image can be seen.

  1. Insert the following into common_css.cssfile.
    body {			
    	max-width: 960px;
    	margin: 10px auto;
    }
    
  2. Note the shorthand notation for margin, top and bottom are 10px and left and right are automatically adjusted for the body to be centered.
  3. and here is the CSS code for the background image
    html { 
    	background: url("insert image pathname") no-repeat center center fixed; 
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }  
    
  • Browser do behave differently, hence the use of webkit, Mozzilla and Opera extensions.
  • Note the url, you need to insert your background image filename.
  • Background images are not restricted to html elements; it can be applied to other elements such as a section.

Borders

Borders are widely used to decorate elements with lines or boxes and support several styles which include:

solid
dotted
dashed
double
inset
outset
ridge
groove

Using the border-radius allows for interesting patterns to decorate navigation button to whole sections, note the border arround the exercise boxes.

solid
dotted
dashed
double

Exercise – Borders

  1. Insert the following CSS into common_css.css file
    section {
    	border-radius: 15px;
    	border: 1px dashed #4a4; 
    	margin: .5em; 
    	padding: .5em; 
    }
    a:hover {
    	border-bottom: 3px solid #4a4;
    	background-color: green; 	
    }
    
  2. Open common_css.html file to see the borders.
  3. Note the shorthand notation:
    • padding: .5em; is equivalent to: padding-top: .5em; padding-right: .5em; padding-bottom: .5em; padding-left: .5em;
    • border: 1px dashed #4a4; is equivalent to: border-width: 1px; border-style: dashed; border-color: #4a4;
  4. Change each attribute value to see if you can achieve a desired effect.
  5. Apply borders to some other elements

Navigation

Navigation is an important component of web documents. This is achieved by various types of menus, which are essentially lists combined with hyperlinks.

Exercise – Navigation

Vertical menu

Consider the following HTML and add it to the common_css.htmlfile. Save and display in Firefox.

<nav id="vertical_nav">
	<ul>
		 <li>
			 <a href="#">Item one</a>
		 </li>
		 <li id="selected">
			 <a href="#">Item two</a>
		 </li>
		 <li>
			 <a href="#">Item three</a>
		 </li>
	 </ul>
</nav>

To style the above into a vertical menu, start at the root container nav element and set a border, width, colour, padding and margins.

#vertical_nav	
{ 
	border: solid 0.1em #e1e1e1; 
	border-radius: 1em; 
	margin: 0; 
	padding: 0 0.5em 1.5em 0.5em; 
	width: 10em;
	color: inherit; 
	background-color: inherit; 
}	

Add the above to the common_css.cssfile, save and refresh the browser.

Next for the list margin, paddings and the list style.

#vertical_nav ul 
{ 
	margin: 0; 
	padding: 0; 
	color: inherit; 
	background-color: inherit; 
}
#vertical_nav li	 
{ 
	margin: 1em 0 0 0; 
	padding: 0; 
	list-style: none; 
	color: inherit; 
	background-color: inherit; 
}	

Add the above to the common_css.cssfile, save and refresh the browser.

And finally the hyperlink inside the list item.

#vertical_nav a 
{ 
	margin: 0; 
	padding: 0 1em; 
	display: block; 
	text-decoration: none; 
	border-bottom: 1px solid #A8BFCF; 
	color: inherit; 
	background-color: inherit; 
}
#vertical_nav a:hover 
{ 
	border-bottom: solid 1px #ffa20f; 
	color: inherit; 
	background-color: inherit; 
}

Add the above to the common_css.cssfile, save and refresh the browser.

Some challenges

Create your own styled navigation, try:

  1. Change the hyperlink hover background-colour to see a roll over effect.
  2. Change the color and background colour to your own colour scheme.
  3. Apply different border widths and types.
  4. Experiment with border-radius.

Horizontal menu

The vertical menu above can be turned into a horizontal menu by styling the list items and the hyperlinks to be displayed inline instead of a block.

The CSS is essentially the same as the vertical menu except for the list item and hyperlinks need to be made inline and the width needs to change to accomodate the inline menu.

  1. Copy the HTML code above and paste it into the common_css.html file.
  2. Change the nav id value from vertical_nav to horizontal_nav
  3. Copy the CSS code above and paste it into the common_css.css file.
  4. Change the selector names from #vertical_nav to #horizontal_nav
  5. Save and refresh the browser to see two vertical menus.
  6. In the #horizontal_nav rule, change width: 10em; to width: 100%;
  7. Save and refresh the browser.
  8. In the #horizontal_nav li and the #horizontal_nav a rules, change display: block; to display: inline;
  9. Save and refresh the browser.
Some challenges:

Create your own styled navigation, try:

  1. Change the hyperlink hover background-colour to see a roll over effect.
  2. Change the color and background colour to your own colour scheme.
  3. Apply different border widths and types.
  4. Experiment with border-radius.

Exercise – Home page

When a URL specifies only an IP address, such as, http://example.com, the web server automatically looks for a default document, usually named, index.html. It is therefore a good idea to create an index.html file as the default page for the site.

Use the skills you have learned so far to create an index.html file that includes:

  1. Personal information about you; name, id, course, photograph and anything else you wish.
  2. A navigation menu to all exercises. The navigation should be intuitive and individual exercises should be found easily (use the exercise titles in the navigation hyperlinks).
  3. Create a main.css file and link it to the index.html file.
  4. Validate the HTML document.
  5. Style the index page for typography, colour scheme and navigation.
  6. Validate the CSS code.
  7. Open index.html in Firefox and do a final check that you can navigate to all the pages.
  8. Ask a friend to use the site and evaluate it for navigation and general design.