In HTML, if you want to change the font used in an element you would use the font element.  This could make your code very messy if you had the same font that you want to use multiple  times, but not make the font the same on the whole page. Also, if you wanted to make a font bold, italic, or underlined you would need to use the correct element to do so. If needing to make some text that was red, size 12, bold, underlined, and italic the code you use may look something like this in HTML.

This is a test

With CSS, we can do the same thing. In addition to these font options, CSS allows us more  control over the font that is on the site. CSS will also make it easier for us to change the font in the future if we choose to use a different theme for the site we are coding for, and make it easier to read and follow.

p { font: italic bold 12px arial;
 color: red;
 text-decoration: underline;
}

The CSS above will do the same as the HTML code that we looked at. By using the font attribute, we have told CSS to make all paragraph elements use the Arial font, make the text 12 pixels tall, make the font bold, and italic. We use the color attribute to change the color of the text, and the text-decoration to underline the text. Now if we wanted to change the color of the text, or the size we can do it in one place instead of having to manually edit each element.

There are some additional attributes we can set using the font attribute. Above we used the generic font attribute to set a variety of settings. If we did not want to make the array of changes that we did we can use other font attributes, like font-family. Below are the different font attributes, what they do, and what values can be assigned to them.

Font

The font attribute allows you to declare multiple font settings in one attribute. This is a short hand way of setting the values.

Font-Family

The font family sets the type of font that is going to be used. This is similar to the HTML  face attribute for the font element. The font family attribute allows you to set a roup of fonts that the site should use if the user has them installed. You can use any font that you would like, but it is best to use fonts that most people will have, like Arial, Times New Roman, or Courier. You could also use a generic font family, like sans-serif. A generic font will use the default font for that family. Here is an example of the font family attribute.

font-family: courier, arial, sans-serif;

In the example, the browser will try to use the Courier font first if the user has it, if not then it will try to use Arial. If the user does not have any of those fonts, then the browser will use the default font for the sans-serif family of fonts. It is always best to use a generic font at the end of a font family attribute, this allows you a little more control over how the text will look.

Font Size

Font size attribute does as it names suggests. It changes the size of the font. There are some built in sizes that this attribute can use. Those are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• smaller
• larger
• length

Along with these you can also declare what size of font you want to use, such as 12px. This will make the font 12 pixels high. You can use pixels (px), points (pt), percentage of the parent font size (%), and ems (em) as measurements for the size of the font.

Font Size Adjust

This adjusted the font size for an element based on the font’s aspect value. The aspect value is the ratio of the font’s lowercase x size in relationship with the font size. To use this attribute you would just put in the aspect value. Here is an example:

h2 { font-size-adjust: 0.58 }

Font Stretch

The font stretch attribute stretches or condenses the font horizontally only. Below is a list of options that can be used with the attribute.

• wider
• narrower
• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

Font Style

Font style only has three options that can be used with it. These set the style of the font that is being used. The values that can be used are italic, oblique, and normal. Normal  is the default value, and does not make any changes to the text. Italic, will make the font italic, and oblique looks similar to italic.

Font Variant

This attribute only has two values. One value is normal and it is the default value, the other is small-caps. The small-caps value makes all lowercase letters look like their uppercase versions, but the same height as the lowercase letters. Below is an example of how the small-caps value looks.

This is an example of the small-caps value

Font-Weight

The font-weight attribute sets how bold text is on the site. You can use the values bold, bolder, lighter, and normal. You may also use any hundred value between 100 and 900.

List can be very useful to a website. By using some CSS, you can create a nice frequently asked questions page for your site, or even a menu for your site. Let us look at some of the additional controls that CSS gives us with list.

List-Style

List-style is the shorthand way of setting all the attributes for a list.

List-Style-Image

The list-style-image allows you to use your own image as the bullet in a list. To use this attribute you have to define where the image is located at. Below is an example of what the attribute would look like.

list-style-image: url(’list_dot.gif’)

List-Style-Position

This attribute defines where the bullets will be displayed. The best way I can describe how this attribute works is to imagine a line when you create a list. This attribute determines what side of the line the bullets at on. If you set the attribute value to inside, then the bullets are on the right of the line. The only other value that can be set is outside, and this sets the bullets on the left side of the line.

List-Style-Type

List-style-type attribute allows you to change the style of the bullets in your list to some of the additional bullet styles that are “built” into CSS. There are multiple values that you can use. Below is a list of each one.

• None
• 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-Ideographic
• Hiragana
• Katakana
• Hiragana-Iroha
• Katakana-iroha

With CSS, you can also control how your website looks on other media. Most sites only have a style sheet that controls the way the site looks on a monitor, since that is where most of the people who visit the site will see it, but there are other media that you can control also.

