Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Introduction To CSS Basics

By: FYICenter.com

Part:   1   2  3  4  5 

A collection of 21 FAQs/tutorials tips on CSS (Cascading Style Sheets) basic. Clear answers are provided with tutorial exercises on CSS syntax basics, contextual, class, and id selectors, CSS cascading order rules, grouping CSS definitions, browswer default CSS definitions Topics included in this collection are:

  1. What Is CSS (Cascading Style Sheets)?
  2. What Is the Basic Unit of CSS?
  3. How Many Ways to Attach CSS to HTML Documents?
  4. How To Include CSS Inside a HTML Tag?
  5. How To Include CSS Inside the HEAD Tag?
  6. How To Store CSS Definitions in External Files?
  7. How Many Ways to Select HTML Tag Instances?
  8. What Is a Class Selector?
  9. What Is a ID Selector?
  10. What Is a Contextual Selector?
  11. What Is a Group Selector?
  12. What Is a Mixed Selector?
  13. What Are the Pseudo Classes on <A> Tags?
  14. How To Group CSS Definitions Together?
  15. What Is Style Property Inheritance?
  16. What Is CSS Cascading?
  17. What Are the CSS Cascading Order Rules?
  18. How To Remove the Top White Space of Your Web Page?
  19. How To Set Different Text Fonts Inside Tables?
  20. How To Use Class Selectors to Differentiate Tag Instances?
  21. How To Use IDs to Override Classes?

What Is CSS (Cascading Style Sheets)?

CSS (Cascading Style Sheets) is a technical specification that allows HTML document authors to attach formatting style sheets to HTML documents. When HTML documents are viewed as Web pages through Web browsers, the attached style sheets will alter the default style sheets embedded in browsers.

One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in CSS specification.

CSS specification is maintained by W3C. You can download a copy of the specification at http://www.w3.org/.

Tutorials below are based Cascading Style Sheets, level 1, which has been widely accepted as the current standard.

What Is the Basic Unit of CSS?

The basic unit of CSS is a definition of a style property for a selected HTML tag written in the following syntax:

html_tag_name {style_property_name: style_property_value}

For example:

/* set background color to black for the <BODY> tag */
BODY {background-color: black}

/* set font size to 16pt for the <H1> tag */
H1 {font-size: 16pt}

/* set left margin to 0.5 inch for the <BLOCKQUOTE> tag */
BLOCKQUOTE {margin-left: 0.5in}

How Many Ways to Attach CSS to HTML Documents?

There are 3 ways to attach CSS to HTML documents:

  • Included in the STYLE attribute of HTML tags.
  • Included in the STYLE tag inside the HEAD tag.
  • Included in an external file and specify it in the LINK tag inside the HEAD tag.

How To Include CSS Inside a HTML Tag?

If you want to include CSS inside a HTML tag, you can use the STYLE attribute as <TAG STYLE="css_definition" ...>. Of course, the CSS definition will only apply to this instance of this tag. The following tutorial exercise shows you how to set background to gray on a <PRE> tag:

<p>Map of commonly used colors:</p>
<pre style="background-color: gray">
  black    #000000
  white    #ffffff
  gray     #7f7f7f
  red      #ff0000
  green    #00ff00
  blue     #0000ff
</pre>

How To Include CSS Inside the HEAD Tag?

If you want to include CSS inside the HEAD tag and apply to the entire HMTL docuemnt, you can use the STYLE tag as <STYLE TYPE="text/css">css_definition</STYLE>. The following tutorial exercise shows you how to set body background to black and paragraph text to yellow:

<html><head>
<title>CSS Included</title>
<style type="text/css">
  BODY {background-color: black}
  P {color: yellow}
</style>
</head><body>
<p>Welcome to FYICenter.com. 
You should see this text in yellow on black background.</p>
</body></html>

(Continued on next part...)

Part:   1   2  3  4  5 


Selected Developer Jobs:

More...