Created by Turbolearn AI
Fonts and Colors
Font Styles and Properties
To change the look of text on a web page, various font properties can be used. These
include font style, font size, font family, and font weight.
The font style property is used to specify the font style for a text. For example,
it can be set to italic to make the text appear in italics.
The font size property is used to specify the size of the text. It can be set using
different units such as pixels px.
The unit "px" stands for pixels, where one pixel is equal to 1/96 of an inch,
which is equivalent to 0.26 mm.
Font Size Units
Unit Description
px Pixels, where 1 px = 1/96 inch = 0.26 mm
Font Family
The font family property is used to specify the font family for a text. Different font
families have distinct styles and appearances. Some common font families include:
Times New Roman
Arial
Cursive
The font family can be specified using the font-family property.
Font Weight
The font weight property is used to specify the thickness or boldness of the text. It
can be set to different values such as:
Page 1
Created by Turbolearn AI
100: Very light
900: Very bold
The font weight property controls the degree of blackness or thickness of
the text.
Example Use Cases
Changing the font style to italic: font-style: italic;
Increasing the font size: font-size: 50px;
Changing the font family to cursive: font-family: cursive;
Making the text bolder: font-weight: 900;
Some of the font properties can be used together to achieve the desired text
appearance.
Font Properties Table
Property Description Example Values
font-style Font style normal, italic, oblique
font-size Font size 12px, 20px, 50px
font-family Font family Arial, Times New Roman, Cursive
font-weight Font weight 100, 400, 900
Font Properties
When styling text, there are several font properties to consider. These include:
Font Size: The size of the text, which can be adjusted using the font-size
property.
Font Family: The typeface used to render the text, which can be specified using
the font-family property.
Font Weight: The thickness or boldness of the text, which can be controlled
using the font-weight property.
Font Style: The style of the text, such as italic or normal, which can be set using
the font-style property.
Page 2
Created by Turbolearn AI
The font-family property allows you to specify a list of font families to
use, in order of preference. If the first font family is not available, the
browser will fall back to the next one, and so on. This is known as a
fallback system.
Line Height
The line-height property controls the distance between lines of text. A higher value
will result in more space between lines, while a lower value will result in less space.
For example, setting line-height to 30 pixels will result in a gap of 30 pixels
between lines.
Setting line-height to 10 pixels will result in a much smaller gap between
lines.
External Fonts
If you want to use a font that is not available on the user's device, you can import it
from an external source, such as Google Fonts.
To do this, you need to:
Select the font you want to use on the Google Fonts website.
Click the "+" button to add it to your collection.
Copy the link tag provided and add it to the <head> section of your HTML
document.
Use the font-family property to specify the external font.
Colors
There are several ways to specify colors in CSS, including:
Named Colors: Using a predefined name, such as "yellow" or "blue".
RGB Values: Using a combination of red, green, and blue values, such as
rgb(255, 0, 0).
Hexadecimal Values: Using a hexadecimal code, such as #ff0000.
HSL Values: Using a combination of hue, saturation, and lightness values, such
as hsl(0, 100%, 50%).
These different methods can be used to achieve the desired color effect.
Page 3
Created by Turbolearn AI
Color Properties
The color property is used to specify the color of text, while the background-color
property is used to specify the color of the background.
For example, setting background-color to "yellow" will result in a yellow
background.
By mastering these concepts, you'll be able to style your text and control the colors
used in your web pages.## Color Representation The lecture discussed various ways
to represent colors in CSS.
Named Colors
Named colors are predefined color names that can be used to style HTML elements.
For example, brown is a named color.
RGB Values
RGB stands for Red, Green, and Blue. It's a color model that represents colors using
a combination of these three primary colors. The RGB values range from 0 to 255.
RGB is an additive color model, meaning that the more intense each
primary color is, the closer the resulting color is to white.
Red, Green, and Blue components can be adjusted to create different colors.
For example, rgb(0, 0, 0) represents black, while rgb(255, 255, 255)
represents white.
RGBA Values
RGBA is an extension of RGB that includes an Alpha channel, which controls the
transparency of the color. The Alpha value ranges from 0 f ullytransparent to 1
f ullyopaque.
Alpha value determines the transparency level of a color, with 0 being
fully transparent and 1 being fully opaque.
Page 4
Created by Turbolearn AI
For example, rgba(100, 109, 129, 0.5) represents a semi-transparent blue-ish
color.
Hexadecimal Values
Hexadecimal values are another way to represent colors using a six-digit code
consisting of letters and numbers.
Hex Code Structure
A hex code is represented as #RRGGBB, where:
Component Description
RR Red component 00 − F F
GG Green component 00 − F F
BB Blue component 00 − F F
For example, #FFFFFF represents white, while #000000 represents black.
Hex codes can also be used with an Alpha channel, represented as #RRGGBBAA or
rgba() equivalent.
HSL Values
HSL stands for Hue, Saturation, and Lightness. It's a color model that represents
colors using these three components.
HSL Components
Component Description
Hue Color angle 0 − 360°
Saturation Color intensity 0 − 100
Lightness Color brightness 0 − 100
HSL is a more intuitive color model, as it separates the color into its hue,
saturation, and lightness components.
For example, hsl(172, 27%, 79%) represents a pastel color.
HSL is useful for creating color schemes and adjusting colors.## Colors in CSS
Page 5
Created by Turbolearn AI
CSS provides several ways to define colors, including RGB, HEX, and HSL.
RGB Colors
RGB stands for Red, Green, and Blue. It's a color model that combines different
intensities of red, green, and blue to create a wide range of colors.
RGB is an additive color model, meaning that the more intense the color,
the brighter it becomes.
To define an RGB color in CSS, you can use the rgb() function, which takes three
arguments: the red, green, and blue values.
Red value ranges from 0 to 255
Green value ranges from 0 to 255
Blue value ranges from 0 to 255
Example: rgb(255, 0, 0) represents the color red.
HEX Colors
HEX is a shorthand way to represent RGB colors using hexadecimal values.
HEX colors are represented using a # symbol followed by six hexadecimal
digits.
The six hexadecimal digits are divided into three pairs, representing the red, green,
and blue values.
HEX Code RGB Equivalent
#FF0000 rgb255, 0, 0
#008000 rgb0, 128, 0
#0000FF rgb0, 0, 255
HSL Colors
HSL stands for Hue, Saturation, and Lightness. It's another color model that can be
used to define colors in CSS.
Page 6
Created by Turbolearn AI
HSL is a cylindrical color model, where hue represents the color,
saturation represents the intensity, and lightness represents the
brightness.
To define an HSL color in CSS, you can use the hsl() function, which takes three
arguments: the hue, saturation, and lightness values.
Hue value ranges from 0 to 360
Saturation value ranges from 0% to 100%
Lightness value ranges from 0% to 100%
Example: hsl(0, 100%, 50%) represents the color red.
Using Developer Tools
Developer tools allow you to inspect and modify the HTML and CSS of a web page.
You can access developer tools by right-clicking on a web page and
selecting "Inspect" or by pressing F12.
Using developer tools, you can:
Inspect HTML elements and their CSS styles
Modify CSS styles and see the changes in real-time
Test different CSS styles and layouts
Example Use Case
Let's say you want to change the background color of a paragraph to yellow.
1. Inspect the paragraph element using developer tools.
2. Find the CSS style that defines the background color.
3. Modify the CSS style to use the hsl() function, for example: hsl(60, 100%,
50%).
By following these steps, you can change the background color of the paragraph to
yellow.
Key Takeaways
Page 7
Created by Turbolearn AI
CSS provides several ways to define colors, including RGB, HEX, and HSL.
RGB is an additive color model that combines red, green, and blue intensities.
HEX is a shorthand way to represent RGB colors using hexadecimal values.
HSL is a cylindrical color model that represents hue, saturation, and lightness.
Developer tools allow you to inspect and modify HTML and CSS.##
Understanding Browser Styles and CSS When you inspect an element on a
web page, you can see the styles applied to it. The browser applies some
default styles to elements, known as User Agent Stylesheet.
User Agent Stylesheet refers to the default styles applied by the browser
to HTML elements.
For example, when you inspect a paragraph element, you may see that it has a
default margin and display property applied to it.
Inspecting Element Styles
When you inspect an element, you can see the styles applied to it, including:
The CSS properties applied to the element
The values of those properties
The source of the styles e. g. , U serAgentStylesheetoryourownCSS
You can use this information to understand how the styles are being applied and
make changes as needed.
Understanding the Box Model
The box model refers to the structure of an HTML element, including its content,
padding, border, and margin.
Property Description
Content The content of the element
Padding The space between the content and the border
Border The border surrounding the element
Margin The space between the element and other elements
Understanding the box model is crucial for controlling the layout and spacing of
elements on a web page. We will discuss this topic further in upcoming lectures.
Page 8
