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
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Writing CSS code

Last accessed pages

  1. Get the value of the selected /checked checkboxes in a form (40325)
  2. createElement and insertBefore (5902)
  3. Insert, Select and Update NULL value in MySQL (36876)
  4. Create simple Website with PHP (22297)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (57521)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2413)
  2. Contact page - CoursesWeb (2332)
  3. Tabs effect with CSS (2323)
  4. Insert, Select and Update NULL value in MySQL (1314)
  5. PHP getElementById and getElementsByTagName (903)