Click to edit Master title style

FORMATTING TEXT
WITH CSS

1
TYPOGRAPHY
Click to edit Master title style
FONT PROPERTY
PROPERTY NAME DEFINITION VALUES
Font-family Indicates the typeface Any typeface
Ex: font-family: arial
Font-weight indicates if text is written in italics, obliquely or Italic, oblique, normal
normally.
Ex: font-style: italic
Font-weight Indicates the thickness of the characters. Normal, bold, bolder, lighter, any
Ex: font-style: bold number from 100-900 (100 is the
Ex: font-style: 200 thinnest)
Font-size Indicates the size of the text Normal, xx-small, x-small, small,
Ex: font-size: 12px medium, large, x-large, xx-large,
Ex: font-size: 12pt any number followed by px (for
Ex: font-size: 50% size in pixels), pt (for size in
Ex: font-size: medium points) or % (expressed as
percent)
Font-variant Is used to do small-caps. Normal, small-caps
Ex: font-variant: normal
Ex: font-variant: small-caps
2 2
Click to edit Master title style
TEXT PROPERTY
PROPERTY NAME DEFINITION VALUES
Text-align Indicates the alignment Left, right, center, justify
Ex: text-align: justify
Text-decoration Indicates the decoration applied None, underline, overline, line-
through, blink, sub, super,
Text-transform Indicates the case of the text. None, capitalize, uppercase,
Ex: text-transform: lowercase lowercase
Line-height Indicates the line spacing taken up by each line Normal, any number followed by
Ex: line-height: 11px px (for size in pixels), pt (for size in
Ex: line-height: 2em points) or % (expressed as
percent)
Text-indent Indents the first line of each paragraph Length, percentage
Ex: text-indent: 25px
Ex: text-indent: 5%

3 3
Click to edit Master title style

It is good practice to specify more than one font family on your web site code.,
so that if the web browser does not support that font, it will proceed to the next
font in line. A generic font such as San-serif (commonly used for web sites since
it is easier to read e.g. Arial) or serif (traditional fonts such as Times Roman)
maybe specifies at the end of the list to ensure that if the indicated font is not
available it will just use the available generic font in the browser. If you do not
specify any font family, the browser will use the default font.

4 4
Click to edit Master title style
CSS STYLES
STYLE EXAMPLE FUNCTION
Font-weight font-weight: bold Changes the font style to bold
Font-size font-style: italic Changes the font style to italic
Font-family font-family: serif Specifies which typeface to use
Font-size Font-size: 50% Specifies the font size
color color: pink Specifies the text color
Font-variant font-variant: small-caps Transforms the text
Letter-spacing letter-spacing: 2px Changes the spacing between letters
Word-spacing word-spacing: 10px Changes the spacing between words
Line-height line-height: 1.50 Changes the height between lines
Text-align text-align: center Specifies the alignment of a block of text

5 5
Click
Sampleto code
edit Master title style

6 6
CREATING A BOLD TEXT
Click to make
You can edit the
Master titleusing
text bold style
the font-weight property in CSS. You can
make the text bold, bolder, lighter and normal. You can also specify a number
value from 100-900 to adjust the boldness level.

7 7
CREATING AN ITALIC TEXT
Click touse
You can edit
theMaster
font-styletitle style
property in CSS to make the text italic, oblique and
normal.

8 8
INDENTING TEXT
Click
The firstto
lineedit Mastercantitle
of a paragraph styleusing the text-indent property in CSS. You can set
be indented
the measurement of the indention in px, mm, cm, in, pt, pc, ex or em. You can also set the
indention in percentage, such as 20% of the text block width.

9 9
CHANGING THE FONT
Click
You canto edittheMaster
change title
font by using style property in CSS. Not all fonts are available on
the font-family
all computers; therefore, you should specify a second font choice. Or, you can use common font
such as Arial, Verdana or Times New Roman which are usually available on most computer.

1010
CHANGING THE FONT SIZE
Click
You canto edit
change theMaster title
font size using the style
font- size property in CSS. You can set the font size with
the use of pt, px, mm, cm, in, pc, ex or em. You can also use a description such as xx-small,
small, medium, large, x-large or xx-large.

1111
CHANGING THE TEXT CASE
Click
You canto edittheMaster
change title
text case by usingstyle
the text- transform property in CSS. You can specify the
text case value such as capitalize, uppercase, lowercase and none.

1212
CHANGING TEXT ALIGNMENT
Click
You canto edittheMaster
change alignmenttitle
of the style
text using the text-align property in CSS such as left,
center, right and justify.

1313
CHANGING LINE SPACING
Click
You canto edit
change theMaster
line spacingtitle style
using the line-height property in CSS.

