Fonts and Text
Duration : 00:02:00
Font Size:
The CSS property 'font-size' is used to control the size of the text within an HTML element. It can be set in various units like pixels, ems, or percentages.Example:
p {
font-size: 16px;
}
Font Weight:
The 'font-weight' property controls the thickness of text characters. It can take values like 'normal', 'bold', or numeric values.Example:
strong {
font-weight: bold;
}
Font Family:
The 'font-family' property defines the font used for text within an element. Multiple font names are listed in order of preference.Example:
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}
CSS font-weight Property:
The 'font-weight' property in CSS determines the thickness or boldness of a text's characters. It accepts values ranging from '100' (thin) to '900' (bold), with '400' typically representing normal and '700' representing bold.Example:
p {
font-weight: 600;
}
CSS font-style Property:
The 'font-style' property in CSS is used to apply italic or oblique styles to text. It has values like 'normal' (default), 'italic', and 'oblique'.Example:
em {
font-style: italic;
}
CSS line-height Property:
The 'line-height' property in CSS sets the vertical space between lines of text. It can be set using unit values or as a ratio of the element's font size.Example:
h1 {
line-height: 1.5;
}
CSS @font-face Rule:
The '@font-face' rule in CSS allows you to define custom fonts to be used on your website. It specifies the font-family name, the source of the font file, and other font properties.Example:
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2'),
url('custom-font.woff') format('woff');
}
CSS Fallback Fonts:
Fallback fonts are used as alternatives in case the preferred font is unavailable. They are specified in the 'font-family' property, separated by commas.Example:
p {
font-family: 'Preferred Font', Arial, sans-serif;
}
CSS Linking Fonts:
You can link external fonts to your HTML using the 'link' element in the '<head>' section. This ensures that the font is downloaded and available for use in your CSS.Example:
p {
font-family: 'Linked Font', sans-serif;
}
Text Alignment:
Text alignment in CSS defines how text is positioned within its container. Common values include "left," "center," "right," and "justify."Example:
.centered-text {
text-align: center;
}
Text Color:
Text color determines the color of the text content. You can use color names, hexadecimal values, RGB, or HSL values to specify text color.Example:
.red-text {
color: #FF0000;
}
Text Decoration:
Text decoration CSS properties allow you to add visual effects to text, such as underlines, overlines, or strike-through lines.Example:
.underline-text {
text-decoration: underline;
}
Text Transformation:
Text transformation controls the capitalization of text. You can use properties like "text-transform" to make text uppercase, lowercase, or capitalize the first letter of each word.Example:
.uppercase-text {
text-transform: uppercase;
}
Text Spacing:
Text spacing properties control the space between characters, words, and lines. This is useful for fine-tuning the layout and readability of text.Example:
.letter-spacing {
letter-spacing: 2px;
}
Text Shadow:
Text shadow allows you to add a shadow effect to text. You can control the shadow's color, blur radius, and offset from the text.Example:
.text-shadowed {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
Still have some questions? Let's discuss.
CONTACT US
Unlimited live sessions
Quick notes
Hands-on labs
Real-world projects
Interview prep