Css Course

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.
- Example, Div with bold blue text, size 20px.
<div style='color:blue; font-weight:700; font-size:20px'>Peace is good, love it.</div>

CSS added in the <style> tag, in <head>

selector {
- Example, all the H4 elements in page have text-decoration:underline; and margin-left:10%;.
<!DOCTYPE html>
<title>Page Title</title>
h4 {
<h4>Example css in style tag</h4>
<h4>Other H4 element</h4>

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; }

<h4>This is a text in H4</h4>
<p>This is a paragraph.</p>

Type selectors

The type selector selects an element by its type (tag name), it represents the HTML tag to style.
The following rules apply a font size to all 'H3' tags and a color style to all '<p>' elements within a web page.

h3 {
 font-size: 18px;
p {
 color: blue;

<h3>H3 with font-size: 18px</h3>
<p>A simple paragraph.</p>

class selectors

The class selector matches elements with the specified class attribute.
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.

<div class='cls_val'> Content </div>

In CSS, the class selector is preceded by a (.) character.

- Example, the next CSS code applies a color style to all HTML elements with class='clas1':
.clas1 {
 color: #00d000;

<h3 class='clas1'>H3 with class='clas1'</h3>
<p>HTML paragraph without class.</p>
<p class='clas1'>Another paragraph with class 'clas1'.</p>

ID selectors

The ID selectors refers to a single HTML element that has the specified 'id' attribute.
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.

<div id='id_val'> Content </div>

In CSS, the ID selector is preceded by a hash symbol (#).

Example, applies a font-size style to the HTML element with id='id1':
#id1 {
 font-size: 20px;

<p id='id1'>This HTML element has id='id1'.</p>
<p id='id2'>This paragraph has another ID.</p>

Attribute Selectors

In addition to 'id' and 'class' attributes, any attribute can be used for selection with the 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;
    <p title='Some title'>All HTML elements with 'title' attribute have color blue.</p>
    <blockquote title='Other title'>This is a blockquote tag..</blockquote>
  2. [attr=val] - Selects elements with the attribute attr with the value equal to val.
    The example below styles all elements with data-exp='games':
    [data-exp=games] {
     background: #fefe90;
    <p>HTML elements with data-exp='games' attribute have a background color.</p>
    <a href='//gamv.eu/' data-exp='games' title='Flash Games'>GamV.eu</a>
  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 develop appears in the 'title' attribute of an anchor (<a>) element, the link won’t have an underline.
    a[title~=develop] {
     text-decoration: none;
    <p>Links with the word <b>develop</b> in the 'title' attribute have no underline.</p>
    <a href='//gamv.eu/' title='Courses Web develop'>CoursesWeb.net</a><br>
    <a href='//gamv.eu/' title='Flash Games'>GamV.eu</a>
  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; }
    <p>Elements with a <b>lang</b> attribute that contains a lang value (en) have color blue.</p>
    <blockquote lang='En-Us'>This blockquote has lang='En-Us'.</blockquote>
    <blockquote lang='Es'>Esto tiene lang='Es'.</blockquote>

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 adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Writing CSS code

Last accessed pages

  1. array_map and array_search in JavaScript (4059)
  2. ActionScript 3 - Change MovieClip Color (8965)
  3. Display data from PHP Array, or MySQL in HTML table (26805)
  4. Validate radio and checkbox buttons (10011)
  5. CSS Trapezoid Shape (11333)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (326)
  2. PHP Unzipper - Extract Zip, Rar Archives (86)
  3. Read Excel file data in PHP - PhpExcelReader (82)
  4. The Mastery of Love (78)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (65)