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.
<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 name | Display | Color name | Display |
---|---|---|---|
black | blue | ||
white | indigo | ||
red | violet | ||
orange | purple | ||
yellow | pink | ||
green | gold |
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 name | Display | Color name | Display |
---|---|---|---|
blueviolet | sandybrown | ||
lightsalmon | seagreen | ||
yellowgreen | whitesmoke | ||
lightslategray | palevioletred |
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:
<h1>A heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Alright. Fairly easy to do this:
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:
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.
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:
<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
.
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.
font-size
keywords shown above resolve down to px
values themselves during the rendering process.Let's consider some examples.
<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.
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 aresolid
,dashed
, anddotted
.color
specifies its color.
Time for a concrete example, or should I say, a handful of examples:
<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
:
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:
<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:
<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:
<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.