Aural

With Aural you can configure your site to work with speech applications. This is for those visitors who may have issues with the visual layout of a site. With the aural style sheet you can control the volume of the speech application, what is actual read on the site, and the speed that the text is read.

Braille

A braille style sheet is used for braille tactile feedback devices.

Embossed

Similar to braille, embossed controls the styles on printers that can print in braille.

Handheld

This is a media type that will become more popular as portable devices start connecting to the world wide web more often. Handheld is designed to control the look of your site on portable, monochrome, and small screen devices. These devices are similar to most smart cell phones.

Print

The print media type will allow you to control how your site looks on paper. Most sites have a print button on them, and then the site will use a different style sheet that will make the site look better on paper.

Projection

If you ever have a site that you would like to use in a presentation, then you would use the projection media type.

Screen

Screen is the most used media type. This is the type that controls how the site looks on a computer screen.

TTY

This media type is used for fixed-pitch character grid devices, like a teletype or terminals. These devices are designed to input or output one character at a time.

TV

The TV media type, is used on larger monitors or televisions.

There are a few different ways to declare what media type to use. You can create different sheets for each media type, then include them in your header like this.

<link rel=”stylesheet” type=”text/css” href=”css/print_style.css”  media=”print” >
<link rel=”stylesheet” type=”text/css” href=”css/screen_style.css” media=”screen” >
<link rel=”stylesheet” type=”text/css” href=”css/handheld_style.css”  media=”handheld” >
<link rel=”stylesheet” type=”text/css” href=”css/print_style.css”  media=”print” >
<link rel=”stylesheet” type=”text/css” href=”css/screen_style.css”  media=”screen” >
<link rel=”stylesheet” type=”text/css” href=”css/handheld_style.css” media=”handheld” >

Also, each media type can be declared inside a single style sheet. When needing to switch to a different media type, just use @media followed by the media type, ie @media print.

The last way to declare a media type is within the style element of the page. This works just like declaring the media type inside the style sheet, just use @media followed by the
media type.

code-sucks.com
 

Centering an entire page’s contents

body {

  text-align: center;

  min-width: 500px;

}

#wrapper {

  text-align: left;

  width: 500px;

  margin-left: auto;

  margin-right: auto;

}

Commented example

body {

  /* MSIE 5 doesn't center based on auto left/right margins,

     but 'text-align:center' does center top-level divs: */

  text-align: center;

  /* Specify a min-width for the body as wide as the 'wrapper'

     element itself. This prevents negative (i.e. inaccessible)

     left-margins in narrow browser windows when using

     Navigator 6+/Mozilla on Win32: */

  min-width: 500px;

}

#wrapper {

  /* Reset alignment to compensate for ‘text-align:center’: */

  text-align: left;

  /* Specify the width of the element. This should be the same

     as ‘body min-width’: */

  width: 500px;

  /* Set left and right margins to auto, thus centering the

     element in the containing (body) tag: */

  margin-left: auto;

  margin-right: auto;

}

See also
http://www.bluerobot.com/web/css/center1.html

For more about the centering block element, check out
http://css-discuss.incutio.com/?page=CenteringBlockElement

It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. The fix is extremely simple. All you have to do is apply a display: inline rule to your floated element. So you simply go from something like this:

#content {
float: left;
width: 500px;
padding: 10px 15px; 
margin-left: 20px;
}

To something like this:

#content {
float: left; 
width: 500px; 
padding: 10px 15px; 
margin-left: 20px; 
display: inline;
}

For more about the double margin bug, check out http://www.cssnewbie.com/double-margin-float-bug

Generic Reset

* {

 padding: 0;

 margin: 0;

 border: 0;

 }

(more…)

• Font types
• Font and element colors
• Padding
• Margins
• Element positioning
• And much more.

The advantage of CSS is that it allows you to set the formatting of your site without affecting the site’s underlying structure. By separating the layout and formatting properties of your website from its underlying logical structure, you can make cosmetic changes to your site without running the risk of altering the integrity of your site’s data by accident.

The inventors listed in this patent claim to have developed a system whereby “text, or other media such as graphics, is poured into the display region,” at which time style sheetsdefined as “a collection of formatting information, such as fonts and tabs”are applied. This patent seems to overlap concepts laid out in the W3C’s specifications for CSS and the Extensible Stylesheet Language (XSL), which have been in development since at least 1994. (more…)

Free CSS Toolbox is a freeware productivity software for web developers who work with CSS code.

Free CSS Toolbox includes a number of tools for fast-tracking and enhancing the development of style sheet code, such as an advanced CSS Formatter and CSS Validator. (more…)