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
<html>
<head>
<title>Titlul</title>

<style type="text/css">
selector {
  property:value;
  another_property:value;
}
</style>

</head>
<body>
... Page cotent ...
</body>
</html>
- 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

HTML
CSS
JavaScript
PHP-MySQL
Click on the tag that creates an ordered list
<ul> <tr> <ol>
<ol>
  <li>List-1</li>
  <li>List-2</li>
</ol>
Which selector represents the ID of an element in CSS
.name #name name
#id {
  color: #0110fb;
}
What statement creates an object in JavaScript?
{} [] new Date()
var obj = {"site": "CoursesWeb.net", "pr": 5};
alert(obj.site);
Indicate the instruction used to evaluate if a condiition is True or False
else if() switch()
$var = 8;
if($var == 8) echo $var;
Writing CSS code

Last accessed pages

  1. Register and show online users and visitors (1645)
  2. Add and Remove HTML elements and Content with jQuery (3067)
  3. Brush and Eraser (214)
  4. Ajax Voting Script - Vote Up Down (708)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (4774)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (5385)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (5173)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (4967)
  4. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (4774)
  5. PHP Chat Script (4543)