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 attribute can contain a semicolon separated list of CSS declarations to that specific element.<div style='color:blue; font-weight:700; font-size:20px'>Peace is good, love it.</div>
<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.
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.
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>
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>
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.
<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>
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.
<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>
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.
[attr] - Selects elements with the attribute attr.
<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>
[attr=val] - Selects elements with the attribute attr with the value equal to val.
<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>
[attr~=val] - Selects elements with the attribute attr that contain the space-separated attribute somewhere in the value.
<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>
[attr|=val] - Selects elements with the attribute attr whose value equals val or begins with val followed by the separator (-) (val-word).
<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.
<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