CSS: Foundation — Basic Styling

CSS Basic Styling

Learning outcomes:

  • Setting colors using color
  • Setting background colors using background-color
  • Configuring font size using font-size
  • Applying borders using border
  • Setting padding and the padding property

With a thorough understanding of the syntax of CSS, we are now in a really good form to explore some commonly used properties and then apply them to real elements.

In this chapter, we shall explore properties to change the color and background color of elements; add borders; modify the size of text; and control the inner spacing between an element's edges and its text.

Text color

As we saw in the previous chapter, the color property can be used to change the color of text.

We've been so far using the value red, and even yellow, for color but let it be known that color can be set to any color value in CSS.

Some common color values are named. In this respect, we have red, black, white, yellow, purple, orange, green, blue, violet, indigo, pink, gold, and so on and so forth.

We shall explore values of type <color> later on in this course, in the CSS Data Types chapter.

Following is a table illustrating each color name with its respective rendered color (as seen on your device).

Color nameDisplayColor nameDisplay
blackblue
whiteindigo
redviolet
orangepurple
yellowpink
greengold

Even more color names exist apart from these simple ones, however they have a bit more complex naming. Here are a few of them:

Color nameDisplayColor nameDisplay
bluevioletsandybrown
lightsalmonseagreen
yellowgreenwhitesmoke
lightslategraypalevioletred
We'll discover a lot more about colors in the CSS Colors unit.

Let's consider an example.

In the following HTML, we'd like to apply a purple color to the paragraphs and a sea-green color to the heading:

HTML
<h1>A heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Alright. Fairly easy to do this:

CSS
h1 {
   color: seagreen;
}

p {
   color: purple;
}

A heading

This is a paragraph

This is another paragraph

Perfect!

Background color

Besides color, another commonly used property in CSS that operates around color values is background-color.

As the name suggests, it's used to configure the background color of given elements.

Since it also requires color values, just like the property color, background-color can accept the named color values shown above as well.

Let's consider the same example as above, this time with a different style sheet:

CSS
h1 {
   background-color: blueviolet;
   color: white;
}

p {
   background-color: seagreen;
   color: yellow
}

A heading

This is a paragraph

This is another paragraph

To both the types of elements, we've applied different background and text colors.

Creativity is at work here! Play around with these colors in your CSS code.

There is a lot more to backgrounds in CSS than just color, as we shall learn in CSS Backgrounds unit.

Font size

To make the text in a given set of elements smaller or larger, we use the font-size property.

To be precise, font-size specifies the height of all the characters in the rendered font. We can either set it to a predefined value, in the form of keywords, or manually choose a size.

The keywords are as follows, in order of increasing font size: xx-small, x-small, small, smaller, medium, large, larger, x-large, and xx-large.

Let's try these out:

HTML
<p style="font-size: xx-small">xx-small font size</p>
<p style="font-size: x-small">x-small font size</p>
<p style="font-size: small">small font size</p>
<p style="font-size: smaller">smaller font size</p>
<p style="font-size: medium">medium font size</p>
<p style="font-size: large">large font size</p>
<p style="font-size: larger">larger font size</p>
<p style="font-size: x-large">x-larger font size</p>
<p style="font-size: xx-large">xx-larger font size</p>

xx-small font size

x-small font size

small font size

smaller font size

medium font size

large font size

larger font size

x-large font size

xx-large font size

As stated earlier, besides these keywords, we can also manually provide a size value to font-size.

But before that, we need a quick primer on length values in CSS, which is something the upcoming chapters will rely on heavily.

Length values in CSS and the px unit

There are numerous properties in CSS that require us to specify length values.

For instance, we have:

  • font-size, where the length value is the height of a font glyph (i.e. character);
  • border-width, where the length value is the thickness of a border;
  • width, where the length value is the width of the underlying element;
  • height, where the length value is the height of the underlying element;

...and so on.

Perhaps, one of the most ubiquitous ways of specifying length in CSS is in units of pixels, denoted as px.

A pixel in CSS is basically 1/32nd the length of an inch.

It's basically a minute dot on the screen.

A length value in px refers to how many of these CSS pixels are consumed by the given length. For example, 10px means 10 CSS pixels; 1000px means 1000 CSS pixels; 0px (or equivalently, 0, without the unit) means no pixels at all.

So coming back to font-size, we can set the font size in units of pixels. The larger the value in px, obviously the larger the font-size.

