CSS Layer on layer with z-index

CSS operates in three dimensions – height, width and depth. We have seen the first two dimensions in previous lessons. In this lesson, we will learn how to let different elements become layers. In short, this means the order of which the elements overlap one another.

For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number.

Let us say we are playing poker and have a royal flush. Our hand can be presented in a way where each card has got a z-index:

In this case, the numbers follow on another (1-5) but the same result can be obtained by using 5 different numbers. The important thing is the chronological sequence of the numbers (the order).

The code in the card example could look like this:

 
 #ten_of_diamonds {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
 }

 #jack_of_diamonds {
  position: absolute;
  left: 115px;
  top: 115px;
  z-index: 2;
 }

 #queen_of_diamonds {
  position: absolute;
  left: 130px;
  top: 130px;
  z-index: 3;
 }

 #king_of_diamonds {
  position: absolute;
  left: 145px;
  top: 145px;
  z-index: 4;
 }

 #ace_of_diamonds {
  position: absolute;
  left: 160px;
  top: 160px;
  z-index: 5;
 }
 

• Show example

The method is relatively simple but the possibilities are several. You can place images on text or text above text etc.

Summary

Layers can be used in many situations. For example, try to use z-index to create effects in headlines instead of creating these as graphics. For one thing, it is faster to load text and for another, it provides a potentially better ranking in search engines.

Article Source:http://www.techstarcle.com

Read More...

Floating elements (floats) CSS Tutorial

An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box) (see lesson 9 for a description of the Box model). The following figure illustrates the principle:

If we for example would like to have a text wrapping around a picture, the result would be like this:

How is it done?

The HTML code for the example above, look as follows:

 
 <div id="picture">
  <img src="bill.jpg" alt="Bill Gates">
 </div>

 <p>causas naturales et antecedentes, 
 idciro etiam nostrarum voluntatum...</p>
 

To get the picture floating to the left and the text to surround it, you only have to define the width of the box which surrounds the picture and thereafter set the property float to left:

 
 #picture {
  float:left;
  width: 100px;
 }
 

• Show example

Another example: columns

Floats can also be used for columns in a document. To create the columns, you simply have to structure the desired columns in the HTML-code with<div> as follows:

 
 <div id="column1">
  <p>Haec disserens qua de re agatur
  et in quo causa consistat non videt...</p>
 </div>

 <div id="column2">
  <p>causas naturales et antecedentes, 
  idciro etiam nostrarum voluntatum...</p>
 </div>

 <div id="column3">
  <p>nam nihil esset in nostra 
  potestate si res ita se haberet...</p>
 </div>
 

Now the desired width of the columns is set to e.g. 33%, and then you simply float each column to the left by defining the property float:

 
 #column1 {
  float:left;
  width: 33%;
 }

 #column2 {
  float:left;
  width: 33%;
 }

 #column3 {
  float:left;
  width: 33%;
 }
 

• Show example

float can be set as either left, right or none.

The property clear

The clear property is used to control how the subsequent elements of floated elements in a document shall behave.

By default, the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. Look at the example above wherein the text is automatically moved up beside the picture of Bill Gates.

The property clear can assume the values left, right, both or none. The principle is, if clear, for example, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.

 
 <div id="picture">
  <img src="bill.jpg" alt="Bill Gates">
 </div>

 <h1>Bill Gates</h1>

 <p class="floatstop">causas naturales et antecedentes, 
 idciro etiam nostrarum voluntatum...</p>
 

To avoid the text from floating up next to the picture, we can add the following to our CSS:

 
 #picture {
  float:left;
  width: 100px;
 }

 .floatstop {
  clear:both;
 }
 

• Show example

Summary

Floats are useful in many situations and will often be used together with positioning. In the next lesson we will take a closer look at how to position a box, either relative or absolute.

Article Source:http://www.techstarcle.com

Read More...

CSS Height and width

Up until now, we have not cared much about the dimensions of the elements we have worked with. In this lesson, we will take a look at how you easily can define the height and width of an element.

• width
• height

Setting the width [width]

With the width-property, you can define a certain width of an element.

The simple example below provides us with a box wherein text can be typed:

 
 div.box {
  width: 200px;
  border: 1px solid black;
  background: orange;
 }
 

• Show example

Setting the height [height]

In the example above notice how the height of the box is set by the content of the box. You can affect the height of an element with the property height. As an example let us try to make the box in the example 500px high:

Article Source:http://www.techstarcle.com

Read More...

CSS Borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

• border-width
• border-color
• border-style
• border

The width of borders [border-width]

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels. The figure below illustrates the system:

The color of borders [border-color]

The property border-color defines which color the border has. The values are the normal color-values for example “#123456”, “rgb(123,123,123)” or “yellow” .

Types of borders [border-style]

There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 interprets them. All examples are shown with the color “gold” and the thickness “thick” but can naturally be shown in other colors and thicknesses.

The values none or hidden can be used if you do not want any border.

Examples of defining borders

