Scribd
Upload
2 views3 pages

CSS Text Properties

This document provides a quick reference for CSS text and font properties that control the appearance and layout of text on webpages. It includes essential properties such as color, text-align, text-decoration, font-family, and font-size, along with example CSS code for each. The document serves as a guide for web developers to effectively style text and fonts in their designs.

Uploaded by

Brawl Blitz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views3 pages

CSS Text Properties

This document provides a quick reference for CSS text and font properties that control the appearance and layout of text on webpages. It includes essential properties such as color, text-align, text-decoration, font-family, and font-size, along with example CSS code for each. The document serves as a guide for web developers to effectively style text and fonts in their designs.

Uploaded by

Brawl Blitz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS Text & Font Properties – Quick Notes

✨ Text Properties

These properties control the appearance and layout of text on a webpage.

 color: Sets the color of the text.

css

p {
color: blue;
}

 text-align: Aligns text horizontally.


o Values: left, right, center, justify

css

h1 {
text-align: center;
}

 text-decoration: Adds decoration to text.


o Values: none, underline, overline, line-through

css

a {
text-decoration: underline;
}

 text-transform: Controls the capitalization of text.


o Values: uppercase, lowercase, capitalize

css

p {
text-transform: uppercase;
}

 letter-spacing: Adjusts space between characters.

css

h2 {
letter-spacing: 2px;
}

 word-spacing: Adjusts space between words.

css

p {
word-spacing: 5px;
}

 line-height: Sets the height between lines of text.

css

p {
line-height: 1.5;

 text-indent: Indents the first line of text.

css

p {
text-indent: 50px;
}

 text-shadow: Adds shadow to text.

css

h1 {
text-shadow: 2px 2px 5px gray;
}

🖍️ Font Properties

These properties define the style and appearance of the font used in text.

 font-family: Specifies the font of the text. It's good practice to list multiple fonts as
fallbacks.

css

p {
font-family: "Arial", sans-serif;
}

 font-size: Sets the size of the font.


o Values: px, em, rem, %, etc.

css

h1 {
font-size: 24px;
}

 font-style: Defines the style of the font.


o Values: normal, italic, oblique

css

p {
font-style: italic;
}

 font-weight: Sets the weight (thickness) of the font.


o Values: normal, bold, lighter, bolder, or numeric values like 100 to 900

css

h2 {
font-weight: bold;
}

 font-variant: Controls the usage of alternate glyphs.


o Values: normal, small-caps

css

p {
font-variant: small-caps;
}

 font: A shorthand property to set all the above font properties in one declaration.

css

p {
font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

You might also like