Monday, April 9, 2007

Master CSS in One Hour

CSS Introduction

What is CSS?
CSS (cascading style sheets or style sheets) allows you to specify the style and layout of many web pages at once by making changes to a single style sheet.

Style sheets are files with instructions on how to present a web page(s) in a web browser such as Firefox or Internet Explorer. CSS instructions can be within the web page itself, or in a separate document which is linked to the web page.

CSS allows you to specify properties on one of your web pages. This allows you to make changes to many web pages at once.

Before you learn CSS
Before you learn CSS, you should have at least a basic understanding of HTML/XHTML.

Benefits of CSS

  • Your web pages load faster because there is less code to transfer
  • There is less code to type
  • It is easier to have a consistent look and feel to your entire web site
  • Updating and maintaining websites is much easier and less time consuming

CSS also allows you to:

  • position text and graphics precisely where you want to
  • add rollover effects to links
  • control the spacing between letters, lines, margins, web page borders
  • specify the units such as centimeters, pixels, points and more
  • hide content from certain web browsers in certain situations. An example of this is when you have some content that you want to appear only in your web pages, but not in print.

Web Browser Compatibility
You should know that different web browsers interpret CSS standards in different ways and will want to see how your website looks in at least the most popular browsers. Some older browsers are not able read CSS at all, although this is very rare now and steps can be taken to handle these situations. You will also want to see how your website looks in different screen sizes.

CSS Syntax

The basic CSS syntax is made up of 3 parts: selector {property: value}

The selector is typically an HTML tag or element such as

,

,

.

The following is a CSS code example of an internal style sheet. The selector (the

tag in this example) is made bold.







The text in this CSS example will be red.



Click on CSS Example to view what the code produces.

Try it yourself. Enter the HTML code to create another link in the textbox below.


The property is the characteristic of the selector that you want to change such as color, font, height, width, etc.

The property (color) is made bold in the following css code example







The text in this CSS example will be red.



Specifying Multiple Properties

If you want to specify more than one property, you have to separate each property with a semi-colon (;).

The following CSS code example shows you how to do this.







The text in this CSS example will be red.



Assiging Values

A value is assigned to the property, such as defining the color, font style, or size of the font.

The values in the following CSS code example are made bold.







The text in this CSS example will be red.



The Class Selector

Class selectors allow you to define different styles for the same type of HTML tag/element. For example, the class selector lets you have 2 types of paragraphs in your web page and one is aligned to the left and another that is center aligned.

The following CSS code shows you an example of how this is done.





This paragraph has a class selector "left".



This paragraph has a class seceltor "center".



Grouping Selectors

You can group selectors if they share the same declarations. Each selector has to be separated by a comma.

The following example of css code groups the header elements and will make the text in them red.





The text in this heading will be red.



The text in this heading will be red.



The text in this heading will be red.



A Few Notes

You can only specify one attribute per HTML tag/element. The following CSS code example is wrong.


This is a paragraph.

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:


This heading will be center-aligned



This paragraph will also be center-aligned.

Do NOT start a class name with a number! It won't work in Firefox/Mozilla.

CSS Comments
You can insert comments in your CSS code much like you can with HTML code. And just as in HTML, the comment will be ignored by the web browser. A CSS comment begins with "/*", and ends with "*/", like the following example.

/* This is a comment */
p
{
font-size: 120%;
/* This is another comment */
color: black;
}

Internal Style Sheets and Inline Styles

Internal Style Sheets

