Setting Fonts with CSS
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.
Tags: font, font syle
List
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
Media Types
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.
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