html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Intermediate

Lesson 9 - CSS 1/2 Intermediate Summary

To conclude the CSS 1/2 Intermediate Tutorials section, we bring all we have learnt together in a web page utilizing the knowledge we have gathered so far. We will use a selection of the properties from the CSS 1/2 Intermediate section and see what can be achieved with them.

CSS Properties Used in the CSS 1/2 Intermediate Section:


Background Colour
background-color

Background Image
background-attachment, background-image, background-position and background-repeat

Background Shorthand
background

Dimensions
height, min-height, max-height, width, min-width, max-width, line-height 
and vertical-align

Display
cursor, display, overflow and visibiity

Floating 
float and clear

Positional
position, top, right, bottom, left, clip and z-index

Viewing the CSS Properties

Lets combine the CSS properties used in this section and see what effects we can accomplish.

Open up the file with Notepad we created and tested in Lesson 8: Display.

You saved the file to your computer in the C:\_CSSIntermediate folder as lesson_8_csspage.html

Copy and paste the following code into the reopened file, overwriting the existing text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for CSS 1/2 Intermediate Summary follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Doctor Intermediate CSS - Lesson 9 - CSS 1/2 Intermediate Summary</title>

<style type="text/css">

/* Set minimum and maximum height and width for the body element
  Set margin and background colour for whole document */
body {
  min-height: 300px;
  max-height: 800px;
  min-width: 500px;
  max-width: 750px;
  margin: 10px;
  background-color: orange;
}
/* Float a div to the right */
div {
  background-color: white;
  float: right;
  height: 100px;
  width: 150px;
	margin: 10px;
  overflow: auto;
}
/* Background colour more specific */
body p {
  background-color: green;
}
/* Background fixed top centre with no repeat and different background */
#para1 {
  background: url(http://htmldoctor.info/images/html.png) fixed 25% 50% no-repeat;
}
</style>

</head>
<body>
<h1>CSS 1/2 Intermediate Summary</h1>
<div>
<h2>overflow, height and width</h2>
<p>Background shorthand and some filler text.</p>
</div>
<h2>Background shorthand</h2>
<p id="para1">Background image is fixed.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler.</p>
<p>Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.
Filler text.Filler text.Filler text.Filler text.Filler text.Filler text.Filler.</p>
</body>
</html>

Save the file in the C:\_CSSIntermediate folder as lesson_9_csspage.html and close the Notepad.

notepad

Viewing Our Saved File

From the C:\_CSSIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

notepad

Reviewing Our Changes

The background CSS properties add colour and images to our canvasses and really liven up the look of a web page.

A good understanding of the box model and how it effects the position of elements on our pages is key to getting the layouts and placement we want.

Style inheritance allows our styling to filter through to descendant selectors and thus cuts down the amount of CSS we have to write.

By using specificity we can fine tune our elements so only certain elements get styled.

Position and display properties give us the opportunity to place elements where we want, even outside normal control flow.

Lesson 9 Complete

The CSS properties presented in this intermediate section add another layer of detail to those already learnt in the basics section. Take some time to get to grips with them and modify the file and see what improvements you can make to the visual representation depicted above.

Related Tutorials

CSS Basic Tutorials

CSS 1/2 Advanced Tutorials

What's Next?

We take our final look at CSS with some more advanced features in the advanced tutorials section.



Display  << Prev           Next >>  CSS 1/2 Advanced Tutorials

CSS 1/2 Reference

Background Colour Properties Display Properties
The background-color CSS Property The cursor CSS Property
Background Image Properties The display CSS Property
The background-attachment CSS Property The overflow CSS Property
The background-image CSS Property The visibility CSS Property
The background-position CSS Property Float Properties
The background-repeat CSS Property The clear CSS Property
The background CSS Property The float CSS Property
Dimension Properties Positional Properties
The height CSS Property The position CSS Property
The min-height CSS Property The top CSS Property
The max-height CSS Property The right CSS Property
The width CSS Property The bottom CSS Property
The min-width CSS Property The left CSS Property
The max-width CSS Property The clip CSS Property
The line-height CSS Property The z-index CSS Property
The vertical-align CSS Property

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.