CSS - Cascading Style Sheets in HTML

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:
PropertyDescriptionValues 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