☰

CSS Text Properties

🅰️ Typography

Color Font-size Font-weight Font-style Text-align Text-transform Line-height Text-shadow Font-awesome Google fonts Text-decoration Letter-spacing Word-spacing White-space Text-overflow Direction Unicode-bidi Text-indent Writing-mode Font-variant Opacity Mix-blend-mode

Assignment

Assignment 1 Assignment 2

01. color – Text Color

Meaning: Sets the text color.
This text is red.
<div style="color:red;"> This text is red. </div>


Meaning: Sets the gradient text.
GRADIENT
<div style="background: linear-gradient(to left, #f32170, #ff6b08, #cf23cf, #16bf16); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 40px; font-weight: bolder;"> GRADIENT Text. </div>

02. font-size – Size of Text

Meaning: Controls the size of the text.
This is big text.
<div style="font-size:26px;"> This is big text. </div>

03. font-weight – Boldness

Meaning: Makes text bold or light.
This is bold text.
<div style="font-weight:bold;"> This is bold text. </div>

04. font-style – Italic Style

Meaning: Makes text italic.
This is italic text.
<div style="font-style:italic;"> This is italic text. </div>

05. text-align – Text Alignment

Meaning: Aligns text (left, right, center, justify).
Centered text.
<div style="text-align:center;"> Centered text </div>

06. text-transform – Change Case

Meaning: Converts to uppercase, lowercase, capitalize.
uppercase text
<div style="text-transform:uppercase;"> uppercase text </div>

07. line-height – Line Space

Meaning: Controls space between lines.
Line one
Line two (more space)
<div style="line-height:32px;"> Line one Line two (more space) </div>

08. text-shadow – Shadow Effect

Meaning: Adds shadow behind text.
Shadow text
<div style="text-shadow:2px 2px 5px gray;"> Shadow text </div>

09. font-awesome – Icon Library

Meaning: Font Awesome is used to add icons to your website easily using simple classes.


Icons added using Font Awesome.
<!-- Font Awesome CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> <i class="fa-solid fa-star"></i> <i class="fa-solid fa-heart"></i> <i class="fa-brands fa-instagram"></i>

10. google fonts – Add Custom Fonts

Meaning: Google Fonts lets you use beautiful fonts on your website.
This text uses Google Font.
<!-- Google Fonts CDN --> <link href="https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@100..900&family=Playwrite+NO:wght@100..400&display=swap" rel="stylesheet"> <div style="font-family:'Bitcount Prop Single', system-ui;"> This is Google Font. </div>

11. text-decoration – Underline / Overline

Meaning: Adds underline, overline, or removes decoration.
Underlined text
<div style="text-decoration:underline;"> Underlined text </div>

12. letter-spacing – Space Between Letters

Meaning: Controls space between letters.
S P A C I N G
<div style="letter-spacing:5px;"> S P A C I N G </div>

13. word-spacing – Space Between Words

Meaning: Controls space between words.
This is word spacing.
<div style="word-spacing:20px;"> This is word spacing. </div>

14. white-space – Control Spaces & Breaks

Meaning: Keeps spaces and line breaks same as written.
Line 1 Line 2 (spaces kept) Line 3
<div style="white-space:pre;"> Line 1 Line 2 (spaces kept) Line 3 </div>

15. text-overflow – Handle Long Text

Meaning: Shows "..." when text overflows.
This is a long text that will be cut...
<div style="width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"> This is a long text that will be cut... </div>

16. direction – Text Direction

Meaning: Sets writing direction (ltr or rtl).
This text is RTL.
<div style="direction:rtl;"> This text is RTL </div>

17. unicode-bidi – Mixing Text Directions

Meaning: Controls bidirectional text.
abcABC
<div style="unicode-bidi: bidi-override; direction:rtl;"> abcABC </div>

18. text-indent – First Line Indent

Meaning: Moves first line inward.
This paragraph has an indented first line.
<div style="text-indent: 40px;"> This paragraph has an indented first line. </div>

19. writing-mode – Vertical Text

Meaning: Makes text vertical or horizontal.
Vertical Text
<div style="writing-mode:vertical-rl; height:100px;"> Vertical Text </div>

20. text-orientation – Orientation in Vertical Mode

Meaning: Rotates characters in vertical writing.
TEXT
<div style="writing-mode:vertical-rl; text-orientation:upright; height:100px;"> TEXT </div>

21. font-variant – Small Caps

Meaning: Turns text into small caps.
small caps example
<div style="font-variant:small-caps;"> small caps example </div>

22. opacity – Transparency of Text

Meaning: Makes text transparent (0 to 1).
This text is 50% transparent.
<div style="opacity:0.5;"> This text is 50% transparent. </div>

23. mix-blend-mode – Blending Effect

Meaning: Mixes text with background color.
Blend Mode Text
<div style="mix-blend-mode: multiply; background:yellow;"> Blend Mode Text </div>