CSS Summary - XVIII

That wraps up this CSS tutorial - congratulations for making it to the end!.
In this tutorial, we learned that CSS stands for Cascading Style Sheets and that it is used for applying styles to web pages. We learned how to code and implement CSS using the "inline", "embedded", and "external" method.
We learned about classes and ids before applying styles such as font, backgrounds, borders, margins and more. We then covered the more advanced topics such as position, float, and layers, which allows us to create cool layouts.

CSS Layers - XVII

In CSS, layers refer to applying the z-index property to elements that overlap with each other.
The z-index property, when used in conjunction with the position property, enables you to specify which element should appear on top in the event of an overlap. An overlap can easily occur when using the position property, and this is often desirable when creating advanced layouts.
Example code:

<div style="background-color:red;
 width:100px;
 height:100px;
 position:relative;
 top:10px;
 left:80px;
 z-index:2;">
</div>
<div style="background-color:yellow;
 width:100px;
 height:100px;
 position:relative;
 top:-60px;
 left:35px;
 z-index:1;">
</div>

This results in:

CSS Float - XVI

The CSS float property enables you to determine where to position an element relative to the other elements on the page. When you use the float property, other elements will simply wrap around the element you applied the float to.
Example code:

<div style="width:300px;">
<h1 style="float:left;margin-right:10px;">CSS float</h1>
<p>If your browser supports the CSS float Property, this text will be flowing around the heading.
If this does not seem to work, it could be a browser compatibility thing...</p>
</div>

This results in:

CSS float

If your browser supports the CSS float Property, this text will be flowing around the heading. If this does not seem to work, it could be a browser compatibility thing...

CSS Positioning - XV

The term "CSS positioning" refers to using CSS to position elements on your HTML page. CSS allows you to position any element precisely where you want it. You can specify whether you want the element positioned relative to its natural position in the page orabsolute based on its parent element.
Absolute positioning can be very useful for creating advanced layouts and cool visual effects such as overlapping elements to present a layered effect.

Relative Positioning

To perform relative positioning in CSS you use position:relative; followed by the desired offset from either top, right, bottom orleft

<div style="position:relative;left:80px;background-color:yellow;width:100px;">
This div has relative positioning.
</div>

This results in:

This div has relative positioning.

This example offsets the element 80 pixels from the left of where it would have been. If we had specified top, it would appear 80 pixels below where it would have been. It's important to note that other elements are not affected by this element's offset. Therefore, overlapping may occur.

Absolute Positioning

To perform absolute positioning in CSS you use position:absolute; followed by the desired offset.

<div style="position:absolute;top:100px;left:60px;background-color:yellow;">

This div is absolutely positioned 100 pixels from the top and 60 pixels from the left of its containing block.

</div>

View the result

Fixed Positioning

Fixed positioning allows you to fix the position of an element to a particular spot on the page - regardless of scrolling.

<div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">

This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL!

</div>

CSS Height and Width - XIV

CSS includes height and width properties to help you specify the size of your elements.

'height' and 'width' Properties

Applies to all HTML elements except non-replaced inline elements, table columns and column groups.
Can use a fixed height (i.e. pixels) or a percentage height.

<div style="background-color:orange;height:125px;width:75px;">
This div has height and width applied.
</div>

This results in:

This div has height and width applied.

'max-height' and 'max-width' Properties

Enables you to constrain the height and/or width of an element to a maximum value.

<div style="background-color:orange;max-height:125px;max-width:75px;">
This div has max-height and max-width applied.
</div>

This results in:

This div has max-height and max-width applied.

'min-height' and 'min-width' Properties

Enables you to constrain the height and/or width of an element to a minimum value.

<div style="background-color:orange;min-height:125px;min-width:75px;">
This div has min-height and min-width applied.
</div>

This results in:

This div has min-height and min-width applied.

CSS Lists - XIII

CSS includes a number of list properties to help you style your HTML lists.

List Style Type

