Every element on a page can be represented as a box. The box model is made up of 3 components: a margin, the border and padding. It can be domonstrated by this image below.
Key: Margin Border Padding
The margin is the outer most layer of the box model. This is the outside area around an element, including borders. A margin can be added with the margin css rule.
margin takes 4 values: top right bottom left, e.g., margin: 12px, 24px, 12px, 24px;
Alternatively, there are 4 variations of this rule that can be used to apply a margin in a single direction. These are:
Show Code
Sample margins
The margin is the inner most layer of the box model. This is the inside area between the element (content) and the border. Padding can be added with the padding css rule.
padding takes 4 values: top right bottom left, e.g., padding: 12px, 24px, 12px, 24px;
Alternatively, there are 4 variations of this rule that can be used to apply a margin in a single direction. These are:
Show Code
Sample padding
The boarder is the middle layer of the box model. This is the area around the element's content, before the margin but after the padding. Borders can be added with the border css rule.
There is a shorthand method for adding a border, e.g., border: 1px solid red.
The border can take 11 different styles, these are:
You can change the width of the border by using the css rule, border-width. This can take a set width in px, pt, cm, em, etc, or you can use a pre-defined value (thin, medium, or thick).
To change the color, use border-color and give a Hex or RGB vaue, or an accepted color name.
Show Code
Sample border
Colors can be given in four ways: the color's name, a Hex value, an RGB value or transparent.
There is a set list of 140 color names that all modern browsers accept, you can view these here. Below are the main colors.
| Black | #000000 | Red | #FF0000 | |
| White | #FFFFFF | Orange | #FFA500 | |
| Yellow | #FFFF00 | |||
| Green | #008000 | |||
| Blue | #0000FF | |||
| Indigo | #4B0082 | |||
| Violet | #EE82EE |
To set the color of some text, use color and specify your color.
Setting a background color is done the same way using background-color.
Show Code
Colored Text
Background images are added by using the background-image rule. This can be used to add an image as the bacground of an element. It can also be used to make backgrounds with different gradients.
The url() prameter can be used to set an image as the background, like this example below:
By using 2 images, url(), url() an image can overlay another like this example below:
Below are four examples of how gradients can be made:
The radial background styles can also use 3 colors and repeat too (like the linear examples above).
Show Code
A font stack is one or more font names that the browser will use to change the font of some text. Fonts are added as a property to the font-family rule. Multiple fonts can be used as backups incase the browser doesn't support some.
Note: There is a default font but this depends on the browser so it should be set for consistency.
You can find a collection of web safe CSS font stacks here.
Show Code
New font
The text decoration, text-decoration, property is a CSS rule to add lines to text. These lines can be different colors to the main text with text-decoration-color. They can also be positioned as an underline, overline or line-through with text-decoration-line. To change the style of the line, use text-decoration-style to make the line double, dotty, wavy, etc...
This rule is often used to remove underlines from links (a tags) or to add underlines on hover.
Show Code
The text oveflow text-overflow property is a CSS3 rule. There are 3 main values for this property: clip, ellipses and string.
These values determine how content that will not fit within its container will be displayed.
Note: string will only work in Firefox.
Show Code
Text overflow
This is used to split text into multiple columns. There are a few properties for this rule to customise how the columns are displayed.
Show Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet quam quis nulla ullamcorper faucibus. Vestibulum dapibus ligula at odio ullamcorper cursus. Praesent semper massa magna. Pellentesque tempor arcu vitae augue elementum gravida. Vivamus et orci nibh. Suspendisse lacinia congue urna a maximus.
Media rules can be used to overwrite CSS rules based on things, such as: widht and height of the browser window, the orientation of the device, the resoution od the display, etc...
@media rules are very useful for creating cross-platform websites. It allows for responsive design as it is easy to modify the page content based on the viewport width.
In addition to formatting the page for different devices, they can also be used to style printed documents and screen readers. This is achieved by using the mediatype property and using print, screen or peech as a value.
To apply certain styles when the device width is less than a certain value (in pixels) use @media screen and (min-width: XXXpx). To apply styles when the screen width is greater than a previous @media rule, jsut add another afterwards with an increased min-width value.
To see a basic demonstartion, show the preview and resize this window. Alternatively, head over to this w3schools demo and see how the content of the page adjusts with the browser size.
Show Code
Text that changes color based on screen width