Scribd
Upload
29 views

Styling Your Text!

The document discusses various options for styling text in CSS including font properties like family, style, variant and size as well as color, background, alignment and line-height. It provides examples and considerations for each property and emphasizes practicing on simple problems before designing larger projects.

Uploaded by

varsha
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
29 views

Styling Your Text!

The document discusses various options for styling text in CSS including font properties like family, style, variant and size as well as color, background, alignment and line-height. It provides examples and considerations for each property and emphasizes practicing on simple problems before designing larger projects.

Uploaded by

varsha
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/ 17

INTRODUCTION

01.04 Styling Your Text TO CSS

Styling Your Text!


Styling your text!
INTRODUCTION
01.04 Styling Your Text TO CSS

Options!
•  Many options for styling your text:!
•  font (family, style, variant, size)!
•  color and background!
•  alignment!
•  line-height!
INTRODUCTION
01.04 Styling Your Text TO CSS

font-family!
•  Font families are styles of text!
•  Examples:!
•  Helvetica, Courier, “Courier New”,
“Comic Sans MS”, cursive, Verdana
INTRODUCTION
01.04 Styling Your Text TO CSS

font-family!
INTRODUCTION
01.04 Styling Your Text TO CSS

font-family!
•  Not all font-families supported by all of
the operating systems, so you can provide
alternatives.!
INTRODUCTION
01.04 Styling Your Text TO CSS

font-family Considerations!

•  Some fonts are not as user-friendly, use


sans-serif when possible.!

Test Test
INTRODUCTION
01.04 Styling Your Text TO CSS

Custom fonts!
•  To expand beyond "web-safe" fonts use @font-
face!
!
INTRODUCTION
01.04 Styling Your Text TO CSS

font-style!
•  font-style:!
•  normal!
•  italic !
•  oblique!
INTRODUCTION
01.04 Styling Your Text TO CSS

font-variant!
•  font-variant:!
•  normal!
•  small-caps!
INTRODUCTION
01.04 Styling Your Text TO CSS

font-size!
•  This is only the beginning of our discussion on sizes…!
•  Options!
•  xx-small, x-small, small, smaller!
•  medium!
•  larger, x-large, xx-large, larger!
•  Use pixel !
•  Use %!
INTRODUCTION
01.04 Styling Your Text TO CSS

color and background-color!

•  The color attribute is the color of the


foreground.!

•  The background-color is the color of the


background!
INTRODUCTION
01.04 Styling Your Text TO CSS

colors!
INTRODUCTION
01.04 Styling Your Text TO CSS

text-align!
•  Aligning text is simple!!
•  text-align!
•  left!
•  right!
•  center!
•  justify!
INTRODUCTION
01.04 Styling Your Text TO CSS
INTRODUCTION
01.04 Styling Your Text TO CSS

line-height!
•  As you can guess, doesn’t affect font!
•  Adjusts the space between the lines of
text!
INTRODUCTION
01.04 Styling Your Text TO CSS

Review!

•  The number of options for styling text can


seem overwhelming.!
•  Practice on toy problems!!
•  Design larger projects on paper first!!!!
INTRODUCTION
01.04 Styling Your Text TO CSS

Acknowledgements/Contributions!
These slides are Copyright 2015- Colleen van Lent as part of http://
www.intro-webdesign.com/ and made available under a Creative
Commons Attribution Non-Commercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the
attribution requirements of the license. If you make a change, feel free
to add your name and organization to the list of contributors on this
page as you republish the materials.!
!
Initial Development: Colleen van Lent , University of Michigan School of
Information!
!

You might also like