Determines what the bullet looks like. For info on the possible values see the list-style-type page.

<ul style="list-style-type:circle;">
<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

List Style Image

<ul style="list-style-image:url(/pix/printer_icon.gif);">
<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

List Style Position

Determines whether the bullet is located inside the list's containing box or outside.

<ul style="list-style-position:inside;">
<li>List item one</li>
<li>List item two</li>
</ul>
<ul style="list-style-position:outside;">
<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

• List item one
• List item two

List Style

The list-style property is shorthand for setting the list properties.

<ul style="list-style:square inside;">
<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

Marker Offset

Used in conjunction with display:marker, marker-offset specifies the nearest border edges of the marker box and its associated principal box.

<ul>
<li style="display:marker;marker-offset:10px;">List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

At the time of writing, browser support for marker-offset was limited.

CSS Padding - XII

Padding defines the space between the element's border and its content. CSS padding is specified just like margins - they can be set individually for each side, or all sides at once.

Setting Padding on all Sides

This example uses the padding property to set padding on all sides of an element.

<p style="border:1px solid orange;padding:20px;">
This text has padding of 20 pixels on all four sides.
</p>

This results in:

This text has padding of 20 pixels on all four sides.

Setting Padding for Each Side

If you don't want the padding settings to be applied to all four sides, or if you want each side to have different padding, you can use the following properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

Example:

<p style="border:1px solid orange;padding-left:60px;">This text has left padding of 60 pixels.</p>

This results in:

This text has left padding of 60 pixels.

Shorthand Property

Along similar lines to the margin shorthand property, the padding property is shorthand for padding-top, padding-right,padding-bottom, and padding-left.
Code:

<p>With padding:</p>
<div style="border:1px solid orange;width:100px;padding:20px 10px 0px 100px;">
Padded div
</div>
<p>Without padding:</p>
<div style="border:1px solid orange;width:100px;">
Non-padded div
</div>

Result:

With padding:

Padded div

Without padding:

Non-padded div

As you can see, applying padding to an element can affect the size of that element. In the example above, both <div> elements are specified to be 100 pixels wide. However, the padding on the first <div> pushes the size out, resulting in a larger <div>.

Variations

Again, as with margin, you don't need to provide different values for all four sides. You can provide one, two, three, or four values. Here's how it works:
If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
In other words:

padding:10px;

• All four sides have padding of 10 pixels.

padding:10px 20px;

• Top and bottom have padding of 10 pixels.
• Right and left have padding of 20 pixels.

padding:10px 20px 30px;

• Top is 10px
• Left and right are 20px
• Bottom is 30px

padding:10px 20px 30px 40px;

• Top is 10px
• Right is 20px
• Bottom is 30px
• Left is 40px

CSS Margin - XI

The following CSS margin codes demonstrate the various CSS properties you can use to apply styles to the border of any HTML element.
Margins define the space around the element. CSS margins are specified in a similar way to borders - they can be set individually for each side, or all sides at once.

Setting Margins on all Sides

<div style="border:1px solid blue;">
<p style="border:1px solid orange;margin:20px;">
This text has a margin of 20 pixels on all four sides.
It is nested within a div with a border to make it easier to see the effect of the margin.
</p>
</div>

This results in:

This text has a margin of 20 pixels on all four sides. It is nested within a div with a border to make it easier to see the effect of the margin.

Setting Margins for Each Side

If you don't want the margin settings to be applied to all four sides, or if you want each side to have different margins applied, you can use the following properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

Example:

<p style="border:1px solid orange;margin-left:60px;">This text has a left margin of 60 pixels.</p>

This results in:

This text has a left margin of 60 pixels.

Shorthand Property

This method uses a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in the one place. This method is quicker. It also uses less code than the previous method. Actually, it's the same property that we used in our first example (i.e. the margin property). The only difference is that we apply multiple values against it.
Code:

<div style="border:1px solid blue;width:200px;">
<p style="border:1px solid orange;margin:40px 10px 1px 40px;">
This text has a different sized margin for each side. 
It is nested within a div with a border to make it easier to see the effect of the margin.
</p>
</div>

