Creating style sheets

You can apply styles in three ways: inline, internally and externally.
• Inline styles are CSS poroperties and values added inside each HTML tag, with the style attribute.

    - Syntax:     - Example: 
<h1 style="font-size:18px; color:blue;">CoursesWeb.net</h1>
    - Result:

CoursesWeb.net


• Internal stylesheet are added within the HEAD area of the HTML document, in a <style> tag.
    - Syntax: The HTML comments (<!--   -->) are placed to prevent the CSS content from showing up in the web page layout or being rendered by the browser in some unwanted fashion.
    - Example: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>CSS stylesheet</title>
 <style type="text/css"><!--
 h2 {
  font-size:16px;
  text-decoration:underline;
 }
 #header {
  font-size:14px;
  color:blue;
 }
 --></style>
</head>
<body>
 <h2>CSS course</h2>
 <div id="header">Free CSS lessons: coursesweb.net</div>
</body>
</html>
    - Result:

CSS course

Free CSS lessons: coursesweb.net

• 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 gets associated with the HTML file through linking.
    - Syntax: Once you have the external CSS file, add the following line in the HTML document, within the HEAD tag, to include the external stylesheet. - rel indicates the link with a style sheet
- type indicates the code used in the 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>External CSS stylesheet</title>
 <link rel="stylesheet" href="style.css" type="text/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 using 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: After the "@import" rule can be defined 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.

1. Inheritance

The values for some properties, such as color, font-size and font-family, 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 an <p> element as a child, the text in the <p> element is also set in a blue color: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>CSS stylesheet</title>
 <style type="text/css"><!--
 #div_id { color: blue; }
 --></style>
</head>
<body>
 <div id="div_id">Tex inside DIV.
  <p>Text added in "P" tag</p>
 </div>
</body>
</html>
    - Result:
Tex inside DIV.

Text added in "P" tag

Other properties, such as width, height and margin, are not inherited.

2. 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:     - Example: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>CSS stylesheet</title>
 <style type="text/css"><!--
 #header, p, .topic {
  font-size:14px;
  color:red;
 }
 --></style>
</head>
<body>
 <div id="header">Tutorials, Anime, Games</div>
 <p>Site: www.marplo.net</p>
 <div class="topic">Web design tutorial.</div>
</body>
</html>
As you can see, there are three different type selectors, but all have set the same CSS properties.
    - Result:
Tutorials, Anime, Games

Site: www.marplo.net

Web design tutorial.

3. 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:     - Example: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>CSS stylesheet</title>
 <style type="text/css"><!--
 #header p {
  font-weight:bold;
  color:blue;
 }
 --></style>
</head>
<body>
 <div id="header">Tutorials, Anime, Games <p>Site: www.marplo.net</p></div>
 <p>Web design tutorial.</p>
</body>
</html>
As you can see, the stylsheet affects only the content of the "P" tag inside the DIV with id="header", not the DIV or other "P" tag.
    - Result:
Tutorials, Anime, Games

Site: www.marplo.net

Web design tutorial.

4. 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:     - Example: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>CSS stylesheet</title>
 <style type="text/css"><!--
 p { color:blue !important; }
 --></style>
</head>
<body>
 <p style="color:green;">Using !important declaration.</p>
</body>
</html>
Even if color:green is set directly in the <p> tag, the CSS rule defined with !important (in the HEAD zone) has higher priority and is not rewritten.
    - Result:

Using !important declaration

5. 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.

6. Adding Comments within 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
    - Syntax:     - Example: 
/* styles for header */
#header {
 font-weight:bold;
 color:blue;
}

/* other comments */
CSS Course : external css, style sheets, stylesheets