An introduction to CSS

CSS Tutorial

CSS short for Cascading Style Sheets, with CSS you can save a lot of time by making an external CSS file that applies to all your HTML pages.

How is that? Inside the CSS file you define how each tag should look like where ever it is used. For example I want every time I use <H1> and <H2> the text color should be blue, so I write it like a rule in the CSS file like this

h1, h2

{

color: blue;

}

And now every HTML file that I include this CSS file in it, and I use <H1> or <H2> it will be in blue.

This was just a beginning for you to understand what a CSS is, but there are more details to understand and there more capabilities you can use. We will start with the CSS syntax (rules of writing CSS).

This is how a CSS definition looks like

selector {attribute: value} /this is the general form

The attribute and the value are inside curly braces {} and separated by a colon : .

If the value is more than one word we put them between double quotations " ".

If we want to define more than one attribute we use semicolon to separate them ; .

You can group selectors by separating them with a comma, .

Example:

h1, h2, p { color : red ;

text-align : center }

There are two other types of defining how a tag element would look like, these are called Class selector and ID selector.

What should we do if we want use <H1> red sometimes, and sometimes blue? That's where the Class selector comes for help.

h1.red { color : red }

h1.blue { color : blue }

(You can write anything after the colon, but it is recommended that you use a meaningful name that makes it easy to remember)

And we use them like this

<H1 class = "red"> this would be in red </H1>

<H1 class = "blue"> this would be in blue </H1>

We can also make a general one, which applies to more than one tag. Like this:

.red { color : red } / notice the colon at the begging

And we use it like this

<H1 class = "red"> this would be in red </H1>

<P class = "red"> this would be in red </P>

<Font class = "red"> this would be in red </Font>

The ID selector is used when you need to use a style for more than one attribute.

Here is an ID selector

#center { text-align : center }

And this is how we use it.

<p id="green">this text is centered</p>

<h1 id="green">this text is centered</h1>

And we can also specify the ID selector for a specific tag like this:

h1#h1format {text-align: left;

color: black}

Now remember that these definitions can be put in an external CSS file and the HTML file that wants to use it will link to it using the following statement that goes in the <head> area:

Also you can write CSS definitions in the HTML file in the <head> area, between the <style> </style> tags. And of course the definitions written there will be only used by that HTML files.

There are some priorities that the browser uses to select which style to use, if the first style is missing then it use the other and so on. The priorities are

Inline Style

Internal Style (inside the <head>)

External CSS file

HTML default

Here are some attributes and some of their values.

CSS Text

Color
Text-align (left, right, center, justify)
Text-decoration (underline, overline, line-through, blink, none)
Text-transform (capitalize, uppercase, lowercase, none)
White-space (normal, pre, nowrap)
Word-spacing (normal, {length})

CSS Font

Font ({font-style}, {font-variant}, {font-weight}, {font-size/line-height}, {font-family}, caption, icon, menu, message-box, small-caption, status-bar)
Font-family ({family-name}, {generic-family}
Font-size (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, {length}, {%})
Font-stretch (normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded)
Font-style (normal, italic, oblique)

CSS Border

Border ({border-width},{border-style},{border-color})
Border-style (hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, none)
Border-top ({border-top-width}, {border-style},{border-color})
Border-top-color ({border-color})
Border-top-style ({border-style})
Border-top-width (thin, medium, thick, {length})

There are 3 other sets of attributes; they are left, right and bottom. They are the same as the top, just replace "top" with any direction you want

CSS Margin

Margin ({margin-top}, {margin-right}, {margin-bottom}, {margin-left})
Margin-top (auto, {length}, {%})
Margin-bottom (auto, {length}, {%})
Margin-left (auto, {length}, {%})
Margin-right (auto, {length}, {%})

CSS Padding

Padding ({padding-top}, { padding-right}, { padding-bottom}, { padding-left})
Padding-top (auto, {length}, {%})
Padding-bottom (auto, {length}, {%})
Padding-left (auto, {length}, {%})
Padding-right (auto, {length}, {%})

CSS List

List-style ({list-style-type},{ list-style-position}, {list-style-image })
List-style-image (none, {URL})
List-style-position (inside, outside)
List-style-type (disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, Hebrew, Armenian, Georgian, cjk-deographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none)

CSS Background

Background ({background-color}, {background-image}, {background-repeat}, {background-attachment}, {background-position})