Formatting with CSS

How to use HTML and CSS Formatting Options

There are multiple options to influence the styling of a text in HTML.

One option is to define a style attribute of a tag and define the visual style with it. An example could be the text size or the font.

Another option are tags in html that have a different style. E.g. the "b" tag, "i" or "strong".

 

Important is here that the second option with the tags also defines a semantic difference of the text, compared to the other text.



When using these options you should differ between semantic highlighting (then you should use HTML tags). When you want to highlight a part only visually, you should use CSS for styling.


In this chapter we want to have a look on the possiblities CSS offers you for visual highlighting.

Assign a font to a paragraph

To change the font of a text you can add the style attribute to a tag on the page. For example we can add it to the paragraph tag.

On it's own the p tag has no influnce on the styling of the paragraph. It is just to group the content semantically, to format it visually you can add the "style" attriubute.

In the following example we define, that the text in this paragraph should be rendered with the font "arial":

<p style="font-family:Arial"> Arial Text </p>

For font with a name that has more then two words, the name will be grouped with singled quotes '. The reason for single quotes ist, that the browser otherwise could not differ between the start and the end of the style tag itself.


Our text in "Times New Romand" would look like this:

<p style="font-family:'Times New Roman' "> Times New Roman Text </p>

Because not everybody as every fonts installed on his computer it is possible to define alternatives as fallback, when the preferred font is not available:

 

<p style="font-family:'gibts net', Arial "> Mein Text </p>

Not only the font is important, also the size is important.

Define the font size with CSS

To define the font size in the css style attribute, there is also an option. Multiple options for one element in css get seperated with a semicolon.

A text in arial with and a size of 20 would be defined with the following css style:

 <p style="font-family: Arial; font-size: 20 pt"> Mein Text </p> 

The definition of text size is possible in many different units.

Here are a few examples:

Size in EM:

 <p style="font-family: Arial; font-size: 3em"> Mein Text </p> 

Size in Pixel:

 <p style="font-family: Arial; font-size: 20px;"> Mein Text </p> 

Beside the text size also the color maters. It would be nice to change the colors of text and other elements. As you will see, this is also possible with CSS.

Define the font color with CSS

The font color is also an option of the css style attribute. The name of this option is "color". A red text with the size of 20 will be defined like this:

<p style="font-family: Arial; font-size: 20pt; color: red;"> Mein Text </p> 

As you saw we defined the color with the string "red". But beside red there are so many colors our eyes could see and it is impossible to find a name for all colors and then to remember them.

There is a solution for every Problem! Each color is gettings mixed. As you maybe remember from school, every color can be mixed from the following colors:

  • Red
  • Green
  • Blue

 

To define a concreate color every part (red, yellow, blue) is defined as a 2sign hex value. So every base color is splitted into 256 colors.

00 => 0

FF => 255

Examples:

<p style="font-family:Arial; font-size: 20pt; color: #FFFFFF">white text</p>


A black text would be defined with the hex code #000000:


<p style="font-family:Arial; font-size: 20pt; color: #000000">black Text </p>

Encoding colors with hex values

With this system it is possible to encode 256 * 256 * 256 colors. Which means, we can encode 16777216 colors. Sounds good?


Which color do we get when we use the color code #FFFF00?

Yellow

It is hard to see but the text is yellow. And what would happen, when we change it to #999900?

Still yellow, but a lot darker:

Yellow

Now you know something about styling text and including css. This could only give a short impression on css and we would like to focus back on our main topic, which is HTML.

In the next step you will learn how you can add sorted and unsorted lists to your website.

 

Navigation