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>

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

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:

<style>
* { font-family: Calibri, Arial, sans-serif; }
</style>

<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.

<style>
h3 {
 font-size: 18px;
}
p {
 color: blue;
}
</style>

<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':
<style>
.clas1 {
 color: #00d000;
}
</style>

<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':
<style>
#id1 {
 font-size: 20px;
}
</style>

<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:
    <style>
    [title] {
     color: blue;
    }
    </style>
    
    <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':
    <style>
    [data-exp=games] {
     background: #fefe90;
    }
    </style>
    
    <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.
    <style>
    a[title~=develop] {
     text-decoration: none;
    }
    </style>
    
    <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, ...).
    <style>
    [lang|=en] { color:blue; }
    </style>
    
    <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

HTML
CSS
JavaScript
PHP-MySQL
Click on the HTML tag which creates an horizontal line in web page.
<br /> <em> <hr />
Some content ...
<hr />
Content under line ...
Which CSS property defines the text color?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Click on the function which searches if a character, or text exists in a string.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");
Which function splits a string into an array of strings based on a separator?
array_merge() explode() implode()
$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")
Writing CSS code

Last accessed pages

  1. CSS Outline (1950)
  2. Contact page - CoursesWeb (29635)
  3. Tabs effect with CSS (30296)
  4. SHA512 Encrypt hash in JavaScript (14614)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (36992)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1077)
  2. Contact page - CoursesWeb (1049)
  3. Tabs effect with CSS (1045)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (449)
  5. PHP getElementById and getElementsByTagName (331)