You can apply styles in three ways: inline, internally and externally.


Inline styles are CSS properties and values added inside each HTML tag, with the style attribute.
- Syntax:
<tag style='property:value; property:value; ...'> Content </tag>

- Example:
<h4>Example Div with style attribute</h4>
<div style='font-size:20px; color:blue;'>Div - CoursesWeb.net</div>
Internal stylesheet are added in the HEAD area of the HTML document, in <style> tag.
- Syntax:
<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>
External stylesheets are stored in a separate file, with the '.css' extension, that contains nothing but CSS styles (without 'style' element). The external CSS file is included the HTML document through the <link> element.
Once you have the external CSS file, add the following line in the HTML document, in the HEAD area, to include the external stylesheet.
<link rel='stylesheet' href='file_name.css'>
rel indicates the link with a style sheet
href attribute contains the address and the name of the external CSS file.
- Example:
CSS code in the 'style.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:

CSS lesson

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.


Another way of using external CSS file into an HTML document is to include the file in the current style sheet with the @import rule.
You need to place the @import rule within a style element or within an external stylesheet, and must precede all other rules in the stylesheet.
    - Syntax:
<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.


Inheritance

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.


Grouping Selectors

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;
 ...
}

- Example:
<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>

Defining CSS rules to child selectors

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.

- Syntax:
parent child {
 property:value;
 property:value;
 ...
}

- Example:
<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>

The !important Declaration

If you want to make certain CSS rules more important than others, use the !important declaration to override another CSS rule.

- Syntax:
selector { property:value !important; }
- Example, a css property with !import defined in <style> tag overrides the css defined directly in style attribute:
<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 &lt;style&gt; tag.</p>

The execution order of the CSS rules

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):

  1. CSS rules written in the <style> element inside the HEAD, have a higher priority than those written in an external file, and the rules written inside tags (with the 'style' attribute) have a higher priority than the stylesheets inside the HEAD area.
  2. The existence of the !important declaration gives top priority to display the definition where it`s used.
  3. The more a rule has several selectors, the more they increase its priority. A selector that states 'any paragraph element' (<p>) is less specific than a selector looking for 'any paragraph that occurs inside of a block quote' (<blockquote><p>).
  4. As a style appears later in the style sheet, its importance is greater. Thus, definitions of child element have higher priority and supersedes all previous styles that conflict.

Adding Comments in Stylesheets

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

- Example:
/* this is a comment */
#id_elm {
 font-weight:bold;
 color:blue;
}

/* other comments */

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Creating style sheets

Last accessed pages

  1. Get and Modify content of an Iframe (16969)
  2. addChild and removeChild (5142)
  3. CSS Course - Free lessons (9095)
  4. Bind Tool and Control Points (3018)
  5. html2canvas - Save page screenshoot on server (1332)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2327)
  2. Contact page - CoursesWeb (2236)
  3. Tabs effect with CSS (2234)
  4. Insert, Select and Update NULL value in MySQL (993)
  5. PHP getElementById and getElementsByTagName (899)