Web Design

Colors and Font Weights

How to add color and font weight to text in HTML

What is CSS?

CSS stands for Cascading Style Sheets. It allows us to add colors, shapes, and more to our websites. We will be working with colors first.

Colors

Basic colors only work for text. The fastest way to add colors is to create a style attribute inside the text tag. Inside the <p>, add style=”color: red;”.

    <p style=”color: red;”>This is red!</p>

Background Colors

We can also add background colors. We can add them to text, the body, or both.

<body style=”background-color: black;”>
<p style=”color: blue; background-color: red;">This has blue text and a red background!</p>

Colors, colors, and more colors.

There are tons of color options. You can use hex codes, rgb, color names, and more.

<p style="color: cyan;">This is cool blue cyan!</p>
<p style="color: #FFDD00; background-color: rgb(179, 0, 255)">This is text with yellow color and purple background color</p>

Font Weights

Font weights allow you to make text more expressive. A higher font weight makes text seem more 'bolded'. To add font-weights, just add font-weight:. There are many options of font-weight to choose from, depending on the font, which we will go over.

    <p style=”font-weight: 100;" >100 Font Weight</p>
    <p style=”font-weight: 200;" >200 Font Weight</p>
    <p style=”font-weight: 300;" >300 Font Weight</p>
    <p style=”font-weight: 400;" >400 Font Weight</p>
    <p style=”font-weight: 500;" >500 Font Weight</p>
    <p style=”font-weight: 600;" >600 Font Weight</p>
    <p style=”font-weight: 700;" >700 Font Weight</p>
    <p style=”font-weight: 800;" >800 Font Weight</p>
    <p style=”font-weight: 900;" >900 Font Weight</p>
     
    <p style=”font-weight: normal;" >Same as 400</p>
    <p style=”font-weight: bold;">Same as 500</p>
    <p style=”font-weight: bolder;" >Same as 600</p>    

Applying this to more elements

In the next lesson, we will be going further into CSS by using <div> elements.

chevron_up