Writing CSS code

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.

Next -->> Creating style sheets