Archive for October, 2009

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

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