As a matter of fact, each of the font-size keywords shown above resolve down to px values themselves during the rendering process.

Let's consider some examples.

HTML
<p style="font-size: 10px">10px font size</p>
<p style="font-size: 16px">16px font size (the default)</p>
<p style="font-size: 32px">32px font size</p>
<p style="font-size: 64px">64px font size</p>

10px font size

16px font size (the default)

32px font size

64px font size

Notice the increasing spacing around each element as its font size increases. This is happening because the spacing is configured to be a percentage of the element's font size; likewise as the font size increases, so does the spacing.

In CSS, this spacing around an element is referred as margins. We'll explore margins in detail in CSS Spacing — Margins.

Besides px, there are other units available in CSS as well, such as pc, pt, em, rem, etc, each having its own base size and purpose. We'll explore them later on in this course.

Borders

If we wish to add borders around an element, we ought to use the border property.

border applies one, complete border around an element. It takes 3 parameters to define different aspects of the border: its width, style, and color.

  • The width parameter accepts values of type <length>, for e.g. 1px, 10px.
  • The style parameter specifies the style of border to use. To list a few, we have solid borders (denoted using the keyword solid), dashed borders (dashed), and dotted borders (dotted).
  • The color parameter specifies the color of the border (oh, and there we have another place to put a color value). It can accept any of the color names as we saw above.

Now before we move on any further, it's necessary to explain what are parameters in property values.

What are parameters?

There are many CSS properties whose values are composed of just one thing, such as color: red, font-size: 16px, etc.

In contrast, there are also many properties whose values are composed of multiple things, referred to as parameters.

An instance is border. Its value can be broken down into different parameters, each configuring a particular aspect of the border.

Now since parameters are separate entities in themselves, they must be separated from each other in code. This is done using a space. That simple.

Below is the general form of specifying parameters for a property's value.

property: param1 param2 param3 ...

Coming back to borders, since we now know what parameters are and how to lay them out, we can finally explore the general syntax of border.

It's as follows:

border:width style color;
  • width specifies the width of the border.
  • style specifies its style. Common values are solid, dashed, and dotted.
  • color specifies its color.

Time for a concrete example, or should I say, a handful of examples:

HTML
<p style="border: 1px solid black">1px solid black border</p>
<p style="border: 3px solid yellowgreen">3px solid yellowgreen border</p>
<p style="border: 5px dotted purple">5px dotted purple border</p>
<p style="border: 7px dashed orange">7px dashed orange border</p>

1px solid black border

3px solid yellowgreen border

5px dotted purple border

7px dashed orange border

An important point to note here is that the border property isn't bound to always hold three parameters. We can even provide it two parameters, for e.g. by omitting the border color, which would then default to black. Or we can provide it just one parameter.

A single, special value that can be provided to border is none. This effectively removes any borders from the underlying element.

For example, buttons in HTML, by default, have a border style configured by browsers. Consider the following button:

Notice the dark gray border around the button — this is something applied to all <button> elements by default by browsers.

In order to remove this border, we can leverage the declaration border: none:

CSS
button {
   border: none;
}

There's a lot more to borders in CSS than we have explored thus far. We'll do so in detail in the CSS Strokes — Borders chapter.

Padding

Consider the following paragraph:

HTML
<p style="background-color: lightgray"></p>

This is a paragraph

Yes it has a light gray background but more importantly notice how tightly the text is fit into the element. In other words, there isn't much breathing space inside the paragraph, around the text.

This inner spacing between an element's edges and its text is referred to as its padding.

The padding property is used to set the padding.

As with font-size and the width parameter in border, padding accepts length values. For example, padding: 10px means to apply an inner spacing as large as 10 CSS pixels around the text.

Let's consider an example to help understand the effect of setting padding.

Here's the same element as above, just this time with a 10px of padding:

HTML
<p style="background-color: lightgray; padding: 10px;"></p>

This is a paragraph

Clearly, as you can see, the paragraph is now much more breathable, thanks to the application of padding: 10px.

Let's dial up the padding:

HTML
<p style="background-color: lightgray; padding: 30px;"></p>

This is a paragraph

Better still!

As you start developing complex website layouts in CSS, you'll notice how common padding is. Literally, you'll be dealing with padding while styling almost every other element.

Spread the word

Think that the content was awesome? Share it with your friends!

Join the community

Can't understand something related to the content? Get help from the community.

Open Discord

 Go to home Explore more courses