CSS Basics

By Xah Lee. Date: . Last updated: .

Cascading Style Sheet (CSS) is a markup language that allows you to specify appearances of HTML. This page shows you the practical basics.

CSS is used for HTML. If you don't know HTML, see: HTML Tutorial.

Adding CSS to HTML

3 ways to add CSS.

  1. For single HTML element.
  2. For whole HTML page.
  3. For entire website.

CSS for Single HTML Tag

If you want to specify a style only for one particular HTML tag in a HTML file, you can embed a attribute style="…" inside the tag, like this:

<p>… this is <span style="color:red">RED!</span></p>
<p style="color:red">This whole paragraph is RED!</p>

CSS for Single HTML File

If you want to use CSS only for a single file, you can embed it in HTML file's header using the <style> tag, like this:

<head>
<title>My Title</title>
<style>
p {color:red}
</style>
</head>

This will make all “p” (paragraph) elements red.

CSS for Entire Site

To add CSS in your HTML file, do like this:

…
<head>
<link rel="stylesheet" href="mystyle.css" />
<title>My Title</title>
</head>
…

In the above example, whenever the HTML file is loaded, it will load the file mystyle.css. The <link …> line must be inside the “head” tag.

If you use the above for all your files, then you can control your whole site's appearance by modifying the single CSS file.

CSS Syntax

CSS source code looks like this:

p {
    line-height:1.5;
    width:40em;
    font-family:sans-serif;
}

li {
    margin-top:0.5em;
    color:gray;
}

blockquote {
    color:blue;
}

img {
    border:solid thin black;
}

/* basic table style with border */
table.xyz {
    border:1px solid black;
    border-collapse:collapse;
}

table.xyz th, table.xyz td {
    border:1px solid gray;
    padding:0.2em;
}

In the above example, it says that any “p” tag's content (a paragraph) will have a line height that's 1.5 times of default, and has a width of 40 “em” (“em” is the font size), and the font used will be sans-serif font such as Arial. [see Standard Web Fonts]

Similiarly, other tags's appearance are also specified.

In general, CSS code has lines like this:

selector { property_name_1 : value_1; property_name_2 : value_2; property_name_3 : value_3; … }

The selector basically means the tag matching syntax. It is technically called “selector”.

Semicolon is used as separator, and is optional for the last item.

Space or line return has no meaning, unless they are inside a quoted string such as "…".

code {font-family:"DejaVu Sans Mono", monospace;}

Tag Matching Syntax

The tag matcher is often just the tag's name, but it can also be specified for tags that have a particular “class” attribute, or tags with a particular “id” attribute, or tags that are child of another tag, and others. For example, if you have <p class="warning">…</p> for any important paragraph, you can make all such paragraph red by p.warning {color:red}.

/* most common examples of CSS selector syntax */

p {color:red} /* match any 「p」 tag */

p.xyz {color:red} /* match p tags that have 「class="xyz"」 */

.xyz {color:red} /* match any tags that have 「class="xyz"」 */

#xyz {color:red} /* match the tag that has 「id="xyz"」. Note, id must be unique per html page */

div > p {color:red} /* match 「p」 that's direct child of 「div」 */

div p {color:red} /* match 「p」 that's nested in 「div」 however deep */

span.booktitle {color:red}  /* match 「span」 tags that has 「class="booktitle"」 */

CSS is really simple. 90% of CSS can be mastered in just a day. Complete mastery of CSS will usually take a year or more of experience.

For a detailed tutorial on tag matching, see: CSS Tag Matching (Selector) Syntax.

CSS Syntax Validation

You can use a CSS syntax validator to check if your syntax is correct.

For example, https://jigsaw.w3.org/css-validator/

Major web browsers have tools that validate CSS. Some are builtin, some are extensions. Search for “css valitation browser plugin”.

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

CSS Basics

  1. Basics
  2. Tag Matching Tutorial
  3. Selector Syntax
  4. Units

Color

  1. Color Syntax
  2. Color Names
  3. Opacity
  4. Linear Gradient
  5. Radial Gradient

Font

  1. font-family
  2. Standard Web Fonts
  3. font-size
  4. Meaning of Font Size
  5. Font Weight
  6. Chinese Font Names

Box Model

  1. Border
  2. Outline
  3. Margin vs Padding
  4. Box Sizing

Layout

  1. Layout Tutorial
  2. Display Property
  3. Position: static, relative, fixed, absolute
  4. Pure CSS Table
  5. Tabbed Menu
  6. 3 Columns Page Layout
  7. Multi-Column Layout for Text Flow
  8. Fix Element to Window
  9. Centering
  10. Flowing List
  11. z-index
  12. Text Over Image
  13. Text Flow Around Image
  14. OverFlow, Scrollbar

Transform/Animation

  1. 2D Transform
  2. Transition
  3. Animation

Line Wrap, Justification

  1. Line Wrap
  2. Text Alignment, Justification
  3. Match first-letter and first-line
  4. “:before”, “:after”
  5. Text Decoration: Underline, Overline, Line-Through
  6. Letter Spacing, Word Spacing

Box Decoration

  1. Box Shadow
  2. Text Shadow
  3. Round Corners
  4. Background Image
  5. Image Rollover

Misc

  1. Computed Style
  2. Pseudo Class vs Pseudo Element
  3. Media Query
  4. Variable
  5. calc
  6. Reset
  7. user-select
  8. Data URI Scheme
  9. protocol-relative URL
  10. Default Unit
  11. Declaring Character Set in CSS File
  12. Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method
  13. Display Table on Small Screen
  14. Fixed Aspect Ratio
  15. Add Icon to Links
  16. Progress Bar Example

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. CSS
  3. JavaScript
  4. JS Obj Ref
  5. DOM
  6. SVG
  7. Blog