CSS

CSS (Cascading Style Sheets) offers more control over layout, positioning and graphic display of the HTML elements in the webpage.
Starting with HTML 4.0, all formatting can be removed from the HTML document, and stored in a style sheet.
Style sheet consists of style rules, items that specify which markup element they affect and how that element should appear or behave.
CSS rules are defined as a property name followed by a colon, then one or more property values, and a semicolon.

property1: value1;  property2: value2;  ...

- At the bottom of this page you can find a table with some CSS properties and their values.
You can create inline styles (within the HTML tag), internal style sheet (in the Head section) or external style sheet, that contains CSS instructions.

Inline style

Inline styles are CSS rules placed directly within an (X)HTML tag, in the style attribute.
- Syntax:

<tag style="property1:value; property2:value; ..."> Content </tag>

An inline style can be used if you want to apply a unique style to one single occurrence of an element.
For example, to set the color and alignment of an <h2> heading:

<h2 style="color:#02da03; text-align:center;">HTML - CSS Lesson</h2>

Result:

HTML - CSS Lesson

Internal Style Sheet

Internal styles are defined in the <head> section of an HTML page, by using the <style> ... </style> tag.
This method is useful when you want to use the same styles for several HTML elements in the web page, so the CSS rules are written once and not for each item.
CSS rules added in the <style> element consist of a selector followed by its associated style declarations within curly braces, as you can see in the next example.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css"><!--
  h3 {color:blue; text-decoration:underline;}
--></style>
</head>
<body>
  ... Page content ...
</body>
</html>

This code defines all "h3" elements to be blue and underlined.
- The "" is optionally used for browsers that do not recognize <style>, and so will ignore it.

External Style Sheet

To use an external style sheet, you create it as a separate file (having the ".css" extension).
- In the external style sheet, the CSS rules are added the same way as in the internal style sheet, but without the <style> </style> tag.
Then, the page you want to use that style sheet must link to it using the <link> tag.
The <link> tag goes inside the <head> section.

<link rel="stylesheet" type="text/css" href="filestyle.css" />

With an external style sheet, you can change the look of an entire Web site by editing one file.
Another advantage of using an external style sheet is that it will be reduced the code of the HTML document, making it to load faster.

- Example:
To create an external style sheet, open Notepad (or your HTML editor), and in a new document type the definition for each style you want to include in the style sheet. Then save the style sheet with the .css extension.
For example, a file named style.css, which defines properties for all paragraphes (p) and all links (a):

a {
 font-size: 15px;
 font-family: Helvetica, Sans-Serif;
 font-weight: bold;
}

a:hover {
 color: #b54090;
 text-decoration: none;
 font-weight: normal;
}
 
p {
 background-color: #e7e8fe;
 font-size: 14pt;
 text-indent: 20px;
 font-family: Arial, Sans-Serif;
}

- The CSS rules defined for a:hover are applied to a link when the mouse cursor is over it.

After creating the external style sheet you want to use, link your web pages to it, by adding the <link> tag in the Head section as in the next example.

<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Page Title</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Special selectors

Up to this point, this lesson has used HTML tags as the selectors for style rules. However, HTML also enables you to use other items, such as the "id" attribute, and the "class" attribute.
The value of these attributes can be used as selectors in CSS.
The difference between id and class attributes is the fact that the same "class" attribute can be added in multiple HTML tags, while the value of an "id" must be unique, it is used only for a single HTML element.

Use the id attribute as a selector

If you need to pick out a single instance of an element from all the other instances, add the "id" attribute to that element in the HTML document, and assign it a unique value that starts with a letter.
Once the item is marked with the "id" attribute, you can specify in the style sheet how to format the item, by adding a hash mark (#) in front of the ID value, and the style properties within braces.
- Example:

<html>
<head>
<title>ID selector</title>
<style type="text/css"><!--
#idh {
 color: #0111fe;
 dext-decoration:overline;
 text-align:center;
}
--></style>
</head>
<body>
<h2 id="idh">Text in the first h2</h2>
<h2>Other text in the second h2</h2>
</body>
</html>

- In this example, the style defined for "#idh" will be applied only to the "h2" element which has id ="idh".

Use the class attribute as a selector

The "class" attribute can be used to apply the same CSS style to different types of items.
Add the same "class" value to the HTML tags you want to format, then in the style sheet add a period in front of the class value, and the style rules for the class.
- Example:

<html>
<head>
<title>CLASS selector</title>
<style type="text/css"><!--
.cls {
  color: #01da02;
  dext-decoration: underline;
  font-weight: bold;
}
--></style>
</head>
<body>
<h2 class="cls">Text ...</h2>
<h2>H2 tag without class</h2>
<ul>
 <li class="cls">List with class</li>
 <li>List without class</li>
 <li class="cls">Another List with class</li>
</ul>
</body>
</html>

- In the example above, the style defined for ".cls" selector will be applied to all HTML elements with class="cls", the other remain unaffected.

• You can set properties for multiple selectors in a single statement. To do so, separate each selector from the previous one with a comma and a space.
For example:

h3, #idh { color:blue, font-size:15px; }

• For more detailed things about CSS, see the Free CSS course.

In the table bellow are presented some CSS properties and their values:

Property	Description	Values or Examples
background-color	The background color to apply	blue, green, #e5e8fe
color	The font color	silver, blue, #11dafe
font-family	The name of the font family	Arial, "Times New Roman"
font-size	A font size measured in points or another measurement unit (pixels, em, centimeters)	12px, 11pt, 1.5cm
font-style	The style: normal, italic, or oblique	normal, italic, oblique
font-weight	How bold the font is	lighter, normal, bold, bolder
line-height	Sets the line height	150%, 28px, 1.5em
margin-left	sets the left margin of an element	8px, 10%, auto
margin-right	Sets the right margin of an element	8px, 10%, auto
margin-top	Sets the top margin of an element	5px, 3%, auto
text-align	Specifies the horizontal alignment of text	left, center, right, justify
text-decoration	Whether to apply decoration to the text	none, blink, underline, overline, line-through
text-indent	Specifies the indentation of the first line in a text-block	20px, 1.8cm, 2%
border-style	Sets the style of the four borders	none, groove, dotted, dashed, solid, double, ridge, inset, outset
border-width	grosimea chenarului	thin, medium, thick, 3px
border-color	Sets the color of the four borders	blue, yellow, #abcdef

New Form elements and .. <<-- Previous --- Next -->> DIV and SPAN

CSS - Cascading Style Sheets in HTML

HTML

Inline style

HTML - CSS Lesson

Internal Style Sheet

External Style Sheet

Special selectors

Use the id attribute as a selector

Use the class attribute as a selector

Daily Test with Code Example

HTML

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month