The three properties described above can be put together by each element and thereby produce different borders. To illustrate this, we will take a look at a document where we define different borders for <h1>, <h2>, <ul> and <p>. The result may not be that pretty but it illustrates some of the many possibilities:

 
 h1 {
  border-width: thick;
  border-style: dotted;
  border-color: gold;
 }

 h2 {
  border-width: 20px;
  border-style: outset;
  border-color: red;
 }

 p {
  border-width: 1px;
  border-style: dashed;
  border-color: blue;
 }

 ul {
  border-width: thin;
  border-style: solid;
  border-color: orange;
 }
 

• Show example

It is also possible to state special properties for top-, bottom-, right- or left borders. The following example shows you how:

 
 h1 {
  border-top-width: thick;
  border-top-style: solid;
  border-top-color: red;

  border-bottom-width: thick;
  border-bottom-style: solid;
  border-bottom-color: blue;

  border-right-width: thick;
  border-right-style: solid;
  border-right-color: green;

  border-left-width: thick;
  border-left-style: solid;
  border-left-color: orange;
 }
 

• Show example

Compilation [border]

As it is also the case for many other properties, you can compile many properties into one using border. Let us take a look at an example:

 
 p {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
 }
 

Can be compiled into:

 
 p {
  border: 1px solid blue;
 }
 

Summary

In this lesson you have learned about the endless options CSS gives you when using borders in your pages.In the next lesson, we will look at how you define the dimensions in the box model – height and width.

Article Source:http://www.techstarcle.com

Read More...

CSS Margin and padding

In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the margin and padding properties.

• Set the margin in an element
• Set the padding in an element

Set the margin in an element

An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in lesson 9 for an illustration.

As the first example, we will look at how you define margins for the document itself i.e. for the element<body>. The illustration below shows how we want the margins in our pages to be.

The CSS code for this would look as follow:

 
 body {
  margin-top: 100px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 70px;
 }
 

Or you could choose a more elegant compilation:

 
 body {
  margin: 100px 40px 10px 70px;
 }
 

• Show example

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:

 
 body {
  margin: 100px 40px 10px 70px;
 }

 p {
  margin: 5px 50px 5px 50px;
 }
 

• Show example

Set padding in an element

Padding can also be understood as “filling”. This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:

 
 h1 {
  background: yellow;
 }

 h2 {
  background: orange;
 }
 

• Show example

By defining padding for the headlines, you change how much filling there will be around the text in each headline:

 
 h1 {
  background: yellow;
  padding: 20px 20px 20px 80px;
 }

 h2 {
  background: orange;
  padding-left:120px;
 }
 

• Show example

Summary

You are now on your way to master the box model in CSS. In the next lesson, we will take a closer look at how to set borders in different colors and how to shape your elements.

Article Source:http://www.techstarcle.com

Read More...

CSS Fonts Tutorial

In this lesson you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described:

• font–family
• font–style
• font–variant
• font–weight
• font–size
• font

Font family [font-family]

The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.

There are two types of names used to categorize fonts: family-names and generic families. The two terms are explained below.

Family-name

Examples of a family-name (often known as “font”) can e.g. be “Arial”, “Times New Roman” or “Tahoma”.

Generic family

Generic families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is a collection of fonts without “feet”.

The difference can also be illustrated like this:

When you list fonts for your web site, you naturally start with the most preferred font followed by some alternative fonts. It is recommended to complete the list with a generic font family. That way at least the page will be shown using a font of the same family if none of the specified fonts are available.

An example of a prioritized list of fonts could look like this:

 
 h1 {font-family: arial, verdana, sans-serif;}
 h2 {font-family: "Times New Roman", serif;}
 

• Show example

Headlines marked with <h1> will be displayed using the font “Arial”. If this font is not installed on the user’s computer, “Verdana” will be used instead. If both these fonts are unavailable, a font from thesans-serif family will be used to show the headlines.

Notice how the font name “Times New Roman” contains spaces and therefore is listed using quotation marks.

Font style [font-style]

The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h2> will be shown in italics.

 
 h1 {font-family: arial, verdana, sans-serif;}
 h2 {font-family: "Times New Roman", serif; font-style: italic;}
 

• Show example

Font variant [font-variant]

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. Confused? Take a look at these examples:

If font-variant is set to small-caps and no small-caps font is available the browser will most likely show the text in uppercase instead.

 
 h1 {font-variant: small-caps;}
 h2 {font-variant: normal;}
 

• Show example

Font weight [font-weight]

The property font-weight describes how bold or “heavy” a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font.

 
 p {font-family: arial, verdana, sans-serif;}
 td {font-family: arial, verdana, sans-serif; font-weight: bold;}
 

• Show example

Font size [font-size]

The size of a font is set by the property font-size.

There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. Examples include:

 
 h1 {font-size: 30px;}
 h2 {font-size: 12pt;}
 h3 {font-size: 120%;}
 p {font-size: 1em;}
 

• Show example

There is one key difference between the four units above. The units ‘px‘ and ‘pt‘ make the font size absolute, while ‘%‘ and ‘em‘ allow the user to adjust the font size as he/she see fit. Many users are disabled, elderly or simply suffer from poor vision or a monitor of bad quality. To make your website accessible for everybody, you should use adjustable units such as ‘%‘ or ‘em‘.

