CSS Learning Tutorial P001

What is CSS?

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and ends with */

CSS Padding

The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

---

Padding – Individual Sides

CSS has properties for specifying the padding for each side of an element:

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

CSS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

---

CSS height and width Values

The height and width properties may have the following values:

• auto – This is default. The browser calculates the height and width
• length – Defines the height/width in px, cm, etc.
• % – Defines the height/width in percent of the containing block
• initial – Sets the height/width to its default value
• inherit – The height/width will be inherited from its parent value

The four links states are:

• a:link – a normal, unvisited link
• a:visited – a link the user has visited
• a:hover – a link when the user mouses over it
• a:active – a link the moment it is clicked

Block-level Elements

A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

• <div>
• <h1> – <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

---

Inline Elements

An inline element DOES NOT start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

• <span>
• <a>
• <img>

The position Property

The position property specifies the type of positioning method used for an element.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

The z-index Property

When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

The float Property

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

• left – The element floats to the left of its container
• right – The element floats to the right of its container
• none – The element does not float (will be displayed just where it occurs in the text). This is default
• inherit – The element inherits the float value of its parent