Font
How to change the font?
As if in document, email or presentation tools, you may need to format your textual contents using a variety of styles. In CSS, as discussed in the previous chapter, each style rule would apply to any elements described by the CSS selectors. However, what CSS properties are available for styling the texts?
font-family
font-family is a list of comma separated values defining the font family names or a generic group of family to be used. The list is of prioritized order, so the browser will display the text in the first font, and fallback to later fonts if it's not available on the device.
<font-family> is the exact name of the font and the string should be double-quoted, like "Times New Roman", "Calibri", "Helvetica", etc.
<generic-name> is a type of standard font that is defined by the system.
Serif fonts are used in formal documents or traditional and retro style, while sans-serif fonts are used in presentations or user interface.
There are more types of generic fonts that you have reference on the W3C documentation.
font-weight
font-weight refers to the boldness of the text. The values ranges the mulitple of 100 from 100 (thinnest) to 900 (boldest). Other than numerical values, keywords are allowed: normal refers to 400, and it's the default value, and bold refers to 700.
font-style
font-style is a way to make the font italic which you may have been used to it. A new term oblique is introduced here that it is simply a sloped font while italic is usally cursive as well, and this difference can be typically found in English serif font. However, when either italic or oblique is not supported by the font-family, they will be interchangeably used. For example, abcijk (italic), abcijk (oblique - simulated), abcijk (oblique - actual) .
font-size
font-size is to describe the size of the text using a length value. I'll explain more on <length> in the next chapter - Layout, but now let me introduce 4 unit of measures that is useful in font-size values:
- Absolute Lengths
Usually in office suite, you may use pt as the unit of measure of the font size, and here you can in CSS:
px: 1 pixel (Screen Pixel)
pt: 1 point (1/72nd of 1 inch)
These absolute length are defined no matter where the element places in the HTML document. - Font-Relative Lengths
Font-relative lengths are particular useful for inheriting the length as a relative size of parent element.
rem: ratio taking relative to the browser document default font size
em: ratio taking relative to the parent element font size
Try to edit the font-size to understand the usage of px, em and rem.
#ex1Dem #ele1 {font-size: $(ex1d1)em;}
#ex1Dem #ele1_1 {font-size: $(ex1d2)em;}
#ex1Dem #ele1_2 {font-size: $(ex1d3)rem;}
#ex1Dem #ele1_3 {font-size: $(ex1d4)px;}
#ex1Dem #ele2 {font-size: $(ex1d5)px;}
#ex1Dem #ele2_1 {font-size: $(ex1d6)px;}
#ex1Dem #ele2_2 {font-size: $(ex1d7)em;}
line-height
line-height is the height of each line of text in that element. The number or percentage value should be greater than 0, and it's the ratio on the font size of the styled element. The normal value would give the number value around 1.0 - 1.2 for normal browsers.
Since it's defined as the ratio to its font size, if a <length> value is given with em as unit of measure,
line-height value 1em = 1,
1.2em = 1.2, etc.
It's important to note that em is taking effect on the ratio of parent element, so the line-height attribute
may be a bit odd to take effect on its children elements.
text-decoration
text-decoration is used for adding a line to the text. You can make it underline, line-through (strike), or overline.
Latest version of Firefox and Chrome support full text-decoration definitions, while Edge only support the above simplified syntax.
Styling some single words
To style some single words in a paragraph, you can simply use the default HTML text-level elements like <strong>
, <em>, etc. between the wordings.
If you'd like to have specific styles with indifferent usage meanings with those element types, you can use <span>
elements. You can add attributes like class or id
so your CSS selectors can formulate the styles of these special elements.
It's high time for you to learn AI (artifical intelligence) in this year. Many of us were crazy about big data in the past few years, but the hardware technologies have been evolved and deep learning algorithms has become more sophisticated. There have been many breakthroughs in applying artificial intelligence technologies in more advanced ways.
As you can see, text-level elements can exist within the textual content of a paragraph. They can be individually styled using CSS selectors.
Colors
What are colors?
Color is one of the most common type of CSS property values. You may need to change the color of some texts, the background color, the border color, shadow color, etc. By changing the color value, it will change the display color of that CSS property. The following useful CSS properties would need a color value:
- color: define the text color of an element
- background-color: define the background fill color of an element
- border-color: define the border color of an element (We'll discuss more on border in the next chapter)
Below will discuss how you can express a CSS color value:
rgb() / rgba()
A rgb() / rgba() function can return a CSS color. Let's talk about what is RGB in contextual meaning first:
When you look closer to each pixel of your screen, most likely, it is composed of 3 parts, a red, green and blue "light dots". In computational display, we control a color through the intensity of lightness of the 3 color dots. When all of them emits light at highest intensity, it is a white light. When none of them emits lights, it's simply a dark dot. If only one of them, say the red one, emits light at highest intensity, it shows red color. If the red and green emits together, it's yellow in color. Therefore, by controlling different intensity of red, green, and blue, the display color will be different.
The RGB term refers to the red, green and blue. In the rgb() function, you can return a specific color referring to through passing 3 parameters in the function for controlling red, green and blue intensity respectively. The RGBA term refers to the red, green, blue and alpha. Sometimes, elements will be stacked over one another, and we may have certain extent of transparency to look through the content.
-
r / Red: [Number] Min: 0; Max: 255
The higher the value, the richer the red intensity of the color component is. -
g / Green: [Number] Min: 0; Max: 255
The higher the value, the richer the green intensity of the color component is. -
b / Blue: [Number] Min: 0; Max: 255
The higher the value, the richer the blue intensity of the color component is. -
a / Alpha: [Number] Min: 0; Max: 1
The higher the value, the less transparent the color is.
If the rgb values are the same, this would be grayscale as no one color component has a higher intensity than the others. If the values are higher, this would also results in a ligher color.
Try to edit the rgba parameters to modify color values of the 2 <div> elements in this example.
#ex4Dem #topEle {
background-color: rgba($(ex4d1), $(ex4d2), $(ex4d3), $(ex4d4));
color: rgba($(ex4d5), $(ex4d6), $(ex4d7), $(ex4d8));
}
#ex4Dem #btmEle {
background-color: rgba($(ex4d9), $(ex4d10), $(ex4d11), $(ex4d12));
color: rgba($(ex4d13), $(ex4d14), $(ex4d15), $(ex4d16));
}
#RRGGBB[AA] / #RGB[A]
Instead of using rgb() / rgba() function, you can use this #RRGGBB[AA] / #RGB[A] hexadecimal notation values for expressing the colors in R-red / G-green / B-blue /[A-alpha] terms. Again, the A (alpha) is optional.
In hexadecimal notation, the full expression requires 2 digits for each RGBA values. The value goes from
00 to FF, which is the same as the
rgba function from 0 to 256.
If you use the shortand expression, only 1 digit is used. 3
will stands for 33 and A would stand for
AA.
To compare this notation with the rgba() function, let's look at the following equivalent values:
- rgb(0, 0, 0) / #000000 / #000
- rgb(255, 0, 120) / #FF0078
- rgba(204, 47, 0, 1) / #CC2500FF
- rgba(255, 85, 17, 0.797) / #FF5511CC / #F51C
hsl() / hsla()
A hsl() / hsla() function can also return a CSS color. HSLA stands for hue, saturation, lightness and alpha respectively. This is easier to understand contextually, and it should be familiar for those who have once used simple photo editors before touching with this concept of these parameters. Let's have a look on the meaning of the parameters in these two functions:
- h / Hue: [Number] Any numbers, with every 360 as a full color spectrum
The value would go through the color spectrum. Increasing the value will go from red (0), orange (30), yellow (60), green (120), cyan (180), blue (240), magenta (320) and finally red (360). - s / Saturation: [Percentage] Min: 0%; Max: 100%
The higher the value, the higher the color saturation is. 0% would stand for grayscale. - l / Lightness: [Percentage] Min: 0%; Max: 100%
The higher the value, the lighter the color is. 0% would always result in black while 100% would always result in white. - a / Alpha: [Number] Min: 0; Max: 1
The higher the value, the less transparent the color is.
Try to edit the hsla() funcitons to modify color values of the 2 <div> elements.
#ex4bDem #topEle2 {
background-color: hsla($(ex4bd1), $(ex4bd2), $(ex4bd3), $(ex4bd4));
color: hsla($(ex4bd5), $(ex4bd6), $(ex4bd7), $(ex4bd8));
}
#ex4bDem #btmEle2 {
background-color: hsla($(ex4bd9), $(ex4bd10), $(ex4bd11), $(ex4bd12));
color: hsla($(ex4bd13), $(ex4bd14), $(ex4bd15), $(ex4bd16));
}
Named Color Values
Finally, there is an easier way to label the color, simply by what color names as if we're saying normally, like red, green, black, etc. However, often it is not clear in terms of color values what "red" is, and in real world "red" is oftern a range before we tell a color as "dark red". Therefore, W3C also defines the exact color value for each color name in the Color Specification. Below let's check with some named colors and their respective color values:
| Color | Color Name | rgb() | #RRGGBB | hsl() |
|---|---|---|---|---|
| black | rgb(0, 0, 0) | #000000 | hsl(0, 0%, 0%) | |
| dimgray / dimgrey | rgb(105, 105, 105) | #696969 | hsl(0, 0%, 41.176%) | |
| gray / grey | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50.196%) | |
| silver | rgb(192, 192, 192) | #C0C0C0 | hsl(0, 0%, 75.294%) | |
| white | rgb(255, 255, 255) | #FFFFFF | hsl(0, 0%, 100%) | |
| red | rgb(255, 0, 0) | #FF0000 | hsl(0, 100%, 50%) | |
| orange | rgb(255, 165, 0) | #FFA500 | hsl(38.824, 100%, 50%) | |
| yellow | rgb(255, 255, 0) | #FF0000 | hsl(60, 100%, 50%) | |
| lime | rgb(0, 255, 0) | #00FF00 | hsl(120, 100%, 50%) | |
| green | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25.098%) | |
| aqua / cyan | rgb(0, 255, 255) | #00FFFF | hsl(180, 100%, 50%) | |
| blue | rgb(0, 0, 255) | #0000FF | hsl(240, 100%, 50%) | |
| magenta / funchsia | rgb(255, 0, 255) | #FF00FF | hsl(300, 100%, 50%) | |
| purple | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25.098%) | |
| deeppink | rgb(255, 20, 147) | #FF1493 | hsl(327.574, 100%, 53.922%) | |
| crimson | rgb(220, 20, 60) | #DC143C | hsl(348, 83.333%, 47.059%) | |
| brown | rgb(165, 42, 42) | #A52A2A | hsl(0, 59.420%, 40.588%) | |
| sandybrown | rgb(244, 164, 96) | #F4A460 | hsl(27.568, 87.059%, 66.667%) | |
| gold | rgb(255, 215, 0) | #FFD700 | hsl(50.588, 100%, 50%) | |
| springgreen | rgb(0, 255, 127) | #00FF7F | hsl(149.882, 100%, 50%) | |
| skyblue | rgb(135, 206, 236) | #87CEEB | hsl(197.822, 72.662%, 72.745%) | |
| dodgerblue | rgb(30, 144, 255) | #1E90FF | hsl(209.6, 100%, 55.882%) | |
| pink | rgb(255, 192, 203) | #FFC0CB | hsl(349.524, 100%, 87.647%) |
Images
When to use images?
An impressive image would be memorable for the visitors in your website. You should wisely utilize images in your webpages. Images could be:
- Theme-related Background Photo
- Specially Designed Background Graphics
- Content-related Images
- Custom Images for GUI Icons
There are many ways to insert images or even draw canvas in an HTML page. In this chapter, we'll focus on the <img /> element and the background-image property.
<img />
The <img /> element is a box for you to display an image. You can specify the URI of the image where you have placed in your website folder using the src attribute. The width and height attributes defines the default display size (1 as 1px) of the image element.
In additinal to the default element size, you can resize the image using CSS properties to control the size of the embedding image bounding box using the width and height properties. These properties will be discussed in detail in the next chapter, while I have told you previously that it can be filled with a <length-percentage> value, like 8px or 29%. To keep the original aspect ratio, you may fill such values on either the width or height property, while the other one uses the autovalue.
If none of the elemental size attributes or CSS sizing declarations are defined, the image will be displayed as it's original resolution size.
object-fit
In some scenarios, the original aspect ratio of the image may not be the same as the image element container. You may need to resize and crop a rectangular image into a square to fit the layout design. In order to retain the aspect ratio of image display, you may style the <img /> element with the object-fit CSS property. This will act like a crop on the original image and fit into the designed size.
By default, the image is fill according to the width and height CSS sizing properties, which will stretch the image and the original aspect ratio won't be kept. Other values will resize or crop in the original aspect ratio with different characteristics depending on how to fill within the sized image container. You may try and observe different values on the upcoming demo.
Try to edit the sizing properties of the <img /> element in this example.
#ex5Dem #crescentImg {
width: $(ex5d1);
height: $(ex5d2);
object-fit: $(ex5d3);
}
background-image
background-image is a CSS property specifying an image showing as the background of an HTML element. It is noted that by the meaning of context, the element is not representing an image as a content delivery, but instead using based on a decorational reason.
Say, you may use image A as background-image on an <img /> element with image B, but image A will be displayed to users if image B does not fill the entire element size, or the image B has transparent pixels which can look through the background on image A. To conclude, image B is the main content of delivery but image A is only a decorative background.
background-size
Sizing the background image requires the background-size CSS property. It provides values of cover and contain which act like the behavior of object-fit. A value of <length-pecentage> or auto is allowed to provide once or twice (separated by a space) such that the value represents the fixed-aspect ratio or corresponding x and y sizing of the background image. If a percentage is provided, the percentage is with respect to the element size.
Try to edit the background-size property and the element size properties of the <div> element in this example.
#ex6Dem #hiFlower {
width: $(ex6d1);
height: $(ex6d2);
background-size: $(ex6d3);
}
Image Positioning
The object-position CSS property provides declaring the position of the image in an <img /> element, and the background-position CSS property is for image(s) defined in background-image used. They have very similar value definition, and don't mix up for the 2 different target of uses.
Let me explain more on this properties, and I'll focus on the background-position first.
By default, if an image is not fill and be stretched to the container's size, the image will be placed on the left-top corner of the container and crop according to the element's size. You can specify value keywords like center, left, right, top and bottom for defining the position of the image. One or two such semantic positiong values can be given, and should be separated by a space. In case only one value is given, like left, it will be placed at the left-middle of the cortainer. Therefore, it is simply placing a center value as the 2nd value.
One or two <length-percentage> can be given. Such value will be the length or percentange with respect to the left-top corner of the container. One value will be enforcing the same value for x & y relative coordinates, and two values will be referencing x & y coordinates in the x then y order.
The "x then y" ordering schema is also applied when <length-percentage> is used mixing with the semantic positiong values as discussed above. For example, the value background-position: right 30%; actually equals to background-position: 100% 30%;. Based on such rule, it is meaningless to state background-position: top 69%; because top is not a semantic value for horizontal positioning.
The last possible type is a 3/4-valued declaration. This is actually defining 2 groups of values, with each of them coposing of 1 or 2 values with the semantic positiong values comes first followed by an optional <length-percentage>. This is to specify the position relative to the horizontal and vertical edges. There is no x then y ordering. For example, background-position: bottom 69% left; is possible, referring a position located at 69% above the bottom edge and horizontally aligned at left, which is the same as background-position: 0% 31%;. You can also specify center if you don't want to position at the center for the second direction.
Re-try to flower example, and try to edit the background-position property.
#ex6bDem #hiFlower2 {
width: $(ex6bd1); height: $(ex6bd2); background-size: $(ex6bd3); background-position: $(ex6bd4);
}
The object-position accepts the <position> syntax, which is a stricter form of the <bg-position>. It does not allows a 3-value syntax. Since <position> is used in many other CSS properties, the 3-value syntax may bring some ambiguities. Normally, if you are using the object-position, declaring the CSS property using <bg-position> definition is acceptable.
Now, we have a glimpse on basic styling. Let's probe deeper into layout in the next chapter, and we'll have a better understanding on sizing, positioning and more presentational CSS properties!