Styling Text in CSS

CSS
December 18, 2024

Changing Fonts with Font-Family

We use one font at a time or list but a name where two words it come between “”.
Another name of list font called font stack.

				
					Font-family: Georgia, serif;

Font-size, Font-Weight, and Font-Style

Font-size:

The words are used small, large, 1.2em, x-small, 12px, 80%, etc.
Default size: 32px. It is inherited.

				
					Font-size: 32px;

Font weight:

The words are used normal, bold, lighter, bolder, 100, etc.
400 is used to normal and 700 for bold.

				
					Font-weight: 400;

Font style:

To make italic or normal, oblique.

Changing Text Alignment

Align mean it is center, left or right align or justify.

Default is left. We use start and end as replacement to left and right respectively.

				
					Font-align: center;

Line-height, Letter-Spacing, and Word-Spacing

Letter-spacing:

Space between letters. It could be 1px, normal, .2rem.

				
					Letter-spacing: 20px;

Word spacing:

Space between words. It could also be 1px, 4ch, normal.

				
					Word-spacing: 3px;

Line height:

Height between lines. It could be 1px, 150, 2.5;
Number without unit is multiply by font size.

				
						Line-height: 3;

Adding Custom Fonts with Google Fonts

Go to google font add any font in to cart and open to cart there is code, copy the code and paste into HTML file at head section.

Creating Text Shadows

Used to shadows of text

First is x-axis then y-axis third is blur and last one is color. It is noting effect on changing position either left to right or right to left. But if we inter-change the position it is gone wrong. We use hexadecimal colors rather than color name. we use multiple shadow with separation with comma.

				
					Text-shadow: 1px 2px 1px pink;

Text-Transform & Text-Decoration

Transform means could be capitalized, upper-case, lower-case, normal, full-width.
Decoration used to decorative lines on the text. It could be underline, underline dotted, green wavy underline or underline overline. It is shorthand way for line, color, style, and thickness.

				
					Text-transform: Capitalized;

The ID Selector

If we change style of any one element we didn’t yet. But we have, we use id to control more over on styling.
To use this, we write id= “” in any element and cross ponding in CSS we use #idname, for example

In HTML

				
					<p id= “featured” >

In CSS

				
					#featured {
}

But it is occurred only in one element.

The Class Selector

Just like ids it occurs whole page.
We use class instead of id

In HTML

				
					<p class= “featured” >

In CSS

				
					.featured {
}

Styling Lists

You own define styles for bullets

				
					List-style-type: space-counter;

Disc, circle, square, decimals etc.

Other is use

				
					List-style-position: inside;
List-style-image: URL ();

Position may be inside or outside and image used URL’s

Styling Links and Hover Pseudo-Class

For styling link, we use

				
					a:visited {	 
}

a:hover{
}

Another is cursor property

It could be help, wait, pointer, not-allowed, zoom-in.

				
					Cursor: help;

The Font Shorthand Property

All of the different properties used in font used as once, like

				
					Font: “Fira sans”, San-serif, italic, bold, 24px, caption;

You use font-family, font-size, font-stretch, font-style, font-weight, font-height, font-variant.

Rules:

Font-style, font-variant, and font-weight must precede font-size
Font-variant may only specify the values defined in CSS 2.1 that is normal and small-caps
Font-stretch may only be a single keyword value
Line-height must immediately follow font-size, precede by “/”, like this: “16px/3”.
Font-family must be the last value specified.-