You can apply styles in three ways: inline, internally and externally.
<h4>Example Div with style attribute</h4> <div style='font-size:20px; color:blue;'>Div - CoursesWeb.net</div>
<style> tag.
<style>
selector {
property:value;
property:value;
...
}
another_selector {
property:value;
property:value;
...
}
</style>
- Example:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h4 {
font-size:18px;
text-decoration:underline;
}
#dv1 {
font-size:16px;
color:blue;
}
</style>
</head>
<body>
<h2>Example css properties for H4 and #dv1</h2>
<h4>CSS course</h4>
<div id='dv1'>#dv1 - Free CSS lessons: coursesweb.net</div>
</body>
</html>
<link> element.rel indicates the link with a style sheet- Example:
href attribute contains the address and the name of the external CSS file.
h3 {
font-size:16px;
color:green;
}
.topic {
font-weight:bold;
font-style:italic;
}
The HTML page:
<!DOCTYPE html> <html> <head> <title>External CSS stylesheet</title> <link rel='stylesheet' href='style.css'> </head> <body> <h3>CSS lesson</h3> <p class='topic'>Free CSS course: coursesweb.net</p> </body> </html>- Result:
Free CSS course: coursesweb.net
External and internal stylesheets save time in terms of website maintenance compared to inline styles. Skipping the use of 'style' attribute for every html item needing styling keeps the file slim and trim.
- You can use the same CSS external file for all web site pages.
@import rule.@import rule within a style element or within an external stylesheet, and must precede all other rules in the stylesheet.
<style>
@import url('file_name.css');
/*Here you can add extra css properties
</style>
After the '@import' rule you can define additional selectors and properties.
Link to an external CSS file or import it into a stylesheet has the same effect as the included styles were written directly in that style sheet.
The values for some properties, such as color, font-size, font-family, and others, are inherited by child elements of the element where the property was set. If that property was not explicitly declared for the child element, it will use the inherited value for display.
- For example, if you set the color property to show blue text in a DIV that contains a <p> element as a child, the text in the <p> element is also set in a blue color:
<style>
#dv1 { color: blue; }
</style>
<h4>Example CSS inheritance</h4>
<p>The 'color' property is set to the Div</p>
<div id='dv1'>Tex inside DIV.
<p>This is a 'P' element inside Div.</p>
</div>
Other properties, such as width, height, margin, are not inherited.
If you want different CSS selectors use the same definitions, they can have the same declaration block. Writing the selectors separated by commas.
- Syntax:
selector1, selector2, ... {
property:value;
property:value;
...
}
<style>
#header, p, .topic {
font-size:18px;
color:red;
}
</style>
<h4>Example grouping selectors</h4>
<blockquote>The same block of css properties is applied to the #header, p and .topic selectors.</blockquote>
<div id='header'>Tutorials, Forum, Spirituality</div>
<p>Site: marplo.net</p>
<div class='topic'>Web design tutorial.</div>
When a HTML tag is inside another HTML element, this element is called parent and the tag inside it is called child.
You can write CSS rules for the child tag without to affect the parent element, or other similar tags outside that parent.
parent child {
property:value;
property:value;
...
}
<style>
#header p {
font-weight:bold;
color:blue;
}
</style>
<h4>Example CSS rules to child selector</h4>
<p>The css styles: bold and color are applied to the P tag in Div.</p>
<div id='header'>Div element
<p>Paragraph inside Div.</p>
</div>
<p>Another paragraph, outside Div.</p>
If you want to make certain CSS rules more important than others, use the !important declaration to override another CSS rule.
<style>
p { color:blue !important; }
</style>
<h4>Example CSS !import</h4>
<p style='color:red;'>This P tag has 'color:red' in 'style' attribute, but 'color:blue !import;' in <style> tag.</p>
Because there are several ways to apply styles, there may be situations in which to a HTML element are applied more styles. There are some rules that determine the order of execution (called Cascading):
There is only one way to write a comment in CSS, beginning with the two characters /* and ending with the same two characters reversed, */.
Any text, code, or whitespace between those two is ignored.
The comments help you organize and keep track of the CSS rules
/* this is a comment */
#id_elm {
font-weight:bold;
color:blue;
}
/* other comments */
<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