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.
At the bottom of this page you can find a table with some CSS properties and their values
style attribute.<h2 style='color:#01d002; text-align:center;'>HTML - CSS Lesson</h2>
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>
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.
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.<head> <title>Page Title</title> <link rel='stylesheet' type='text/css' href='style.css' /> </head>
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.
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.
<!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 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.
<!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>
For more detailed things about CSS, see the Free CSS course.
In the table bellow are presented some CSS properties and their values:
| Property | Description | Values 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 |
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net