A. Styling Headings (<h1>)

1. color

Changes the text color using names, HEX, or RGB.

h1 { color: blue; }

2. font-size

Sets the size of text (px, em, rem, %).

h1 { font-size: 40px; }

Point Pikker Heading

Heading Typography

3. font-family

Changes the font style (Arial, Verdana, etc.)

h1 { font-family: 'Arial'; }

4. text-align

Aligns text horizontally.

ValueMeaning
left / rightAlign to sides
centerCenter text
justifyEqual spacing

Centered Arial

5. text-transform

Controls the capitalization of text.

ValueResult
uppercaseALL CAPS
lowercaseall small
capitalizeFirst Letter Capital
h1 { text-transform: uppercase; }

uppercase text

capitalize text

B. Paragraph Styling (<p>)

1. line-height

Controls the vertical space between lines of text.

p { line-height: 30px; }

2. letter-spacing

Controls the space between characters.

p { letter-spacing: 3px; }

This paragraph uses increased line height and letter spacing for better readability.

Paragraph Spacing

3. text-indent

Adds space to the beginning of the first line.

p { text-indent: 50px; }

4. color

Changes the color of the paragraph text.

p { color: green; }

The first line of this green paragraph is pushed inside using the text-indent property.