Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

2 CSS Text Styling Cheatsheet

This document provides an overview of CSS properties that can be used to style text, including properties for color, font, alignment, transformation, and more. It defines each property, possible values, and examples of how to implement them in CSS code.

Uploaded by

jimmeny516
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

2 CSS Text Styling Cheatsheet

This document provides an overview of CSS properties that can be used to style text, including properties for color, font, alignment, transformation, and more. It defines each property, possible values, and examples of how to implement them in CSS code.

Uploaded by

jimmeny516
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

1

CSS TEXT STYLING

This is cheatsheet focuses on the CSS properties and values you can use to style your text.

ANATOMY OF A CSS BLOCK

HERE’S A CSS BLOCK: WHICH MIGHT LOOK LIKE THIS:

1 HTML tag { 1 p {

2 property1: value; 2 color: purple;

3 property2: value; 3 width: 200px;

4 property3: value; 4 font-size: 24px;

5 property4: value; 5 font-family: comic sans;

6 } 6 }

TEXT STYLES

color
Sets the font color. Accepts either the color name or the hex value of the color.

1 color: purple;

2 color:#800080;

CSS TEXT STYLING CHEATSHEET


2

font-family
Sets the font for the text. Will accept any web safe font (which is about 20, depending on the
browser) - we will cover all the web safe fonts in the next step. Can be a prioritized list of fonts; if
the first font listed is not available in the browser, it will default to the second, and so on. You can
also write s
​ ans-serif​ or ​serif​ and the font will default to the browser’s sans serif or serif font.

1 font-family: Helvetica, Arial, sans-serif;

text-align
Sets the alignment of the text – ​left​ (default), r
​ ight​, c
​ enter​, or ​justify​ – the same options
you have in Word.

1 text-align:center;

font-style
For if you want to italicize your text CSS instead of <em> HTML tags. ​Font-style ​takes the
values ​normal​ (default), ​italic​, and ​oblique​.

1 font-style:italic;

font-weight
Style your text b
​ old​ without the <strong> HTML tags; takes the values ​normal​, ​bold​, ​bolder​,
lighter​, or a number from ​100​ to ​900.

1 font-weight:bold;

text-transform
Allows you to make all your text uppercase or lowercase; takes the values ​capitalize​,
uppercase​, and ​lowercase.

1 text-transform:uppercase;

CSS TEXT STYLING CHEATSHEET


3

font-variant
This is a fun one - you can actually make your text small caps by giving this attribute the
descriptor: s
​ mall-caps​.

1 font-variant: small-caps;

text-decoration
Underline​, o
​ verline​, ​line-through​, ​none​. This can be used to remove the default underline
on elements.

1 text-decoration:none;

line-height
The default is for the line-height to be equivalent to the font-size. If you want to make it smaller or
bigger, you set it with the ​line-height​ property. Accepts pixels, em, numbers, and percentages.

1 line-height:150%;

text-indent
Sets the width of the tab indent - takes pixels, ems, or percentages

1 text-indent: 3em;

CSS TEXT STYLING CHEATSHEET

You might also like