Result:

This text has a different sized margin for each side. It is nested within a div with a border to make it easier to see the effect of the margin.

Variations

You don't need to provide different values for all four sides. You can provide one, two, three, or four values. Here's how it works:
If there is only one value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
In other words:

margin:10px;

• All four sides have a margin of 10 pixels.

margin:10px 20px;

• Top and bottom have a margin of 10 pixels.
• Right and left have a margin of 20 pixels.

margin:10px 20px 30px;

• Top is 10px
• Left and right are 20px
• Bottom is 30px

margin:10px 20px 30px 40px;

• Top is 10px
• Right is 20px
• Bottom is 30px
• Left is 40px

CSS Border - X

The following CSS border codes demonstrate the various CSS properties you can use to apply styles to the border of any HTML element.
CSS allows you to set styles for the border of any HTML element. It also provides you with a way of setting border styles for one or more sides of an element.

Setting Borders on all Sides

To set border styles for all sides of an element, you use the border-width, border-style, and border-color properties. You can also use the border property to set all properties at once.

'border-width', 'border-style', and 'border-color'

<p style="border-width:1px;border-style:solid;border-color:blue;">This text has border styles applied using the border-width, border-style, and border-color properties.</p>

This results in:

This text has border styles applied using the border-width, border-style, and border-color properties.

The 'border' Property

The 'border' property is shorthand for setting border-width, border-style, and border-color.

<p style="border:1px solid blue;">This text has border styles applied using the border property.</p>

This results in:

This text has border styles applied using the border property.

Border Styles

Borders can have the following styles.

<p style="border:4px solid blue;">This text has a border style of 'solid'.</p>
<p style="border:4px dotted blue;">This text has a border style of 'dotted'.</p>
<p style="border:4px dashed blue;">This text has a border style of 'dashed'.</p>
<p style="border:4px double blue;">This text has a border style of 'double'.</p>
<p style="border:4px groove blue;">This text has a border style of 'groove'.</p>
<p style="border:4px ridge blue;">This text has a border style of 'ridge'.</p>
<p style="border:4px inset blue;">This text has a border style of 'inset'.</p>
<p style="border:4px outset blue;">This text has a border style of 'outset'.</p>
<p style="border:4px hidden blue;">This text has a border style of 'hidden'.</p>

This results in:

This text has a border style of 'solid'.

This text has a border style of 'dotted'.

This text has a border style of 'dashed'.

This text has a border style of 'double'.

This text has a border style of 'groove'.

This text has a border style of 'ridge'.

This text has a border style of 'inset'.

This text has a border style of 'outset'.

This text has a border style of 'hidden'.

Setting Borders for Each Side

If you don't want the border settings to be applied to all four sides, or if you want each side to have different styles applied, you can use the following properties:

Explicit Properties

• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-left-color
• border-left-style
• border-left-width
• border-right-color
• border-right-style
• border-right-width
• border-top-color
• border-top-style
• border-top-width

Example:

<p style="border-bottom-width:4px;border-bottom-style:double;border-bottom-color:blue;">This text has a bottom border.</p>

This results in:

This text has a bottom border.

Shorthand Properties

The following properties provide you with a more concise way of specifying border properties for each side.

• border-bottom
• border-left
• border-right
• border-top

Example:

<p style="border-bottom:4px double blue;">This text has a bottom border.</p>

This results in:

This text has a bottom border.

CSS Background Code - IX

The following CSS background codes demonstrate the various CSS properties you can use to style the background of any HTML element.

CSS Background Color

<p style="background-color:yellow;">This text has a background color applied.</p>

This results in:

This text has a background color applied.

CSS Background Image

<p style="height:100px;background-image:url(/pix/smile.gif);">This text has a background image applied. </p>

This results in:

This text has a background image applied.

CSS Background Repeat