1414
CHANGING COLOR OF TEXT
Click tocanedit
use as Master title style
You can change the color of the text by using the color property in CSS. There are sixteen valid color names for HTML and
CSS that you listed by The World Wide Web Consortium (W3C), they are aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. There are also 150 color names supported by the major
browsers. If you intend to use color, you should use that color’s hex value (for example, #0000FF= blue).

1515
Click
(RGB) mto
e a nedit
t f o r dMaster
i s p l a y o n title
c o m p u tstyle
Colors in HTML and CSS use the combination of the colors Red, Green and Blue
er screens. Hexadecimal value is
based on 16 and
the number are represented from 0 to 9, the a, b, c, d, e and f. The Hex value of
colors uses six numbers or letters between 000000 (black) to ffffff (white). The first
two numbers is the color Red, the next two is for color Green and the last two is for
the color Blue. The combination of these three colors produces sixteen million
different colors.

CSS TEXT COLOR PROPERTY

PROPERTY EXAMPLE DESCRIPTION
color: red Set color to a specific value
color: #ff0000 Set color in hex-notation
color: Rgb (255, 0, 0) Set color in values from 0 to 255
color: Rgb (100%, 0%, 0%) Set color in percentages from 0% to 100%
color: inherit Inherit color from parent

1616
Click to edit Master
COLOR NAME title style
HEX VALUE COLOR NAME HEX VALUE
Agua #00FFFF Indigo #4B0082
Beige #F5F5DC Lavender #E6E6FA
Black #000000 Magenta #FF00FF
Blue #0000FF Maroon #800000
Chocolate #D2691E Navy #000080
Coral #FF7F50 Olive #808000
Cyan #00FFFF Orange #FFA500
Fuchsia #FF00FF Pink #FFC0CB
Gold #FFD700 Purple #800080
Gray #808080 Red #FF0000
Ivory #FFFFF0 Violet #EE82EE
Khaki #F0E68C Yellow #FFFF00

1717
ADDING A BACKGROUND COLOR TO A TEXT
Click toa color
You can add edit Master
behind title
a text without style
changing the page’s background by using the background property in CSS.

1818
ADDING A BORDER
Click
You can addto edit
a border to Master
your page usingtitle style
the border property in CSS. You can set the thickness value to thin, medium or
thick. You can also add a border style such as solid, double, groove, ridge, inset, outset, dotted or dashed.

1919
CREATING LISTS
Click
Customto
i z iedit
n g l i s Master
t s m e a n ytitle
o u c astyle
n choose your own image as
of the pre-defined squares, circles and discs, be in
bullets instead
charge of the
indentions of item, etc.

CSS LIST PROPERTY

PROPERTY DESCRIPTION
List-style-type Indicates the type of bullet.
Ex. List-style-type: lower-alpha

List-style-image Indicates the image to be used as bullet.

Ex: list-style-image: url (thisImage.jpg)

List-style-position Indicates the position of the marker.

Ex: list-style-position: outside

List-style Shorthand notation for all the properties for lists

Ex: list-style: inside decimal

2020
CREATING LISTS
Click to edit Master title style
The list-style-image property is used to set an image as a bullet for the
list. The list-style-type property then sets what type of bullet to be used
depending on the value keyed in:
 disc for round bullets
C i r c l e f o r c i r c u l a r b u l l e t s
S q u a r e f o r s q u a r e b u l l e t s
D e c i m a l f o r r e g u l a r n u m b e r i n g ( 1 , 2 , 3 , 4 , e t c . )
D e c i m a l - l e a d i n g - z e r o for regular numbering with leading zeroes
(01,02,03,04, etc.)
L o w e r - r o m a n f o r l o w e r c a s e R o m a n N u m e r a l ( i , i i , i i i , i v, e t c . )
U p p e r - r o m a n f o r u p p e r c a s e r o m a n n u m e r a l ( I , I I , I I I , I V, e t c . )
L o w e r - a l p h a f o r l o w e r c a s e a l p h a b e t ( a , b , c , d , e t c . )
U p p e r - a l p h a f o r u p p e r c a s e a l p h a b e t ( A , B , C , D , e t c . )

2121
Click tobelow
The example edit Master
illustrates how a list title
can used style
in CSS.

2222
PSUEDO-ELEMENTS
Click
P s e u d oto
- e l eedit
m e n t s Master
a l l o w y o utitle
t o f ostyle
rmat a specific part or several parts
elements. Using CSS properties you will learn how to apply design on
of HTML
the first
letters and first lines of text.
Pseudo-elements are defined the same way pseudo-classes are defined.

CSS PSEUDO ELEMENTS

SELECTOR EXAMPLE DESCRIPTION
:link a:link Select all unvisited links
:visited a:visited Selects all visited links
:active a:active Select the active link
:hover a:hover Selects links on mouse over
:focus input: focus Selects the input element which has focus
:first-letter p:first-letter Selects the first letter of every <p> element
:first-line p:first-line Selects the first line of every <p> element
:before p:before Inserts content before every <p> element
:after p:after Inserts content before every element

2323
Click to edit Master title style

2424
Click to edit Master title style
ACTIVITY:
1. Copy the codes below and use span and div tags.

<html>
<head>
<body>Pseudo-elements allow you to format a specific part or several
parts of HTML elements. Using CSS properties you will learn how to apply
design on the first letters and first lines of text. </body>
</html>

2. Create a web design that will show the color of a rainbow.

Name them and show their colors. You can have the different
color using background and font colors.
2525