The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins,
borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Example
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know how the box
model works.
Important: When you set the width and height properties of an element with CSS, you just set the width
and height of the content area. To calculate the full size of an element, you must also add padding, borders
and margins.
Example
This <div> element will have a total width of 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right
margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin +
bottom margin
CSS Layout - The display Property
The display Property
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default
display value for most elements is block or inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the
left and right as far as it can).
The <div> element is a block-level element.
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
<span>
<a>
<img>
Display: none;
display: none; is commonly used with JavaScript to hide and show elements without deleting and
recreating them. Take a look at our last example on this page if you want to know how this can be achieved.
The <script> element uses display: none; as default.
CSS Layout - The position Property
The position property specifies the type of positioning method used for an element (static, relative, fixed,
absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an element.
There are five different position values:
static
relative
fixed
absolute
sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently
depending on the position value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:
This <div> element has position: static;
Example
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the
element.
This <div> element has position: relative;
Here is the CSS that is used:
Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always stays in
the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the
element.
A fixed element does not leave a gap in the page where it would normally have been located.
Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:
Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
CSS Layout - float and clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on which side.
The float Property
The float property is used for positioning and formatting content e.g. let an image float left to the text in a
container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
Example
img {
float: right;
}
CSS Layout - Horizontal & Vertical Align
Center Align Elements
To horizontally center a block element (like <div>), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the
two margins:
Example
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Left and Right Align - Using position
One method for aligning elements is to use position: absolute;:
Example
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Example explained:
list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
Set margin: 0; and padding: 0; to remove browser default settings
Image Sprites
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
Image Sprites - Simple Example
Instead of using three separate images, we use this single image ("img_navsprites.gif"):
With CSS, we can show just the part of the image we need.
In the following example the CSS specifies which part of the "img_navsprites.gif" image to show:
Example
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Example explained:
<img id="home" src="img_trans.gif"> - Only defines a small transparent image because the src
attribute cannot be empty. The displayed image will be the background image we specify in CSS
width: 46px; height: 44px; - Defines the portion of the image we want to use
background: url(img_navsprites.gif) 0 0; - Defines the background image and its position
(left 0px, top 0px)