Internal style sheets should be used when you want to control the look and layout of a single web page. The internal style sheet code (




The internal style sheet in the following CSS code example tells the web browser to make the text color in the paragraph the color red.








This CSS example is using an internal style sheet. The color of the text in this paragraph will be red.



Inline Styles

In-line style sheets should be used sparingly, since they do not provide the benefits of internal and external style sheets.

The following CSS example shows how to insert an in-line style sheet.






style="font-weight: bold">
The text in this CSS example will be made bold.



If you want to specify multiple properties in an in-line style sheet, each CSS statement must be separated by a semi-colon (;).

The following CSS code shows how this is done.






style="font-weight: bold; color: red">
The text in this CSS example will be made bold and the text color will be red.




External Style Sheets Tutorial

External style sheets are best used when there is one style applied to many web pages. The style sheet code is placed in a separate file with a ".css" extension, similar to an HTML file. The external style sheet is then referenced to from the HTML files to which it applies by using a link to the CSS file, instead of using the style itself.

The CSS code wich is used to link to the external style sheet is
.

Creating a CSS File

To create a sample CSS file, simply open up notepad, or any other plain text editor and type the following CSS code. DO NOT add any HTML tags to the external style sheet.

CSS code

body
{
background-color: blue
}
p
{
color: red
}

Next, save the file with a ".css" extension. Save the CSS file and name it "test.css"

Now create an HTML file with the following code.







The text in this paragraph will be a red font and the background will be blue.



Now save the HTML file as "example.htm" or "example.html". Next, open the "example.htm" file in your web browser. You have now made a web page that uses external style sheets.

Do NOT leave spaces between the property value and the units! If you use "margin-left: 10 px" instead of "margin-left: 10px" it will not work in Firefox/Mozilla or Netscape, only in Internet Explorer 6.

CSS Background Images and Colors Tutorial

CSS background properties allow you to specify things such as:

  • The background color of a web page(s), table(s), paragraph(s), etc
  • The background image for a web page(s), table(s), paragraph(s), etc
  • The position of the background image
  • It allows an image to scroll with a web page, or to fix the position on the screen
  • It allows you to control whether the image repeats itself or not

Setting Background Colors

The background color property allows you to set the background color of an HTML element.

The following CSS code example shows how to set the background property of a paragraph in an internal style sheet.







This paragraph will have a yellow background










This web page will have a yellow background




Setting an Image as a Background

The following CSS code shows how to insert an image as a background. By default, the page background image will scroll with the page. Scroll up and down the web page and notice how the image scrolls with the web page.







a CSS example of a background image




Creating a Fixed Background Image

It is possible to create a fixed background image using the background-attachment: fixed property. The property allows the image to stay in the same place on the screen while the web page scrolls.







a CSS example of a background image




Controlling the Background Tiling Effect

You can control the tiling effect of the background image with the use of the background-attachment: fixed property. The following CSS examples show you how to control the various tiling effects with the respective background repeat properties.

The CSS code {background-repeat: repeat} will tile the image both horizontally and vertically. This is the default setting.







a CSS example of a background image




You can tile the image in the horizontal direction only if you like.







a CSS example of a background image



Click on CSS Example to view what this code produces.

You can tile an image in the vertical direction only.







a CSS example of a background image




You can have a background image appear only once.







a CSS example of a background image




Positioning a Background Image

CSS allows you to control precisely where you will place a background image within an HTML element by using the background-position property.

The CSS code background-position: x% y% allows you to place the background image x% (x percentage) across the web page and y% (y percentage) down the web page. Giving it values of "0 0" will place the background image in the top left hand corner.







a CSS example of a background image




The CSS code {background-position: x y} allows you to place a background image x units across the web page and y units down the web page. The "x" and "y" represent any unit you specify.







a CSS example of a background image




CSS allows you to easily position a background image using various combinations of the following words: top left, top center, top right, center left, center center, center right, bottom left, bottom center and bottom right.







a CSS example of a background image



CSS Text Tutorial

CSS Text Formatting

CSS text formatting properties allow you to control the appearance of text. They allow you to choose the color of text, align text, increase or decrease the space between characters, etc.

Setting the Color of Text

The following CSS code example shows how to set the color of text.









The text in this paragraph will be red.




Setting the Background-Color of Text

The following CSS code example shows how to set the back-ground of a part of the text.









This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.




Specifying the space between characters.

The following CSS code example shows how to specify the space between characters.









This is header 1



This is header 2




Aligning Text

This CSS code example shows you how to align text.









This is header 1



This is header 2




This is header 3



Decorate Text

This CSS code example shows you how to decorate text.









This is header 1 will have a line above it



This is header 2 will be crossed through




This is header 3 will be underlined



This is header 4 should be blinking


This is link will have no text decoration



Indenting Text

The following CSS code example shows how to indent the first line of a paragraph.









The first line in this paragraph will be indented. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.



The first line in this paragraph will also be indented. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.



Controlling the letters in Text

This CSS code example demonstrates how to control the letters in text. Pay close attention to which letters are uppercase, lowercase or capitalized in the code and in the browser example.









All of the letters in this paragraph will be uppercase.



All of the letters in this paragraph will be lowercase.



All of the words in this text will have the first letter capitalized.


CSS Fonts

Setting the Font of Text

The following CSS code example shows how to set the font of text.







This is a heading with a times font.



This is a paragraph with a courier font.



This is a paragraph with an arial font.




Setting the Font Size

The following CSS code example shows how to set the size of the font.







This is header 1 with a font size of 100%



This is header 1 with a font size of 150%



This is a paragraph with a font size of 100%



This is a paragraph with a font size of 150%




Setting the Style of the Font

The following CSS code example shows how to set the style of the font.







This is header 1



This is header 1



This is a paragraph




Setting the Boldness of the Font.

The following CSS example shows how to set the boldness of a font.







This paragraph has a normal font.



This paragraph has a bold font-weight.



This paragraph has a font-weight of 900.




Setting the Variant of the Font.

The font variant property displays text in a small-caps font or a normal font.
The following CSS code example shows how to set the variant of the font.







This paragraph has a normal variant font style.



This paragraph has a small-caps variant font style.



CSS Links Tutorial

CSS allows you to add effects to hyperlinks. If you do not use CSS, the only other way to add effects to hyperlinks would be to use java script.

A hyperlink has four states that it can be in. CSS allows you to customize each state that it is in. It is also necessary to write the code in the order in which they appear for the link(s) to work properly.

a:link {color: #000000} defines an unvisited link
a:visited {color: #000000} defines a visited link
a:hover {color: #000000} defines a mouse over link
a:active {color: #000000} defines a selected link

Some things to note and remember:
a:hover has to come after a:link and a:visited in the CSS definition in order to work as it should

a:active has to come after a:hover in the CSS definition in order to work as it should.

Pseudo-class names are not case-sensitive.

Adding Colors to Links

The following CSS code example shows how to add different colors to a hyperlink.










This is a link




The following CSS code examples show how to add other styles to links.










This link changes color



This link changes font-size



This link changes background-color



This link changes font-family



This link changes text-decoration



CSS Margins Tutorial

The CSS margin properties define the space around elements. CSS padding properties refer to the white space within the border. Setting the value of a margin is NOT the same as setting the padding value.

All four sides (top, bottom, right, left) can be changed independently using separate properties. It is also possible to use negative values to overlap content.

Setting the Left Margin

The following CSS code example shows how to set the value of the left margin.








This paragraph does not have a specified margin.



This paragraph has a left margin of 4cm.




Setting the Right Margin

The following CSS code example shows how to set the value of the right margin.








This paragraph does not have a specified margin.



This paragraph has a right margin of 10cm.




Setting the Top Margin

The following CSS code example shows how to set the value of the top margin.








This paragraph does not have a specified margin.



This paragraph has a top margin of 5cm.




Setting the Bottom Margin

The following CSS code example shows how to set the value of the bottom margin.








This paragraph does not have a specified margin.




This paragraph has a bottom margin of 5cm.



This paragraph does not have a specified margin.



CSS Padding Tutorial

Padding is the space that appears between an element's border and the content of the element. CSS padding properties allow you to define that space.

Setting the Left Padding of a Paragraph

The following CSS code example shows how to set the left padding of a paragraph.







This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm. This is a paragraph with a left padding of 1cm.




Setting the Right Padding of a Paragraph

The following CSS code example shows how to set the right padding of a paragraph.







This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10. This is a paragraph with a right padding of 10.




Setting the Top Padding of a Paragraph

The following CSS code example shows how to set the top padding of a paragraph.







This is a paragraph with a top padding of 1cm.



This is another paragraph with a top padding of 1cm.




Setting the Bottom Padding of a Paragraph

The following CSS code example shows how to set the bottom padding of a paragraph.







This is a paragraph with a bottom padding of 1cm.



This is another paragraph with a bottom padding of 1cm.



And this is another paragraph with a bottom padding of 1cm.




Setting the Left Padding of a Tablecell

The following CSS code example shows how to set the left padding of a tablecell.











This is a tablecell with a left padding of 5cm.



Setting the Right Padding of a Tablecell

The following CSS code example shows how to set the right padding of a tablecell.











This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm. This is a tablecell with a right padding of 5cm.



Setting the Top Padding of a Tablecell

The following CSS code example shows how to set the top padding of a tablecell.











This is a tablecell with a top padding of 5cm. This is a tablecell with a top padding of 5cm.



Setting the Bottom Padding of a Tablecell

The following CSS code example shows how to set the bottom padding of a tablecell.











This is a tablecell with a bottom padding of 5cm.



Setting all of the Table Padding Properties in one Declaration

The following CSS code example shows how to set all of the table padding properties in one declaration.











This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side. This table has a padding of 4cm on each side.








This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm. This tablecell has a top and bottom padding of 1cm and a left and right padding of 5cm.


CSS List Tutorial

CSS allows you to customize the lists that can be made with HTML using one of the following properties: list-style-image, list-style-position and list-style-type.

list-style-type defines the look of the bullets used in the list.

list-style-image allows you to use custom images in place of the bullets.

list-style-position allows you to specify whether the list item marker should be placed on the inside or outside of the list.

Setting different list-item markers in unordered lists

The following CSS code example shows the different list-item markers in CSS.







  • CSS

  • Tutorial




  • CSS

  • Tutorial




  • CSS

  • Tutorial




  • CSS

  • Tutorial



Click on CSS List Example to view the web page the above code produces.

Setting different list-item markers in ordered lists

The following CSS code example shows the different list-item markers in CSS.







  1. CSS

  2. Tutorial




  1. CSS

  2. Tutorial




  1. CSS

  2. Tutorial




  • CSS

  • Tutorial




    1. CSS

    2. Tutorial



    Click on CSS List Example to view the web page the above code produces.

    Setting an image as the list-item marker

    The following CSS code example shows how to set an image as the list-item marker.







    • CSS

    • Tutorial




    Placing the list-item marker

    The following CSS code example shows where to place the list-item marker.







    The following list has a list-style-position with a value of "inside"



    • CSS

    • Tutorial




    The following list has a list-style-position with a value of "outside"



    • CSS

    • Tutorial



    CSS Layers Tutorial

    CSS allows you to position HTML elements on top of one another, giving control over which item will appear on top.

    CSS Layer Example

    The following CSS code is an example of how position (layer) one item over another. Notice in this example that h1 has a higher value (z-index: 2) than the paragraph (z-index: 1), and therefore has a higher priority, and is positioned on top of the paragraph.







    This header with its blue background is positioned on top of this paragraph.



    You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph.




    CSS Line Spacing Tutorial

    CSS allows you to control the height and width of an element, as well as increase the space between two lines, with the use of dimension properties.

    The following CSS code example shows how to increase the space between lines.








    This paragraph has a line height of 0.5cm. This paragraph has a line height of 0.5cm. This paragraph has a line height of 0.5cm. This paragraph has a line height of 0.5cm. This paragraph has a line height of 0.5cm. This paragraph has a line height of 0.5cm.



    This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm.



    To view what this code looks like, click on CSS Line Spacing Example

    Try it yourself.


    CSS Layouts Tutorial

    CSS positioning properties allow you to position HTML elements exactly where you want them. Before, this needed to be done with the use javascript or HTML image maps. This can now be done entirely with the use of CSS.

    CSS Relative Positioning

    The following CSS code example shows you how to position an element relative to its normal position.







    This heading is in the normal default position.



    This heading is moved 15 pixels to the left of its normal default position.



    This heading is moved 60 pixels to the right of its normal default position.



    Relative positioning moves an element RELATIVE to its original position.



    The style "left:-30px" subtracts 30 pixels from the element's original left position.



    The style "left:30px" adds 30 pixels to the element's original left position.



    Click on CSS Layout Example to view the web page the above code produces.

    CSS Absolute Positioning

    The following CSS code example shows you how to position an element using an absolute value.







    Absolute positioning was used to place this heading 50px from the left of the page and 50px from the top of the page.



    Absolute positioning was used to place this heading 200px from the left of the page and 200px from the top of the page.



    Absolute positioning was used to place both of the headings below.



    Click on CSS Layout Example to view the web page the above code produces.

    Setting the Shape of an Element

    The clip property is used to define a clipping rectangle inside of which the contents of an element are visible. The overflow value decides how the outside of the rectangle's clipping area is treated and can be larger or smaller than the content of the element.

    The following CSS code example shows you how to set the shape of an element with the use of the clip property.







    The clip property is here cutting an image:






    Click on CSS Layout Example to view the web page the above code produces.

    Setting the Overflow Property Values

    The overflow property allows you to determine whether an element should be cut off or not cut off if the specified height and/or width is too large for the specified area.

    The allowed overflow property values are: auto, hidden, visible and scroll.

    The auto value will tell the web browser to automitacally dispaly scrollbars if the the specified height and/or width is too large for the specified area.

    The hidden value will clip the element and hide (not show) any content if it is outside the specified height and/or width is too large for the specified area.

    The visible value will display all content, even if it is outside the specified height and/or width is too large for the specified area.

    The scroll value will place scrollbars withing the specified area.

    The following CSS code example shows how to set and assign the overflow property to scroll.







    The overflow property allows you to determine whether an element should be cut off or not cut off if the specified height and/or width is too large for the specified area.



    The default value for the overflow property is visible. The default value for the overflow property is visible. The default value for the overflow property is visible. The default value for the overflow property is visible. The default value for the overflow property is visible. The default value for the overflow property is visible.


    Click on CSS Overflow Example to view the web page the above code produces.

    Vertical-Align Property

    The vertical-align property allows you to align images or text vertically.







    This image has a vertical-align value of text-top inside the paragraph.



    This image has a vertical-align value of text-bottom inside the paragraph.



    Click on CSS Vertical Align Example to view the web page the above code produces.

    overlapping elements with the z-index property

    The z-index property allows different specified elements to overlap each other. In other words, you decide wich elements overlap one another. This is done by assigning each element a number (z-index). An element with a higher number overlaps an element with a lower number.

    In the following CSS code example, the text is overlapping the image. Notice the "-1" behind the z-index.







    This is a Heading




    The default value of the z-index is 0. A Z-index with a negative number has lower priority than the default z-index of zero.



    NOTE: Firefox 1.5.0 does NOT support the use of the negative z-index.

    Click on CSS Z-Index Example to view the web page the above code produces.

    In the following CSS code example, the image is now overlapping the text. Notice the "1" behind the z-index.







    This is a Heading




    The default value of the z-index is 0. A Z-index with a higher number has higher priority than the default z-index of zero.




Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)