CSS Basics

font-weight

The font-weight property is an alternative way of bolding text. In HTML we have two elements that bold text:

1
2
3

<b>This is bold text</b>
<strong>This is strong text</strong>

However, these two elements only bold our text one way and one way only. If we want a variety of bolded text then we would use the font-weight property. Here as possible values of the font-weight property:

1. 100
2. 200
3. 300
4. 400
5. 500
6. 600
7. 700 (bold)
8. 800
9. 900
10. normal
11. bold
12. bolder
13. lighter

Off the bad 600 pops out as being different than the rest. This is because browsers will stretch out it for some reason.. If you want bold then use 700.

font-variant

The font-variant property is somewhat anti-climatic because the only value that is worth knowing is small-caps. Consider the following:

1
2
3

body {font-variant:normal;}
p.fancy {font-variant:small-caps;}

By default all text within the body element will be “normal” unless you tell it otherwise. In p.fancy the text will be in Small Caps. And how fancy those small caps look!

Font, all-inclusive

Like some CSS properties, we also have the ability to declare everything and anything within the general font property. Here’s an example:

1

#font {font:italic 18px bolder Verdana, Geneva, sans-serif;}

So in order of execution, the font will be italicized first, then 18px, then bolded, and then changed to Verdana font! Also, remember what that pound sign is in front of a CSS selector? Of course! It’s the “ID” of an HTML element so…

1

<p id="font">Some italic, Verdana, 18px, bolder text</p>

Extra Goodies

Here are some extra goodies that you don’t commonly see! These properties are seldom used and I don’t believe they are standard yet..

font-size-adjust

To be perfectly honest, the only thing that I know about the so-called font-size-adjust property is that it changed the aspect ration of the font that you want. Usually there is a numeric value such as .5 or 1 instead of “inherit” or “none”. You could, for example, use something like the following:

1

.adjust {font-size-adjust:1;}

And how very exciting that is… This will also have an example in the zip archive. You can read much more about the font-size-adjust property by reading this w3c article.

font-stretch

The font-stretch property is pretty self explanatory actually. Possible values for this property are:

1. ultra-expanded
2. extra-expanded
3. semi-expanded
4. wider
5. normal
6. narrower
7. semi-condensed
8. extra-condensed
9. ultra-condensed

Once again, this example will have to wait for the zip archive… But I’m not even sure it does anything or if any browser supports it.. Check out this w3c article for more information.

Click on the icon to download a review of this entire tutorial and see some examples!

css-basics4.zip
Size: 2.01 KB

In this tutorial we’re going to talk about fonts… Fonts are the most amazing thing ever invented on the face of the Earth! Note: all fonts that are mentioned in this tutorial are acceptable fonts to be used on a web page. Use of arbitrary fonts that some people might not have is not a good thing. That means when the browser renders the site and they don’t have the font, they cannot view it properly or as you intend them to. Please see this Wiki article on the core fonts to use on a web page for more information.

Font Property

I’m sure we have all opened a text editor such as textpad, notepad, or textedit. In fact, we’ve probably all opened something like Microsoft Office or OpenOffice that gives us the ability to choose different fonts, adjust the margins of a page, zoom into a page, change the font size, color, weight, and other variations of that font. In CSS, there is a font property that allows us to specify fonts to be used on a web page. We can do basic formatting of the font itself using this font property.

Differences of Fonts

This CSS font-family property allows us to choose a font family that will be used on our web page. There are two different types of font families in CSS.

1. Generic Families
2. Font Families

A Generic Family is a group of fonts that have the same look. Monospace type font is an example.
A Font Family is a specific group of fonts such as Arial or Times New Roman.

There are three things about fonts we need to be aware of:

1. Serif Fonts
2. Sans-Serif Fonts
3. Monospace Fonts

Serif Fonts have small lines at the end of some characters. Most notably is the character of a lower-case “g” or upper-case “A”. An example of a Serif type font is “Times New Roman”, “Georgia”, and “Trebuchet MS”. Here are font examples:

Sans-Serif literally means “without serif”. So there are no small lines at the end of any characters. An example of a Sans-Serif type font is “Arial”, “Comic Sans MS”, and “Verdana”. Here are font examples:

Monospace means all character have the same width. So a capital “B” and lower-case “p” will have the same width and all spaces between character will be the same. Here are font examples:

font-family

Great! Now that we know the differences between fonts and such we can finally get to some CSS! So this so-called font-family property allows us to call a series of fonts. An example of this would look like the following:

1
2
3
4
5

body {font-family:font-family:Georgia, "Times New Roman",
Times, serif;}
p.fancy {font-family:Tahoma, Geneva, sans-serif;}

Note the use of multiple fonts. This is known as a fallback system for the browser… If someone doesn’t have the font “Georgia” for some wild reason then the browser will change the font to the next which is “Times New Roman”. And let us say that they didn’t have Times New Roman for some crazy reason then the browser would change the font to “Times” and so forth. Start with a font you want and then choose more generic fonts such as plain old “serif”.

font-style

The font-style property can be used in various ways. You can have three possible values.

1. Italic
2. Normal
3. Oblique

Consider the following:

1
2
3
4
5
6
7

p {font-family:"Times New Roman", Georgia, Times, serif;}
p.italic {font-style:italic;}
p.normal {font-style:normal;}
p.oblique {font-style:oblique;}

All text within the p element will be of the font family “Times New Roman” because of the font-family property. From there we have created three separate classes for p elements for the three values we can have for the font-style property. Our result will look like so:

Italic text, Normal text (what a surprise), Oblique text (what’s the difference?).
Using the italic value we get our italic text. Using the normal value we get out normal text — what a surprise there, normal text. Last but not least, using our oblique value we get oblique text.
Wait… What? It looks the same as the italic text?! Believe it or not, oblique text is actually different from italic text. Oblique text is slightly slanted to the right. Unlike italic text, Oblique text does NOT use a different glyph shape for each character. So for “Times New Roman” it will use the “Times New Roman” glyph but only slightly distorted. You can read all about the differences in this Wiki article on Oblique text if it interests you.

font-size

Font size is important on a web page! You wouldn’t want a font where users have to get three inches away from their screen to read some text and you don’t want the text to be in-your-face huge. Depending on the font and the size of the glyph, text on a web page is usually anywhere from 11pm to 14px. Now… without confusing you or myself we’ll examine the possible values of this property.

1. larger
2. smaller
3. xx-large
4. x-large
5. large
6. medium
7. small
8. x-small
9. xx-small
10. percentage denoted by %
11. pixel denoted by px
12. em unites denoted by em

Ok, we’ll take this one step at a time… Consider the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

p.xx-small {font-size:xx-small;}
p.x-small {font-size:x-small;}
p.small{font-size:small;}
p.normal {font-size:medium;}
h3 {font-size:large;}
h2 {font-size:x-large;}
h1 {font-size:xx-large;}
p.custom-font {font-size: 2em;}
p.pixel-font {font-size:18px;}

Ok, now let’s see some examples! xx-small text, x-small text, small text, medium text, large text, x-large text, xx-large text, 2em text, 18px text.

Excellent, now let us decode this all. I’m sure we can all agree on font sizes xx-small — xx-large, just be sure they’re used appropriately… We should really concentrate on the last two. The “em” and “px” units.

The Pixel

If you’ve ever created an html table that had “width=53″ then you have used the unit called the pixel before. What is a pixel? A pixel is the smallest element of information of an image. This holds true for a digital graphic file and the very screen you’re looking at right now. The smallest unit is called a pixel. So let’s try something here… How about text that is 1px text? (1 pixel text is what that says). See how small that is? If you want to learn more about the pixel, check out this Wiki article for more details… a lot more details.

The Em unit

Em units are proportional to the size of the current font. 1 em = the current font size. 2 em would be double the current font size. If we have a font that is originally 10pt then 1 em would equal 10pt font. If we wanted that font to be twice the size we would use 2em which would equal 20pt font and so on.

1 em font
10pt font
2 em font
20pt font

If this em unit interests you please check out this Wiki article to read more about the em unit.

Percent with fonts

Percentages have increasingly become more commonplace over the past few years. Sometimes percentages are used to define widths or heights but they can also be used to define the size of fonts. Here’s an example:

1
2
3

body {font-size:100%;}
p.half {font-size:50%;}

So in the body, the font is 100% of the size and in the class “half” the font is 50% of the size. So we have..
100% size text and 50% size text. Not surprisingly, our 100% size text is well… 100%. Our 50% text, however, is quite small and probably not something we would use very often.

The rest of this tutorial will be published on wednesday! Stay posted!!

This is a continuation of Basics of CSS 2 (obviously) but it’s really just the continuation of common properties and their values that we are able to use! So without further to do…

Text Property

The text property can be easily confused with the font property. Do not get confused! The text property is for the actual characters you see. The text property treats all text as individual characters where as the font property is for font types, font size, font weight, etc.. So let us see these properties already!

Text Color

How do we change text color? In Basics of CSS – Part # 2 there was that fancy area where all the text was a different color (if you didn’t see then click here to see).

It was very simple actually. All that was used was some inline CSS and an HTML elements called span that is, by default, an empty element (it does nothing unless you tell it to in CSS).

1
2
3
4
5

<span style="color:re">red text</span>
<span style="color:#3333F">blue text</span>
<span style="color:rgb(51,255,0">green text</span>

This example would make the text like so: red text, blue text, green text. Cleverly, the colors red, blue, and green were chosen. Like the background property as seen in the Basics of CSS – Part # 2, we have the ability to use color names, hex color codes, and rgb decimal values.

As with all CSS properties, we can narrow where we want the color. Let us say we want one color for all h3 elements and another color for all h2 elements.

1
2
3

h2 {color:blue;}
h3 {color:#470b0b;}

text-align

How do we align text in CSS? We know how you might do it in HTML but you like CSS better and having to add align=”center” is a pain… And what if we wanted the text a different color for each alignment?

The solution is very simple! Let us assume we want a dark green color for all text that is aligned to the right, a dark blue color for all text aligned in the center, and a dark red color for all text aligned to the left. Our CSS will be as such:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.right {
     text-align:right;
     color:#006600;
}

.center {
     text-align:center;
     color:#000066;
}

.left {
     text-align:left;
     color:#660000;
}

These are global classes which means they can apply to any HTML element. Consider the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<h3 class="center">Dark blue Heading that is aligned center!</h3>
<p class="right">Dark green text that is aligned right!</h3>
<div class="left">
   <ul>
      <li>list</li>
      <li>list</li>
   </ul>
</div>

Using those “global” classes in CSS we are able to use them for any HTML element we want. So if you’re intending to use a class for more than one element, this is the approach that is the easiest.

text-decoration

Text decoration isn’t as artsy as it may sound. With the text-decoration property you have the ability to underline, overline, strikethrough, and a weird value called blink. Note: the blink value DOES NOT work in IE, Chrome, or Safari; if you have one of these browsers the blink example will look like regular text and will not blink. Using this property is still in the same fashion as using any other CSS property. Example:

1
2
3

.underline {text-decoration:underline;}
p.strikethrough {text-decoration:line-through;}

How about some ketchup for your fries?

1
2
3

<p class="underline"> Underline text</p>
<h3 class="strikethrough">This is a bad heading</h3>

text-transform

The text transform can save you a lot of headaches if you’re writing a formal document such as a Terms of Use, Terms of Service, Acceptable Use Policy, or Privacy Policy. Or even if you’re simply writing some site rules for your blog or anything else of the like, this property can save you time.

So let us say you’re writing your Terms of Service document for your web hosting company and you decide an entire section should be written in capital letters (Yes, I really used the property here). There are three values we can have for this property.

1
2
3
4
5

.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
h3.capitalize {text-transform:capitalize;}

Let us test these out! Here are some examples: here is some uppercase writing, HERE IS SOME LOWERCASE WRITING, and here is some capitalized writing, how fancy! You might have a hard time believing that what was used is Inline CSS… look in the source code of this article and you’ll see how it was done! Here’s what was done:

1
2
3
4
5
6
7
8
9
10
11

<span style="text-transform:uppercase;">here is some
uppercase writing</span>
<span style="text-transform:lowercase;">HERE IS SOME
LOWERCASE WRITING</span>
<span style="text-transform:capitalize;">here is some
capitalized writing, how fancy!</span>

And there you have it! Some more general CSS properties that we can use! You can download a review or everything that was done in this tutorial I elaborated on justify inside of the html document, so if you’re interested in justify then I recommend you download it.

css_basics3.zip
Size: 1.9 KB

Assuming you already have prior knowledge of CSS and/or your read the First Tutorial, then we will continue learning the basics of CSS!

Common properties

We’ll begin this with a few very common properties that will almost always be used in style sheets!

Background

Background Color

Our first example is of the background-color property. This property will allow us to change the background color to anything we want. We can do this three different ways, see the example below:

1
2
3
4
5

body {background-color: blue;} Sets background to Blue
body {background-color: #0000FF;} HTML Color Codes
body {background-color:rbg(0,0,255);} RGB Values

The code above is setting the background color of the body element to BLUE and we can accomplish this three different ways!

1. Using your regular colors such as Red, Orange, Yellow, Green, Blue, and Purple and many other colors. See this list for all of the 150 colors.
2. Using HTML color codes such as… #45D7DD, #2BD023, and #E43EE2.
3. And the last method is by using RGB Values such as rgb(000,206,209), rgb(255,215,000), and rgb(144,238,144). Click here for HTML Color Codes and RGB Values.

Background Image

Using this property we can insert an image as the background to a web page, create interactive menus, etc.. The background-image property is repeated by default and will cover the entire area unless specified otherwise. Consider the following code:

1

p.yellow-paper {background-image:url("images/notepaper_yellow.jpg");}

We can see that p is a selector but we add a class so if we wanted anything within any p element to have the notepaper_yellow.jpg background we could simply type:

1

<p class="yellow-paper">Some text here on yellow paper</p>

The image “notepaper_yellow.jpg” will be the background for the text we type, in the case CSS.

Background-repeat

The example with the notepaper_yellow.jpg has a problem that might not be so obvious. We didn’t define a height OR width for that image. This can be done two ways:

1. We can make an image that will span the entire width of our site (let say 1000px;) and have it festering on our server OR
2. We can create the image using Photoshop or any other image editing software and simply crop the image to the full height (in our case 18px) and 1 px in width and simply use the repeat-x property!

Each has their pros and cons I suppose; however, usually images are cut down like that in order to save bandwidth and page loading times. It also makes it easier for you to design your web page. For example: notepaper-yellow.jpg. at 1px X 18px is 2.75KB! That’s very insignificant when it comes to designing as web site and it is also something very easy to work with.

1
2
3
4
5
6
7
8
9
10
11

p.yellow-paper {
     background-image: url("images/notepaper-yellow.jpg");
     background-repeat: repeat-x;
     height: 18px; /*defines the height of the image*/
     line-height: 18px; /*defines the height of the "text box"*/
}

Note: Text box is used very loosely and is very vague. Think of the line-height property as an invisible box around each line of text. This property will add/contract space between these invisible boxes.

So the background-repeat property has four possible values:

1
2
3
4
5
6
7

background-repeat: repeat-x; /*repeats along the x-axis*/
background-repeat: no-repeat; /*forces the image to NOT repeat*/
background-repeat: repeat-y; /*repeats along the y-axis*/
background-repeat: repeat; /*repeats along both the x and y axis*/

So let’s apply all of this useful information! Let’s actually make something! I put together a small .zip file of an .html, .css, and two image files that are relevant to this tutorial and the first Basics of CSS Tutorial. The package is 8.37KB (very small) and I recommend you download it and read some of the comments and try to “decode” the HTML and CSS.

css-basics2.zip
Size: 8.37 KB

Background Position

This property is a little more confusing in a way.. You can actually include x% and y% and xposition and yposition if you happen to know exactly where you want your image to reside on a web page. However, the creators of CSS gave us the most common places where an image might be on a web page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

background-position:top left;
background-position:top right;
background-position:top center;
background-position:center left;
background-position:center right;
background-position:center center;
background-position:top;
background-position:bottom;
background-position:center;
background-position:left;
background-position:right;
background-position:bottom left;
background-position:bottom right;
background-position:bottom center;
background-position:x% y%;
background-position:xpos ypos;

As you can see there are a LOT of choices you can choose from. I actually prefer more advances positioning elements that we’ll explore in later CSS tutorials. For now, there are your options.

Background Attachment

This property can be quite irksome in some ways… Here are the possible values

1
2
3

background-attachment:scroll;
background-attachment:fixed;

Now scroll means the image will scroll with the rest of the page, which is default so this property is basically useless unless you want the image to be fixed and have the web page scroll under the image. This is very uncommon and usually it’s pretty annoying unless you have a good reason for an image to remain fixed.

Background All-Inclusive

CSS makes it very easy to include all of our values with ONE property! The lovely background property. Isn’t not a bad thing to write out code like this:

1
2
3
4
5
6
7
8
9
10
11

body {
     background-color:#fff1d8;
     background-image:url("image/gradient.png");
     background-repeat:repeat-x;
     background-position:top center;
}

however… you can accomplish the same thing by doing this:

1

body {background:#fff1d8 url("image/gradient.png") repeat-x top center;}

Pros and Cons of Compact Model

There are, of course, Pros and Cons to each style.

Pros and Cons of Extended Model

So we can see how each has good and bad parts. I believe there is no “proper” to writing your properties. If you’re more comfortable using the extended model then use that! As long as it is easier for you, that’s all that really matters in the long run. Just make sure your CSS is syntactically correct and you organize your CSS for ease of readability.

Ever been creating a web page and you’ve been banging your head against the wall night because you’re trying to find a reasonable way to make all of your CSS nice and organized? You’ve tried inline CSS but that’s too messy and an Internal Style Sheet is too much copying and pasting. Although this exact scene is probably very unlikely, I don’t rule it out!

Ways of inserting CSS into your HTML Document

There are three ways you can link a stylesheet into your HTML web page.

• External Style Sheet
• Internal Style Sheet
• Inline CSS

If someone tells you something, it is usually taken with a grain of salt. Well, if you happen to have over 10 lines of CSS that will apply to multiple web pages then I strongly recommend you putting all of your CSS into an External Style Sheet. It’ll save you from ripping your hair out when you’re trying to fix a problem or change something in your style sheet. It’ll also save you the time from going back to change every single instance of the CSS that you might have plastered over 50 pages of your website.

How do we Link External Style Sheets?

1
2
3
4
5

<head>
<link rel="stylesheet" type="text/css" href="mystylesheet.css" />
</head>

Using this method, you can easily apply one global style sheet to you entire site. This so-called Global Style Sheet would contain all of the classes of ID’s of your web page all in one location that you can amend anytime it is needed.

Your External Style Sheet should be written in a separate document with the file extension ending with .css (mystylesheet.css). It should not contain any HTML or other code other than CSS. Example:

1
2
3
4
5
6
7
8
9
10
11

body {
     margin:auto;
     background-color:orange;
     font:14px "sans serif";
}
p {line-height:1.1em;}

No HTML, no other scripts, just plain old CSS. Note: em is NOT the HTML code for italics, it is a unit of measurement in typography. See this wikipedia article on em if you’re interested.

Internal Style Sheet

You could use an Internal Style Sheet, for instance, if a web page had a unique style separate from the rest of your website.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<head>
<style type="text/css">
#fancy {
     background:transparent url (images/fancy.png) repeat-x top left;
     color:#CCC;
     line-height:1.1em;
     border: thin solid #fff;
}
.fancy {font-weight:bolder;}
</style>
</head>

Inline CSS

To save your sanity, you should only use this method when you absolutely need to. This is usually done for special circumstances when you’re letting someone know something like:

1

<span style="color:red;">Note:</span> Do not click!

That is only changing the color or the “Note:” to red. Then again you can accomplish the same thing by creating a class if you plan on using multiple instances of that red text. Example:

1
2
3

span.red {color:red;} for specific uses
.red {color:red;} for general use

For the HTML

1

<span class="red">Note:<span>

Order of Importance

Believe it or not, there is an order in which Internet Browsers will read Style Sheets from your web page. That order is:

1. Inline CSS (Within HTML doc)
2. Internal Style Sheets (In head tags)
3. External Style Sheets (Linked via link tags in head)
4. Browser Default

So inline CSS will override all parent css, that is all CSS in internal and external style sheets plus the browser default. Internal style sheets will override external and external syle sheets will override the browser default (which is mighty boring!).

Remember that just because something will override something else doesn’t mean we want to use that as our solution! External Style Sheets are still a preferred way of inputting your style sheet!

There you have, three ways to insert CSS into your HTML document (this DOES apply to PHP, ASP, and other Server-Side Programming scripts as well).