Some CSS selectors allow use to use what are called CSS pseudo-classes in order to add some special effects. Probably the best example of this is the anchor tag and it’s hover features.
Anchor tag’s behaviours can be manipulated by using pseudo-classes. Let’s say we want a link to go bold when we hover [...]
You will often want to center align a block element (such as a div). Personally I find the best way to do this is to use CSS Align Using Margin.
Setting a margin to auto will try and force the element to the opposite side. So, if you set both left and [...]
Often you’ll want an item to be left or right aligned with text wrapped around it, this is what CSS Floats are used for. CSS Floats are used in the majority of CSS layouts, they’re very handy and you should learn how they work inside and out.
The best example to use for CSS floats [...]
Positioning elements on a page can be tricky some times. There is a lot to remember, but if you can master CSS Positioning then you should be on the right track.
CSS Positioning consists of 4 main declarations:
Static
Fixed
Relative
Absolute
The static position (position:static;) is the default for HTML elements. It basically means that the element will [...]
There are different ways you can display or hide an element using CSS Display and CSS Visibility. Let’s begin at the ways we can hide an element.
visibility:hidden; this declaration will hide the element from the users screen, but the page still acts as if it was there. So, if you have a [...]
When creating CSS layouts it’s important to keep in mind how CSS Dimensions work.
There are 6 different dimension declarations:
height
max-height
min-height
width
max-width
min-width
Height and width state the height and width of an element. Not all elements can have specific widths or heights defined, and some will shrink depending on the size of their content. You can usually [...]
In CSS it is possible to nest and group selectors together.
The easiest way to explain CSS grouping and nesting is by using examples.
Let’s say I want to have all my h tags (h1-h6) in a green font colour, rather than the rest which are all black. All I need to do is [...]
CSS Padding is similar to CSS Margin and part of the CSS Box Model.
Adding padding to an element will make the contents of that element move away from the outside of the element.
Take the following example:
The below div has absolutely no padding on it.
No padding
If we add 10 pixels padding:
10px padding
You can use [...]
CSS Margin can be used to manipulate the space around an HTML element.
The below div have absolutely no margin on it.
No margin
If we add 10 pixels margin:
10px margin
As you can see, the CSS: .my_div { margin:10px; } adds 10 pixels of margin on ALL sides of the element. This includes the top AND bottom, [...]
A CSS Outline is extremely similar to CSS Border. A CSS Outline is simply a CSS Border outside the element. Using CSS outlines you can make an element stand out and have two seperate borders.
.my_div { outline:1px solid #000; }
Would produce:
A 1px solid outline
Now let’s include this with a border.
.my_div {
outline:1px solid #000;
border:1px [...]
