CSS Tutorial: the Basics

, , …,
Want to master JavaScript in a month? Commit. Buy Xah JavaScript Tutorial. You also get Xah HTML Tutorial and Xah CSS Tutorial.

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

If you don't know HTML, you need to know that first. See: HTML Tutorial.

Adding CSS to HTML

CSS for Entire Site

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

…
<head>
<link rel="stylesheet" type="text/css" 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 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 type="text/css">
p {color:red}
/* more CSS code here */
</style>
</head>
…

We'll cover the actual CSS syntax later in this page.

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 Syntax

CSS source code looks like this:

p {
    line-height:1.5;
    width:60ex;
    font-family:sans-serif;
}

li {
    margin-top:0.8ex;
    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:.5ex;
}

/* for programing language source code */
span.code {
    font-family:monospace;
    color:#00008d;
}

In the above example, it says that any “p” tag's content (a paragraph) will have a line height that's 125% of default, and has a width of 60 “ex” (“ex” is the height of the letter “x”), and the font used will be sans-serif font such as Arial. 〔☛ Common Web Fonts on Windows & Mac

Similiarly, other tags's appearance are also specified.

In general, CSS code has lines like this:

tag matcher {appearance spec 1; appearance spec 2; …}

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

The tag matcher is technically called Selector.

Basics of Tag Matching Syntax

The tag matcher is often just the tag's name, but it can also be specified for tags that has 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}.

/* basic examples of CSS selector syntax */

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

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

p#xyz {color:red} /* match the 「p」 tag that has 「id="xyz"」. */

div > p {color:red} /* match 「p」 that's immediate 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"」. */

.bold {font-weight:bold}    /* match any tag that has 「class="bold"」. */

a.offsite {font-size:small} /* match any link tag 「a」 that has 「class="offsite"」. */

≈95% of CSS can be mastered in just a day. Complete mastery of CSS will usually take a year or more of experience.

Firefox, Google Chrome, and other browsers have tools that validate CSS. Some are builtin, some are extensions. You can try this one for Firefox: Firefox Web Developer Add-on by Chrispederick. This is a absolutely wonderful tool for any coders of HTML/CSS.

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

blog comments powered by Disqus