Experimenting with

Fonts and Colors

Jayson Angelo E. Vale Cruz

 Fashioning CSS
Chapter 4 – Experimenting with Fonts and Colors
What is CSS?

• CSS stands for Cascading Style Sheets

• CSS is a scripting language for the presentation of webpage including color, layout, and fonts to
adapt in different types of devices

• The basic pattern of a CSS command is:

• property: value
• In this example, the property is the feature of a paragraph you want to style, and value is the style
itself, such as the height of one line in a paragraph
Types of CSS

• In-line Style Sheet

• The first, most specific, and highest priority among the three different sheets is the in-line style sheet, which
contains CSS commands embedded or placed inside HTML tags
• Internal Style Sheet
• The second priority sheet is the internal style sheet, which resembles a summary of CSS commands located at the
upper portion of the HTML document.
• External Style Sheet
• The third and highly recommended type of CSS sheet is the external style sheet
• It list all of the CSS commands in a separate document
Syntax

• The syntax is made-up of three parts: selector, property, and value. The whole structure looks like
this:

selector { property: value }

p { font-family: arial }
Font Properties

• Font-style
• Possible values for this property are: italic, normal, and oblique
• Font-weight
• Refers to how thick each letter will become. Its values are: normal, lighten, bold, and bolder
• You may also use multiples of 100, where 100 is the lightest and 900 is the boldest (400 is the default)
 Colors
Chapter 4 – Experimenting with Fonts and Colors
• It refers to the color of the text
• Its value can be any color, as long as it can be reproduced by the computer
• The CSS rainbow is made up of 16,777,216 colors
Colors in CSS

• There are some ways to express color values in CSS

• By name
• There are 16 colors that can be encoded by name in CSS

Aqua Gray Navy Silver

Black Green Olive Teal
Blue Lime Purple White
Fuchsia maroon Red Yellow
Colors in CSS

• By the rgb value. You must type in this format:

• rgb(n,n,n) where n is a number from 0 to 255

Color Rgb value

Red Rgb(255,0,0)
Green Rgb(0,255,0)
Blue Rgb(0,0,255)
Black Rgb(0,0,0)
White Rgb(255,255,255)
And so on according to the different shades
Colors in CSS

• By rgb hex color code

• Hex means hexadecimal
• It is composed of 16 digits: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E, and F
• Which 0 is the lowest and F is the highest
 Text
Chapter 4 – Experimenting with Fonts and Colors
Text in CSS

• Together with the font properties, you can control the appearance of the textual content through
these text properties:

• Text-align
• Whose values are: left, right, center, and justify.
• Text-decoration
• Whose values are: overline, line-thorugh, underline, and none
• Text-transform
• Whose values are: capitalize, uppercase, lowercase, and none
Text in CSS

• In addition , selection may be styled with the use of the following properties:

• Letter-spacing
• Refers to the space between letters, whose values are: normal, or _em
• Word-spacing
• Refers to the space between word, whose values are: normal, or _em
• Line-height
• Refers to the space between lines, whose values are: normal, or _% _em
Special Characters and Comment Tags
Chapter 4 – Experimenting with Fonts and Colors