Below you can see an illustration of how to adjust the text size in Mozilla Firefox and Internet Explorer. Try it yourself – neat feature, don’t you think?

Compiling [font]

Using the font short hand property it is possible to cover all the different font properties in one single property.

For example, imagine these four lines of code used to describe font-properties for <p>:

 
 p {
  font-style: italic;
  font-weight: bold;
  font-size: 30px;
  font-family: arial, sans-serif;
 }
 

Using the short hand property, the code can be simplified:

 
 p {
  font: italic bold 30px arial, sans-serif;
 }
 

The order of values for font is:

font-style | font-variant | font-weight | font-size | font-family

Summary

You have now learned about some of the possibilities related to fonts. Remember that one of the major advantages of using CSS to specify fonts is that at any given time, you can change font on an entire website in just a few minutes. CSS saves time and makes your life easier. In the next lesson we will look at text.

Article Source:http://www.techstarcle.com

Read More...

Colors and backgrounds(CSS)

In this lesson you will learn how to apply colors and background colors to your websites. We will also look at advanced methods to position and control background images. The following CSS properties will be explained:

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Foreground color: the ‘color’ property

The color property describes the foreground color of an element.

For example, imagine that we want all headlines in a document to be dark red. The headlines are all marked with the HTML element <h1>. The code below sets the color of <h1> elements to red.

 
 h1 {
  color: #ff0000;
 }
 

• Show example

Colors can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colors (“red”) or rgb-values (rgb(255,0,0)).

The ‘background-color’ property

The background-color property describes the background color of elements.

The element <body> contains all the content of an HTML document. Thus, to change the background color of an entire page, the background-color property should be applied to the <body> element.

You can also apply background colors to other elements including headlines and text. In the example below, different background colors are applied to<body> and <h1> elements.

 
 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

• Show example

Notice that we applied two properties to <h1> by dividing them by a semicolon.

Background images [background-image]

The CSS property background-image is used to insert a background image.

As an example of a background image, we use the butterfly below. You can download the image so you can use it on your own computer (right click the image and choose “save image as”), or you can use another image as you see fit.

To insert the image of the butterfly as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

• Show example

NB: Notice how we specified the location of the image as url(“butterfly.gif”). This means that the image is located in the same folder as the style sheet. You can also refer to images in other folders using url(“../images/butterfly.gif”) or even on the Internet indicating the full address of the file:url(“http://www.html.net/butterfly.gif”).

Repeat background image [background-repeat]

In the example above, did you notice that by default the butterfly was repeated both horizontally and vertically to cover the entire screen? The propertybackground-repeat controls this behaviour.

The table below outlines the four different values for background-repeat.

VALUE	DESCRIPTION	EXAMPLE
background-repeat: repeat-x	The image is repeated horizontally	Show example
background-repeat: repeat-y	The image is repeated vertically	Show example
background-repeat: repeat	The image is repeated both horizontally and vertically	Show example
background-repeat: no-repeat	The image is not repeated	Show example

For example, to avoid repetition of a background image the code should look like this:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

• Show example

Lock background image [background-attachment]

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.

The table below outlines the two different values for background-attachment. Click on the examples to see the difference between scroll and fixed.

VALUE	DESCRIPTION	EXAMPLE
Background-attachment: scroll	The image scrolls with the page – unlocked	Show example
Background-attachment: fixed	The image is locked	Show example

For example, the code below will fix the background image.

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

• Show example

Place background image [background-position]

By default, a background image will be positioned in the top left corner of the screen. The propertybackground-position allows you to change this default and position the background image anywhere you like on the screen.

There are numerous ways to set the values of background-position. However, all of them are formatted as a set of coordinates. For example, the value ‘100px 200px’ positions the background image 100px from the left side and 200px from the top of the browser window.

The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right. The model below illustrates the system:

The table below gives some examples.

VALUE	DESCRIPTION	EXAMPLE
background-position: 2cm 2cm	The image is positioned 2 cm from the left and 2 cm down the page	Show example
background-position: 50% 25%	The image is centrally positioned and one fourth down the page	Show example
background-position: top right	The image is positioned in the top-right corner of the page	Show example

The code example below positions the background image in the bottom right corner:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

• Show example

Compiling [background]

The property background is a short hand for all the background properties listed in this lesson.

With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.

For example, look at these five lines:

 
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 

Using background the same result can be achieved in just one line of code:

 
 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
 

The list of order is as follows:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

If a property is left out, it will automatically be set to its default value. For example, if background-attachment and background-position are taken out of the example:

 
 background: #FFCC66 url("butterfly.gif") no-repeat;
 

These two properties that are not specified would merely be set to their default values which as you know are scroll and top left.

Summary

In this lesson, you have already learned new techniques that would not be possible using HTML. The fun continues in the next lesson which examines the broad range of possibilities when using CSS to describe fonts.

Article Source:http://www.techstarcle.com

Read More...