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 tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
Writing CSS code

Last accessed pages

  1. Drag Racer V3 (14589)
  2. Naruto Friends Dressup (236)
  3. Naruto Dating Sim (1603)
  4. PHP Switch Case (1825)
  5. Get the Height and Width of web Page and browser Window (1416)

Popular pages this month

  1. Qwop (6862)
  2. Drag Racer V3 (4694)
  3. Bubbles3 (1916)
  4. List with All the Games (1605)
  5. Butterfly Kyodai (1507)