With CSS syntax out of the way, we are now in good form to explore some common CSS style properties frequently used in styling web pages and apply them to real elements. This chapter shall give you a better understanding of CSS and introduce you to the potential it holds for designing websites.
Let's begin!
Color the text
As we saw in the previous chapter we can use the property color to color text in HTML. Its value can be any valid CSS colorname (or other notations as we will explore later in the colors chapter) for example white, black, blue, green, yellow, purple and so on.
Following is a table illustrating each colorname with its respective color (as seen on your device).
| Colorname | Display | Colorname | Display |
|---|---|---|---|
black | blue | ||
white | indigo | ||
red | violet | ||
orange | purple | ||
yellow | pink | ||
green | gold |
Even more colornames exist than just these simple instances, however they have a bit complex naming and likewise we won't discuss them in detail here. Few of them are shown below:
| Colorname | Display | Colorname | Display |
|---|---|---|---|
blueviolet | sandybrown | ||
lightsalmon | seagreen | ||
yellowgreen | violet | ||
whitesmoke | darkorange |
Color the background
In addition to color, there is one more color-related property that's quite often used to give colors to the backgrounds of elements. That is background-color.
Since it also requires color values, just like the property color, it can accept the colornames shown above as well. Let's consider an example to get things visualised.
Following we have a paragraph with a span and a b element, both given different background colors.
span {background-color: yellow}
b {background-color: lightsalmon}A paragraph with a span and some bold text.
We can play around with colors even more by mixing up both background-color and color.
p {
background-color: grey;
color: white
}
span {
background-color: gold;
color: black
}A span in a paragraph
Size of the font
Another common use case of CSS is to resize fonts on a web page i.e make them small or large. The property font-size was made for this very purpose.
Acceptable values include x-small, small, medium, large, x-large.
p {font-size: small}
/* following we demonstrate a couple of other values */A small font
A medium font
A large font
An x-large font
In addition to these you can also provide a custom length value to font-size. It's formed using a non-negative number followed by a unit. Pixels is perhaps the easiest and the most common unit denoting lengths in computers, and in CSS is written as px.
Therefore, as an example, we can provide the value 16px to font-size, where 16 is the size of the font and px is the units of pixels.
p {font-size: 16px}A 16px font
The larger this number, obviously, the large the font size. 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.
Borders - let's bound it
Thinking of adding borders to an element? Well you'll need to consider border for a while..
The border property takes three parameters to understand what sort of borders do you want to apply to an element as described below:
- The first is its weight which defines how thick the border shall be. Since this is a length parameter it can accept the same notation we used above for custom font-sizes i.e a number and a unit.
- The second is its style i.e shall it be solid, dashed, dotted, or a double-line border. Values include
solid,dashed,dottedanddoublerespectively. - The third one is its color and hence can accept any of the colornames shown above.
Now before we move on any further it's necessary to explain what really are parameters in property values and how to give them.
What are parameters?
There are many CSS properties that get done with just one single value such as color, font-size etc. In contrast, equally there are also many properties which aren't fulfilled simply by just one value. An instance is border - it needs to have different parameters essentially defining different aspects of a border.
Now since these parameters are separate entities, they must be separated/delimited from each other, by a separator. Space serves this purpose i.e it delimits parameters from each other.
Below is the general form of specifying parameters for a property's value.
property: param1 param2 param3 ...Coming back to the topic of borders, since we now know how parameters are given, we can apply them to border as described above - first providing a value for its weight, then for its style and lastly for its color.
p {border: 1px solid black}
/* following we demonstrate a couple more examples
p {border: 3px solid yellowgreen}
p {border: 5px dashed lightgrey}
p {border: 6px dotted orange}
*/A 1px solid black border
A 3px solid black border
A 5px dashed lightgrey border
A 6px dotted orange border
In conclusion
Summing it all up, in this chapter you saw four CSS properties, of which three were totally new to you - background-color, font-size and border. These properties will be used throughout this foundation unit as basic styling properties, so make sure you put in a good amount of practice to learn them thoroughly. You aren't expected to master them, as this aspect will be dealt in respective units later in this course, but instead what is required from you is to be able to work with them easily.
You've surely learnt a lot upto this point, but only that much to constitute less than 5% of this whole CSS course. Keep on learning CSS and styling HTML!