Determines whether the background image repeats (tiles) or not. For info on the possible values, see the background-repeat page.

<p style="height:100px;background-image:url(/pix/smile.gif);background-repeat:no-repeat;">This background image does not repeat. </p>

This results in:

This background image does not repeat.

CSS Background Position

Determines the position of the background image.

<p style="height:100px;background-image:url(/pix/smile.gif);background-repeat:no-repeat;background-position:100px;">This background image is positioned 100 pixels in from the left. </p>

This results in:

This background image is positioned 100 pixels in from the left.

CSS Background Attachment

Determines whether or not the background image scrolls with the outer container.

<p style="height:100px;width:150px;overflow:scroll;background-image:url(/pix/smile.gif);background-attachment:fixed;">This background image is fixed - it doesn't scroll with its outer container. This example uses the CSS overflow property to force the box to scroll when there's too much text to fit in the box. </p>

This results in:

This background image is fixed - it doesn't scroll with its outer container. This example uses the CSS overflow property to force the box to scroll when there's too much text to fit in the box.

Shorthand Code

You can use the background property to set all the background properties at once. For example:

<p style="height:100px;width:150px;overflow:scroll;background:url(/pix/smile.gif) repeat fixed;">This paragraph tag has been styled using the 'background' property, which is shorthand for setting multiple properties for an HTML element. </p>

This results in:

This paragraph tag has been styled using the 'background' property, which is shorthand for setting multiple properties for an HTML element.

CSS Text - VIII

Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.
In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.

CSS Text Color

<p style="color:olive;">This CSS text color is olive</p>

This results in:

This CSS text color is olive

CSS Text Align

<p style="text-align:right;">This CSS text is aligned right</p>

This results in:

This CSS text is aligned right

CSS Text Indent

Indents the first line of the paragraph.

<p style="text-indent:50px;">This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!</p>

This results in:

This text is indented by 50 pixels. What this means is that the first line of the paragraph will be indented by 50 pixels, but the following lines will not be indented. The text will need to wrap before you can see the indent - hence all this text!

CSS Letter Spacing

<p style="letter-spacing:5px;">This text has letter spacing applied</p>

This results in:

This text has letter spacing applied

CSS Word Spacing

<p style="word-spacing:50px;">This text has word spacing applied</p>

This results in:

This text has word spacing applied

CSS Text Decoration

<p style="text-decoration:overline;">This text has a line over the top</p>
<p style="text-decoration:line-through;">This text has a line through the middle</p>
<p style="text-decoration:underline;">This text has a line underneath</p>
<a style="text-decoration:none;" a href="/css/properties/css_text-decoration.cfm" >
This hyperlink has no underline</a>
<p style="text-decoration:blink;">This text is blinking</p>

This results in:

This text has a line over the top

This text has a line through the middle

This text has a line underneath

This hyperlink has no underlineThis text is blinking

CSS Text Transform

<p style="text-transform:uppercase;">This text has been transformed to uppercase</p>
<p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p>
<p style="text-transform:capitalize;">this text has been capitalized.</p>

This results in:

THIS TEXT HAS BEEN TRANSFORMED TO UPPERCASE

this text has been transformed to lowercase

This Text Has Been Capitalized.

CSS Text Direction

<p style="direction:rtl;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>

This results in:

This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...

CSS unicode-bidi

Use this in conjunction with the direction property to determine the direction of the text. Possible values: normal, embed, bidi-override, and inherit.

<p style="direction:rtl;unicode-bidi:bidi-override;">This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...</p>

This results in:

This text is running from right to left. This can be useful for languages where the text runs from right to left. Not so useful for english though...

CSS Text Shadow

<p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p>

This results in:

If your browser supports the CSS text-shadow property, this text will have a shadow.

CSS White Space

Tells the browser how to handle white space. Possible values: normal, pre, and nowrap.

<p style="white-space:pre;">This text has a line break
and the white-space pre setting tells the browser to honor it
just like the HTML pre tag.</p>

This results in:

This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag.