CSS Basics

Today we’re going to talk about list styles. Lists are a vital commodity to web site creation. Most side-navigation menus and inline menus are actually lists that are simply listing the things we want them to. From there, we can add styles to these lists and manipulate them however we please.

Lists

In HTML there are two types of lists:

• Ordered Lists <ol>
• Unordered Lists <ul>

Ordered Lists are usually marked with numbers or letters whereas Unordered Lists are usually marked with bullets or squares.

List Type

We can change how a list looks by using the list-style-type property. Consider the following code:

ul {list-style-type:circle;}
ol {list-style-type:upper-roman;}

The CSS code above will make all ul elements have a list style type of a circle and all ol elements have a list style type of upper roman numerals. The output will look like the following:

• Item 1
• Item 2

1. Item 1
2. Item 2

Properties

We can have a few properties for list types and those properties operate the same way the background properties

We can also narrow down the list-style and list-style-type properties for each list element.

Unordered Lists

For unordered lists we can use the following values:

• circle
• disc
• square
• none

Technically we can use any of the values listed in the table above, however, the purpose of the unordered list would cease to exist.

Ordered Lists

We can have many options for the ordered list. Out of the 23 values we posted for list-style-type, only three were solely for unordered lists. We can use the following values:

Using images with lists

Using images can spice up just a standard web page by a lot. It is very easy to create your own bullet, circle, square, or a small arrow pointing toward the item you are showing in the list. We can use the all-inclusive,

list-style:url ("image/bullet.png");
/*OR*/
list-style-image:url ("image/bullet.png");

This will replace the default bullet in the unordered list with an image of our choice.

To see these properties in action feel free to download lists.zip(9.75KB)

Today we’re going to continue our journey into the Box Model. If you aren’t familiar with this box model, you should read about it!

Padding

Padding — defines the space between the element border and element content and will be the same color as the background color of the element.
If we recall that in the box model we have margins > borders > padding > content so Padding is tertiary. Let’s assume you have an HTML paragraph element:

<!--No Padding-->
<p style="background-color:#fff;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
<!--With padding-->
<p style="background-color:#fff; padding:10px;">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.</p>

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

So what is different from the first line and the second line? The first line is without padding so the white background only fills to the end of the text instead the width of the box. The second line, however, spreads across the entire width of the box and it is a padding of 10px on all sides.

Padding works in very similar ways as the margin property except the margins are always invisible and the padding is based on the background of the element you are adding padding to.

Properties

Like margins, there are five possible properties we can use. They are the following:

1. padding-bottom
2. padding-left
3. padding-top
4. padding-right
5. padding

The first four properties define individual sides for padding. For example, if you wanted to adjust the bottom and right padding for a certain element you could use the following:

p.element {
     padding-bottom:3px;
     padding-top:7px;
}

This will change the bottom bottom padding of the element by 3px and the top padding of the element by 7px. Example:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Remember that padding is basically an extension of the background of an element and you also need to take into account any other elements (whether above, below, left or right) that might get in the way of this padding. In theory, you could make an entire HTML and CSS website using only margins, borders, padding, and content.

Values

1. em, px, pt – numeric values e.g. 1em, 15px, 2pt
2. percent % – percent of the containing element e.g. 10% of 500px is 50px.

span.padding {
     padding-top:2em;
     padding-bottom:10px;
     padding-right:16%;
}

All of the above are valid ways to define padding of our span element and class of padding.

Padding – All Inclusive

The all inclusive padding property works the same exact way as the all inclusive margin property. This singular padding property will define padding how ever we need it to using one property instead of writing out each side.

padding:15px 30px 45px 60px;

• top padding – 15px
• right padding – 30px
• bottom padding – 45px
• left padding – 60px

This example has four values for the padding property. The values start with padding-top and then go clockwise to padding-left. So if you think of clock and a new day, which always starts at 12 or the top of the clock, and then rotate clockwise the next 90° angle is at the right, then the 180° is at the bottom, and then the 270° is at the left. So it’s like looking at the clock at every 90° angle you get top, right, bottom, left.

padding:15px 30px 45px;

• top padding is 15px
• right and left padding is 30px
• bottom padding is 45px

This might come as a surprise to us because you would think they would group the Top and [bottom and left] segments separately, however; we can see in this example that the padding-top is 15px and the padding-bottom is 45px. The left and right padding is grouped together because they just belong together. If someone asks, “when I say a word you think of something that is opposite to that” and they ask, “up” you’ll probably say “down” off the bat.

padding:15px 30px;

• top and bottom padding 15px
• right and left padding 30px

This might be more evident since there are only two values here. Naturally, we’d think Top and [right and left] so the top and bottom padding will have a value of 15px whereas the right and left padding will have a value of 30px.

padding:15px;

• top, right, bottom, and left padding is 15px

One single value for the padding property will set all padding to that value, in our case 15px.

Today we’re going to continue our adventure about the box model. We covered the box model and the margin property but we still need to cover padding and border properties!

If we recall that margin > border > padding > content… Margins are always invisible, Borders can be any color we’d like them to be, and padding will be the same color as the background-color of the element.

Border Property

The border property defines the border around an element. Using this border property we can have a border around anything we’d like. We can have the following properties:

1. border-top
• border-top-color
• border-top-style
• border-top-width
2. border-right
• border-right-color
• border-right-style
• border-right-width
3. border-bottom
• border-bottom-color
• border-bottom-style
• border-bottom-width
4. border-left
• border-left-color
• border-left-style
• border-left-width
5. border – all-inclusive

Consider the following code:

p.top-border {
     border-top-color:#ff9300;
     border-top-style:solid;
     border-top-width:1px;
}

So this would only apply to p elements with the class attribute of “top-border”, we know that much! This particular element would have a top border of #ff9300 (Atomicpages orange!), a border-style of solid (there are no breaks or spaces), and a border width of 1px since we want it to be thin.

This is how it would look like if we tried this. The more we type the longer the border becomes. It almost appears as if the text above is really being underlined but this is the border-top property.

For every border property there exists a short-hand way of adding styles to our borders. We can very well type border-top-width, border-top-style, border-top-color every instance we want to use this. We know exactly what the border is doing without having to guess or anything. This can take time, however. We can shorten the example above by doing the following:

p.border-ex {border-top:width style color;} /*Syntax*/
p.top-border {border-top:1px solid #ff9300;}

This is far more efficient and a much faster way of adding border styles to our elements! It is more confusing and might take some time to get used to. If you’re comfortable using the long-hand method then stick to what you’re comfortable with. If you prefer short-hand methods then use those, bear in mind that the short-hand method does exist and it readily available.

border-width

The first value/property we should define in our border should be the width of our border. There are built in values that we can use or we can define our own. Here are the values we can have:

1. thin — approx. 1px
2. medium — default value
3. thick
4. px, em, pt, etc

This is a thin border, This is a medium border, This is a thick border,

This is a border with 15px as the value..

Why we would want a border with 15px is beyond me, but for the sake of this example it is fine.

border-style

There are a lot of styles for borders, here are the styles you can have:

That is a lot of styles indeed! We won’t go over every single style in this tutorial. I will, however, add a downloadable that contains all of these styles! Note: the 3D style borders, it depends all on the color you pick. Some colors will look nice and some color will not look nice at all!

border-color

The border color property works the same as the background-color property. You can choose any color you would like your border to be. You may use built in colors (e.g. reg, green, blue), HTML Color Codes, or RGB Values to use your colors.

border-color:red; /*Color value*/
border-color:#ff9300; /*Hex Value*/
border-color:rgb(51, 255, 0); /*Decimal Value*/

All-Inclusive

The all-inclusive border property works the same as most other all-inclusive properties. It saves time but makes the code a little more confusing. The syntax you should use is like the following:

border:width style color;
border:1px solid #ff9300;

If you want to see all of the examples and additional explanations download border.zip (3.24KB) for that additional info!

Today we’re going to talk about the margin property in CSS! You should familiarize yourself with the box model if you aren’t already.

Margin Property

As we see in the box model, the margins are always transparent and always surround the padding which surrounds the border which surrounds the content — margin > border > padding > content.

Properties

There are five possible properties you can use with margin:

1. margin-left
2. margin-right
3. margin-top
4. margin-bottom
5. margin

The first four options allow you to have different values for any side with the code being clear as day. Consider the following:

p.indent {
color:#ff9300;
border:1px solid #fff;
margin-left:25px;
margin-top:10px;
margin-bottom:30px;
margin-right:15px;
}

We have a class called “indent” which is turning the text the color #ff9300 (AtomicPages Orange), this element will also have a border that is 1px in width, solid, and pure white in color. This will also have a left margin of 25px, a top margin of 10px, a bottom margin of 30px, and a right margin of 15px. That means the p element will be confided to those specifications. These values can be virtually anything you would like them to be.

Values

As with most if not all CSS properties. The margin property can contain multiple values.

1. auto — the browser determines the margin. Different browsers means different results!
2. em, px, pt
3. %

In the above code example we used pixels as the unit. You can use em, px, pt, or any other unit you really want to use. The most common units are px and em.

Margin — All Inclusive

Using the single margin property will allow you to define all values of a margin that you want instead of typing out margin-top, margin-left, etc. This all inclusive property is pretty nifty if you’re working and you’re on a roll and whatnot. It can contain one to four values.

margin:15px 30px 45px 60px;

• top margin – 15px
• right margin – 30px
• bottom margin – 45px
• left margin – 60px

This example has four values for the margin property. The values start with margin-top and then go clockwise to margin-left. So if you think of clock and a new day, which always starts at 12 or the top of the clock, and then rotate clockwise the next 90° angle is at the right, then the 180° is at the bottom, and then the 270° is at the left. So it’s like looking at the clock at every 90° angle you get top, right, bottom, left.

margin:15px 30px 45px;

• top margin 15px
• right and left margin 30px
• bottom margin 45px

This might come as a surprise to us because you would think they would group the Top and [bottom and left] segments separately, however; we can see in this example that the margin-top is 15px and the margin-bottom is 45px. The left and right margins are grouped together because they just belong together. If someone asks, “when I say a word you think of something that is opposite to that” and they ask, “up” you’ll probably say “down” off the bat.

margin:15px 30px;

• top and bottom margins 15px
• right and left margins 30px

This might be more evident since there are only two values here. Naturally, we’d think Top and [right and left] so the top and bottom margins will have a value of 15px whereas the right and left margins will have a value of 30px.

margin:15px;

• top, right, bottom, and left margins 15px

One single value for the margin property will set all margins to that value, in our case 15px. If you wish to see this property and the values in action download margins.zip (3.11KB).

So the Basics of CSS saga continues! In this basics tutorial, we’re going to talk about the very interesting box model!

The Box Model

All HTML elements can be considered to have an invisible box around them (assuming you have no borders or padding). Consider the following:

<p style="background-color:green; color:#fff;">Some text here</p>
<p style="color:#fff;">Some more text here</p>

Let’s try it! This is some text and this is some more text.

So where’s this box?! Well… This HTML element is actually surrounded by margins, borders, padding, and the actual content. This box model is illustrated by the background we created. We can see the “box” around the content portion of the box.

As we can see by this picture, we have our margins, borders, padding, and content. That is what every HTML element is surrounded by. Most browsers, by default, will automatically keep the margins, borders, and padding of content at zero..

body, html {
     margin:0;
     border:0;
     padding:0;
}

So those three properties are values are essentially understood by some browsers. Now, to clarify for every browser, you should include these first and foremost in your CSS document — before everything else.

What is what?

1. Margins — can be thought as an always invisible area around the border.
2. Border — can be different styles, colors, and thicknesses and it is the area that surrounds the padding.
3. Padding — is the area around the content and it is relative to the background color of the box. So if your box is set to blue then the padding will also be blue.
4. Content — the content is well, content. Text, images, links, lists, all of that good stuff!

Great! Now we know all about this box model but what use is it? Well in order to correctly set the size of an element you actually need to be aware of this box model.

Height and Width

So why is it so crucial to be aware of this box model? Well, when you define the height it width of an element you’re only defining the height and/or width of the content of the box model. So if you decide you want to add margins and some padding to an HTML element you can calculate the real width and real height.
Consider the following:

selector {
     width:500px;
     height:250px;
     padding:20px;
     margin:25px;
     border:5px solid #470b0b;
}

So let’s calculate the real width and real height!

Width

500px (width) + 40px (left and right padding) + 50px (left and right margin) +
10px (left and right borders) = 600px total width

Height

250px (height) + 40px (top and bottom padding) + 50px (top and bottom margin) +
10px (top and bottom border) = 350px total height.

So why does this matter in the end? It’s good to know the exact height and width of an element because if your webpage or a particular area within a webpage is dependent on being a certain height then you’ll want/need to know the exact height of other elements to make sure your web page is exactly how you intend. Sometimes elements can overlap, move in extreme places, and other assorted nasty things when you don’t know this real width and real height.

As covered in the Basics of CS Tutorials, there are two main references ways we can essentially “link” a particular style to an HTML document, and PHP document, ASP, etc… They all operate in the same general fashion.

ID Selector

ID is called the “unique identifier element” and it is used to define a special case for an element. For example:

#selector {property:value;}
#footer-example {
     margin:auto;
     background: url("images/footerbg.gif") repeat-x bottom center;
     height:67px;
}

We are defining a special case for our footer

We can “call” this id by doing something like the following:

<div id="footer">
<p>Copyright © 2009 AomicPages</p>
</div>

Why ID?

The reason why they chose ID is because an ID is unique to one person so two ID selectors CANNOT exist within the same html document. Example:

<div id="header">
<a href="#">Login</a>
</div>
<div id="header"> <!--INCORRECT-->
<ul style="float:left;">
     <li><a href="#">home</a></li>
</ul>
</div>

In the above example, you must choose one or the other to exist within the same document! If you wish to have multiple selectors within a document then you use the class selector. Click here to download a very small (2.98KB) zip archived example that I put together for the ID Selector!

Class Selector

A Class Selector is used when you have many elements that you want to apply styles to! You can technically create a web page with only class or ID selectors (although a combination of both is best).

So let’s say we have a cool looking box that we’re going to use multiple times on our web page. Obviously we don’t want to create a separate ID Selector for every instance that we use this nifty box. ID is the “Unique Identifier” and it can only be used once so…

<div id="nifty-box">
<p>Some text here</p>
</div>
<div id="nifty-box">
<p>Some more text here is not valid</p>
</div>

So two of the same ID Selector within the same page is NOT valid! Our solution is by using the Class Selector!

<div class="nifty-box">
<p>Some text here</p>
</div>
<div class="nifty-box">
<p>Some more text here IS valid!</p>
</div>

That is perfectly fine to do! In fact, this make things significantly easier when creating a web page because you can easily implement styles across your entire web site with just a few keystrokes. Instead a few dozen ID Selectors you can get the job done with one Class Selector! Click here to download a very small (3.29KB) zip archive to see this in action!

I feel like we’ve been neglecting Inline CSS… We’ve talked about classes and id’s and all sorts of good stuff but we’ve left good old Inline CSS out of the equation! So we’re going to talk all about Inline CSS today!

So as we covered in the Basics of CSS there are three different types of CSS that we can use. If you don’t know a whole lot about CSS then you can still read on!

1. External Style Sheets
2. Internal Style Sheets
3. Inline CSS

If we recall, an External Style Sheet is a separate document called something like “mystyle.css” and it is something that we need to link the HTML document to.
An Internal Style Sheet is when CSS is within the head tags of an HTML document and Inline CSS is CSS that is within than HTML element. CSS is inserted into an HTML element via the style attribute. It will look something like the following:

<tag attribute="CSS">content</tag>
<span style="color:#ff0000;">Red text</span>

Inline CSS is a blend of HTML and CSS, which means the rules for both languages applies! We need to write proper (X)HTML and proper CSS. If you are unfamiliar with the syntax rules for either of these then click here for XHTML OR here for CSS.

How exactly can we use Inline CSS?

The answer rests with how many properties you know how to use. You can use advanced positioning methods such as…

Note: if you aren’t familiar with these properties, needn’t worry. These are advanced techniques of positioning and they will be covered in later tutorials. This is purely for an exploratory purpose..

<a href="home.php">
<img src="images/home.png" height="50" width="100" alt="Home Page"
style="position:absolute; top:15px; bottom: 35px;" />
</a>

So we can have insane positioning properties and Inline CSS with a dozen or so properties if we wanted. It all really depends on what you need/want to accomplish. Keep in mind that most of these tasks can be accomplished by using ID or class elements so Inline CSS is usually a last resort. Also, remember that ORDER COUNTS! External Style Sheets < Internal Style Sheets < Inline CSS. So External Style Sheets have the last priority when applying styles. Internal Style Sheets will override External Style Sheets and Inline CSS will override both External and Internal Style Sheets.

One excellent example of using Inline CSS is if you have a blog such as wordpress or blogger! If you’re writing posts then you’re using HTML and CSS whether you are aware of it or not! If you’re using wordpress and you’re using the visual tab for new posts and you just want to change the color of some text then you’re using Inline CSS (check the HTML tab to see)! Let’s say, for instance, you wish to change a certain amount of text to pure white. You could write the following:

<p style="color:white;">White text</p>
<span style="color:#ffffff;">White text</span>

Remember that “P” stands for “Paragraph” and “span” doesn’t do anything unless you set it otherwise… So pure white text would look like this entire sentence!

<span style="color:#ffffff;">This was used to make
pure white text</span>

Inline CSS and Links

What if you want to have a unique link on our page for some reason? Then we could easily use Inline CSS of course! How about this unique link?

Even though that link is extremely overdone, we can see how it differs from the other links on the page. Let’s examine this link we created.

<a href="http://atomicpages.net/blog/2009/10/25/all-about-inline-css/"
target="_blank" style="font-weight:bold; text-decoration:overline;
font-size:16pt; color:blue;">this unique link</a>?

So we have our link and we can see it is linking to a page (this post actually) and it is opening a new window OR tab (depending on your web browser settings) via target=”_blank”. Then we have our Inline CSS that is making the font bold, overline, large, and then finally blue in that order.

So we can see there are multiple ways we can use Inline CSS and use it effectively. Generally, Inline CSS is used for one-time occasions such as that fancy link we created. Perhaps you need that image to be up a pixel higher and you don’t want to impact everything else. Example:

<div id="img">
<img src="images/img.gif" height="16" width="16" alt="Img"
style="position:relative; bottom:1px;" />
</div>

This will move this one particular image up by 1 pixel AFTER applying the id=”img” properties in the External Style Sheet OR Internal Style Sheet (remember order). It would be wise to keep the use of Inline CSS to a minimum and do as much as you can in an External or Internal Style Sheet; however, don’t be afraid to use it if you’re in a situation that calls for it! All about Inline CSS.

font-weight

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

<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:

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:

#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…

<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:

.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 here to download a review of this entire tutorial and see some examples! (2.00 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:

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:

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:

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:

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).

<span style="color:red">red text</span>
<span style="color:#3333FF">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.

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:

.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:

<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:

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

How about some ketchup for your fries?

<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.

.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:

<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 here in a zip file (1.90 KB, very small!). I elaborated on justify inside of the html document, so if you’re interested in justify then I recommend you download it.