CSS codes (Cascading Style Sheets) can be written within the page or in an external file with the "css" extension.
CSS-based style sheets consist of a list of statements, or rule sets. A rule set consists of a selector followed by a declaration block containing style properties and their values.
When the CSS code is written in the HTML document, it can be added in the HEAD section, in a <style> tag or inside the HTML element, with "style" attribute.

  • Style sheets added inside HTML element
<div style="property:value;">Content</div>
- The "style" attribute can contain a semicolon separated list of CSS declarations to that specific element.

  • CSS added in the HTML HEAD section

<style type="text/css">
selector {

... Page cotent ...
- The type attribute defines which language is used in the style sheet. It is required for HTML4 and XHTML, but it is optional in HTML5 (defaulting to "text/css").
Notice the CSS syntax. The property:value pairs are added in a declaration block (starts with the left curly brace and ends with the right curly brace) of a selector. Between "property" and "value" must be a colon character (:) and each pair ends with a semicolon (;)
- When the style sheets are written in an external file, the CSS code is added in the same way, but without the <style> tag.

CSS Selectors

You use selectors to define the elements on a page that you want to apply certain properties to.
There are various types of selectors: universal selector, Type selector, class selector, ID selector and attribute selector.

Universal selector

The universal selector is represented with an asterisk (*) and is applied to all elements.
In the following code, every element containing HTML text would be styled with Calibri or Arial font:
 * { font-family: Calibri, Arial, sans-serif; }

Type selectors

The type selector selects an element by its type, it represents the element or HTML tag to style.
The following rules apply a font style to all "h1" tags and a color style to all "<p>" elements within a web page.
h1 {
 font-size: 18px;
p {
 color: blue;

class selectors

The class selector matches elements with the specified class name.
When you want to apply the same CSS rule on different HTML tags, you can use a class selector.
To create a class within a HTML tag, just add a "class" attribute and its value.
            Example:       <div class="clas1"> Content </div>
- In CSS, the class selector is preceded by a (.) character.
The next CSS code applies a color style to all HTML elements with class="clas1"
.clas1 {
 color: green;

ID selectors

ID selectors resemble class selectors except they appear once in the HTML document.
An ID selector can appear multiple times in a CSS document, but it can appear only once in an HTML document, defining only one HTML tag.
To create an ID within a HTML tag, just add an "id" attribute and its value.
            Example:       <div id="id1"> Content </div>
- In CSS, the ID selector is preceded by a hash symbol (#).
The next CSS code applies a font-size style to the HTML element with id="id1"
#id1 {
 font-size: 15px;

Attribute Selectors

In addition to id and class attributes, any attribute can be used for selection with via attribute selectors.
- In CSS, the attribute selector is added between square brackets [], they have four main options for finding an element:

    1) [attr]
Selects elements with the attribute attr
The example below styles all elements with a title attribute:
[title] {
 color: blue;

    2) [attr=val]
Selects elements with the attribute attr with the value equal to val.
The example below styles all elements with title="coursesweb":
[title=coursesweb] {
 color: green;

    3) [attr~=val]
Selects elements with the attribute attr that contain the space-separated attribute somewhere in the value.
In the fallowing example, whenever the word course appears in the "title" attribute of an anchor (<a>) element, the link won’t have an underline.
a[title~=course] {
 text-decoration: none;

    4) [attr|=val]
Selects elements with the attribute attr whose value equals val or begins with val followed by the separator (-) (val-word).
The example below styles all elements with a lang attribute that contains a lang value (en). This works even if the attribute has hyphen ( - ) separated values (en-us, en-au, ...).
[lang|=en] { color:blue; }

CSS is case insensitive. For example, the color property is equivalent to the COLOR property. By convention, properties and values are typically written using lowercase characters.

Daily Test with Code Example

Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Writing CSS code

Last accessed pages

  1. Register and show online users and visitors (22712)
  2. Form, text, textarea, file objects (521)
  3. Recursive function to create Multi-Level Menu in JavaScript (2754)
  4. Chaining Static and Public Methods in PHP (2011)
  5. JavaScript Course - Free lessons (14815)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (321)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (265)
  3. Register and show online users and visitors (254)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (244)
  5. Insert, Select and Update NULL value in MySQL (157)