WDI Fundamentals

WDI Fundamentals Unit 3


Styling with Text Treatment

As you learn to style your website, you'll want to get more creative with the types of fonts, as well as font size, style, and more. You'll also want to start aligning the text to suit your needs. Let's explore how to that!

More on CSS Text Treatment

font-family

To adjust the font of your selected text element, use the font-family property. For the value, enter the name of the font to which you’d like to alter your text. To be safe, try putting a comma after your selected font and enter a generic family as a fallback. If the web browser doesn’t support the font you selected, it will choose the fallback. For example:

h1 {
     font-family: Arial, sans-serif;
}

If your selected font is more than one word, capitalize both words and put them in quotation marks:

h1 {
     font-family: "Courier New", monospace;
}

font-size

To increase or decrease the spacial dimensions of your chosen text, use the font-size property. As a beginner, you’ll want to enter pixel values for your font-size values, like so:

h3 {
     font-size: 24px;
}

As you become more advanced, try using percentages or ems instead of pixels. These can be pretty tricky, so you may want to wait until we cover them in Unit 9.

font-weight

To adjust the thickness of your selected text, use the font-weight property.

As a beginner, you can enter values like “normal” to make your text thin and “bold” to make your text thick. As these values are not very specific, different browsers may interpret their display with slightly different outputs.

h1 {
     font-weight: normal;
}

h1 {
     font-weight: bold;
}

Once you get more practice, try using the numbers 100, 200, 300, 400, 500, 600, 700, 800, and 900 as values to gain more granular control. With this system, 400 is roughly equivalent to “normal” and 700 roughly equals “bold.”

h1 {
     font-weight: 400;
}

h1 {
     font-weight: 700;
}

font-style

To make normal text italic, use the property font-style and the value “italic.” To reverse this effect, use the value “normal.”

a {
     font-style: italic;
}

a {
     font-style: normal;
}

text-align

To adjust the positioning of a text element, use the CSS property text-align and one of the following values: left, right, center, or justify.

body {
     text-align: center;
}

text-decoration

To add an underline to normal text, use the CSS property text-decoration and the value “underline.”

h1 {
     text-decoration: underline;
}

To remove underlines, use the value “none.” This declaration is often applied to anchor tags.

a {
     text-decoration: none;
}

Less commonly used values include “overline,” which adds a line above text, and “line-through,” which strikes a line through your text.

text-transform

To adjust capitalization in a selected text element, use the text-transform property. Values for this property include “uppercase” to capitalize every letter, “lowercase” to uncapitalize every letter, and “capitalize” to make the first letter of every word in the selected text uppercase.

h1 {
     text-transform: uppercase;
}

External Fonts

Did you know you can also link to external fonts in your HTML? Let's try it!

There are three parts to loading up a web font with HTML. The href tells the browser where the font is.

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet" type="text/css">

Here we want to open Sans font, in two weights: 400 for body text, and 800 for headings. The rest of this tells the HTML that the link goes to a CSS stylesheet. Follow the link to take a peek!


On to the next lesson.