CSS (Cascading Style Sheets) offers more control over layout, positioning and graphic display of the HTML elements in the webpage.
Starting with HTML 4.0, all formatting can be removed from the HTML document, and stored in a style sheet.
Style sheet consists of style rules, items that specify which markup element they affect and how that element should appear or behave.
CSS rules are defined as a property name followed by a colon, then one or more property values, and a semicolon.

property1: value1; property2: value2; ...

You can create inline styles (within the HTML tag), internal style sheet (in the Head section) or external style sheet, that contains CSS instructions.

At the bottom of this page you can find a table with some CSS properties and their values


Inline style

Inline styles are CSS rules placed directly within a HTML tag, in the style attribute.
  - Syntax:
<tag style='property1:value; property2:value; ...'> Content </tag>
An inline style can be used if you want to apply a unique style to one single occurrence of an element.
For example, to set the color and alignment of an <h2> heading:
<h2 style='color:#01d002; text-align:center;'>HTML - CSS Lesson</h2>

Internal Style Sheet

Internal styles are defined in the <head> section of the HTML page, in the <style> ... </style> tag.
This method is useful when you want to use the same styles for several HTML elements in a page, so the CSS rules are written once and not for each item.
CSS rules added in the <style> element consist of a selector followed by its associated style declarations within curly braces, as you can see in the next example.
- In this example, the code in the <style> tag defines all 'h3' elements to be blue and underlined

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h3 {
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h3>H3 element</h3>
 ... Page content ...
<h3>Other H3 tag</h3>
</body>
</html>

External Style Sheet

To use an external style sheet, you create it as a separate file (having the .css extension).
- In the external style sheet, the CSS rules are added the same way as in the internal style sheet, but without the <style> tag.
Then, the page you want to use that style sheet must link to it using the <link> tag inside the <head> section.

<link rel='stylesheet' type='text/css' href='filestyle.css' />

With an external style sheet, you can change the look of an entire Web site by editing a single file.
Another advantage of using an external style sheet is that it will be reduced the code of the HTML document, making it to load faster.

- Example:
To create an external style sheet, open a new file in Notepad (or your HTML editor), and add the CSS definitions for each style you want to define in the style sheet. Then save the file with the .css extension.
For example, a file named style.css, which defines properties for all paragraphes (p) and all links (a):
a {
 font-size: 16px;
 font-family: Helvetica, Sans-Serif;
 font-weight: bold;
}

a:hover {
 color: #b54090;
 text-decoration: none;
 font-weight: normal;
}
 
p {
 background-color: #e7e8fe;
 font-size: 17pt;
 text-indent: 20px;
 font-family: Calibri, Sans-Serif;
} 
- The CSS rules defined for a:hover are applied when the mouse cursor is over a link.

Now, include that external CSS file in your web page, by adding the <link> tag in the Head section as in the next example.
<head>
 <title>Page Title</title>
 <link rel='stylesheet' type='text/css' href='style.css' />
</head>

CSS selectors - id and class

Up to this point, this lesson has used HTML tags as the selectors for style rules. However, in HTML tags you can add the 'id' and 'class' attributes.
The value of these attributes can be used as selectors in CSS.
The difference between id and class attributes is the fact that the same 'class' attribute can be added in multiple HTML tags, while the value of an 'id' must be unique, it is used only for a single HTML element.


The id attribute as a selector

If you want to devine some css properties to a certain HTML element, add the 'id' attribute to that element in the HTML document, and assign it a unique value that starts with a letter.
Once the item is marked with the 'id' attribute, you can specify in the style sheet how to format the item, by adding a hash mark (#) in front of the ID value, and the style properties within braces.

- In this example, the style defined for '#idh' will be applied only to the element which has id='idh'.
<!DOCTYPE html>
<html>
<head>
<title>ID selector</title>
<style>
#idh {
 color: #0111fe;
 text-decoration:underline;
 text-align:center;
}
</style>
</head>
<body>
<h2 id='idh'>H2 with id 'idh'</h2>
HTML content...
<h2>Another H2</h2>
</body>
</html>

The class attribute as a selector

The 'class' attribute can be used to apply the same CSS style to multiple and different types of items.
Add the same 'class' value to the HTML tags you want to format, then in the style sheet add a period in front of the class value, and the style rules for the class.

- In this example, the style defined for 'li' will be applied to all <li> elements, and the properties for '.cls' selector will be applied to all HTML elements with class='cls', the other remain unaffected.
<!DOCTYPE html>
<html>
<head>
<title>CLASS selector</title>
<style>
li {
text-decoration: underline;
}

.cls {
 color: #0102da;
 font-size: 18px;
 font-weight: bold;
}
</style>
</head>
<body>
<h2 class='cls'>H2 with class .cls</h2>
<h2>H2 tag without class</h2>
<ul>
 <li class='cls'>List with class .cls</li>
 <li>List without class</li>
 <li class='cls'>Another List with class</li>
<p class='cls'>Some paragraph with class .cls.</p>
</ul>
</body>
</html>
• You can set properties for multiple selectors in a single statement. To do so, separate each selector from the previous one with a comma and a space.
For example:
h3, #idh { color:blue, font-size:15px; }

For more detailed things about CSS, see the Free CSS course.


In the table bellow are presented some CSS properties and their values:

PropertyDescriptionValues or Examples
background-color The background color to apply blue, green, #e5e8fe
color The font color silver, blue, #11dafe
font-family The name of the font family Arial, 'Times New Roman'
font-size A font size measured in points or another measurement unit (pixels, em, centimeters) 12px, 11pt, 1.5cm
font-style The style: normal, italic, or oblique normal, italic, oblique
font-weight How bold the font is lighter, normal, bold, bolder
line-height Sets the line height 150%, 28px, 1.5em
margin-left sets the left margin of an element 8px, 10%, auto
margin-right Sets the right margin of an element 8px, 10%, auto
margin-top Sets the top margin of an element 5px, 3%, auto
text-align Specifies the horizontal alignment of text left, center, right, justify
text-decoration Whether to apply decoration to the text none, blink, underline, overline, line-through
text-indent Specifies the indentation of the first line in a text-block 20px, 1.8cm, 2%
border-style Sets the style of the four borders none, groove, dotted, dashed, solid, double, ridge, inset, outset
border-width grosimea chenarului thin, medium, thick, 3px
border-color Sets the color of the four borders blue, yellow, #abcdef

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
CSS - Cascading Style Sheets in HTML

Last accessed pages

  1. Website Mini-Traffic and Pages Access data (1598)
  2. Read Excel file data in PHP - PhpExcelReader (61136)
  3. Merge Drawing and Object Drawing (2820)
  4. PHP getElementById and getElementsByTagName (21654)
  5. Node.js Move and Copy file (5496)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (558)
  2. Read Excel file data in PHP - PhpExcelReader (468)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (344)
  4. PHP getElementById and getElementsByTagName (267)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (254)