CSS Basic Syntax/* part 2 */

Using Sample Code

Introduction

This presentation covers Part-2 of a basic introduction to CSS syntax See “HTML Basic Tags” for an introduction to HTML markup See Part-1 to get started with CSS

This presentation is designed to be a next step for learning CSS All you need to get started is a text editor and a browser So, enjoy!

Objectives

With practice, you will be able to: Declare font-family and font properties Recognize differences in serif and sans-serif fonts Identify font names for each major font-family Use different units of measurement for font-size Set font-weight, font-style, and font-variant values Set text properties for alignment, case, and line decoration Set line-height and text-indent properties Set word and letter spacing Create a drop shadow effect

Not Here

See other presentations in this series for Selectors, color, and background properties – Part 1 Margins, borders, and padding – Part 3 Lists, links, and tables - Part 4 Floats, layouts, and positioning elements – Part 5 Working with color – Part 6 Responsive and mobile design – depending on interest CSS3 Effects – depending on interest

Font

font-family font-size font-weightfont-style font-variant

A font is a particular character set belonging to a font-family

A font includes its size, weight, style, and any decoration (next section)

Fonts can dramatically impact the style and presentation of a web page

Fonts are declared with the properties listed opposite

The next few slides cover the values and syntax of each property

Font Family

A font family is a group of related fonts with similar characteristics Font families can be categorized as being with/without serifs Serifs are lines added at the ends of a character Serif fonts tend to be more emphatic – so useful in headings Sans-serif (without serif) fonts are easier to read on screen - so useful in body

text Other font families include Monospace, Cursive, and Fantasy

Font Names

Here are some specific font names for each font-family:

Serif: Georgia, Times New Roman, Palatino Sans-Serif: Arial, Helvetica, Verdana Monospace: Courier New, Courier, Lucida Console Cursive:   Lucida Calligraphy, Lucida Handwriting, Segoe Script Fantasy Chiller,  Harrington, Papyrus

Font-Family

body { font-family: Verdana, Arial, sans-serif ;}

h1, h2, h3 { font-family: "Times New Roman", Times, serif ;}

Font-family values are declared in a comma-separated list

The generic font family name is listed at the end as a fall back default font

Fonts should be listed in a preferred order as the browser will use only the first font found in the list

Quotation marks are required if the font name contains spaces "Times New Roman"

Font Size

Font size can be measured in pixels, percent, and em And with word sizes small, medium, large Or with relative word sizes smaller, larger

Historically font size measures the width of a capital “M” Thus 1em (no space) references the current font size relative to the size of the

“M” The default browser font size is 16 pixels – stated as 16px (no space) So 1em = 16px (unless the base font size is changed)

Pixels

body { font-size: 16px; }

h1 { font-size: 40px; }h2 { font-size: 30px; }h3 { font-size: 20px; }

.small { font-size: 12px; }

Pixels are easy to learn but are fixed and lack flexibility/accessibility

Browser default text is 16 pixels Headings have larger values Headings and text can be inherited

from browser defaults or set in CSS Font sizes can be changed to meet

the design requirements of the page There is no space between the unit

of measure and its value (16px)

“em”

body { font-size: 1em; }

h1 { font-size: 2.5em; }h2 { font-size: 2em; }h3 { font-size: 1.5em; }

.small { font-size: 0.75em; }

em units are more flexible than pixels and scale relative to the base font

Here the base font is declared as 1em (which by default will equal 16px)

The other font sizes are measured as multiples of the base font

Multiples are relative to the parent container (not necessarily the body)

There is no space between the unit of measure and its value (1em)

Percent

body { font-size: 100%; }

h1 { font-size: 200%; }h2 { font-size: 150%; }h3 { font-size: 125%; }

.small { font-size: 90%; }

Percent can also be used in CSS Here the base font is 100% (or

16px) If the base font is changed – then all

other sizes adjust proportionally Relative units are relative to the

base font of the parent container

Combinations

body { font-size: 100%; }

h1 { font-size: 2.5em; }h2 { font-size: 2em; }h3 { font-size: 1.5em; }

.small { font-size: 0.75em; }

Units can be mixed Here, the base font is set in the

body tag as a percentage Other tags are set using ems The body/base font can be set at

any size to start with – depending on the page design requirements

It does not have to be 100% or 16px

Font Weight

A scale from 100 to 900 (in multiples of 100) can be used to specify font weight

Normal is 400 Bold is 700 In between measures can be used to modify these benchmarks Keywords normal and bold correspond to 400 and 700 Keywords lighter and darker are relative to the current font weight

Font-Weight

body { font-weight: normal; } h1, h2, h3 { font-weight: 900; }

.note { font-weight: bold; }

.light { font-weight: lighter; }

.dark { font-weight: darker; }

Font weight is simple and easy to set

The keyword bold is used most often

Other weights are subtle variations or relative adjustments

Here, in these samples: Headings are darker than 700 The note class is made bold The light class is made lighter The dark class is made darker

Font-Style

body { font-style: normal; }

h1, h2, h3 { font-style: italic;

}

.note { font-style: oblique; }

Font style can be normal, italic, or oblique

Oblique is often rendered as italic

Normal is the default and can be used as a reset

Font-Variant

body { font-variant: normal; }

h1, h2, h3 { font-variant: small-caps;

}

.smcap { font-style: small-caps; }

Font variant can be normal or set to small-caps

Normal is the default and can be used as a reset

Text properties are used to set other case settings (lower/upper case)

Font Shorthand

body { font: 16px Verdana, Arial, sans-serif ; } h1, h2, h3 { font: italic small-caps bold "Times New Roman", Times, serif ;}.smcap { font: small-caps; }

Font values can be listed in a single declaration using the font property

The list of values is space separated – except for the font family declaration

A single closing semicolon is used The order of the values is important:

style variant weight size family Individual values can be omitted but

the sequence must be maintained

Summary 1

A font is a named character set belonging to a font-family There are five generic font families

Serif fonts have extenders at the end of characters (serifs) Sans-serif (without serif) do not Other font families include Monospace, Cursive, and Fantasy

Font-family values are declared in a comma-separated list with the generic font family name listed last

Quotation marks are required if the font name contains spaces The browser uses only the first font found in the list

Summary 1

Font size can be measured in pixels, percent, and em And with word sizes small, medium, large and smaller, larger Pixels are easy to learn but are fixed and lack flexibility/accessibility em units are more flexible and are expressed as multiples of the parent

container Default size is 16px so 1em = 16px (the size of a capital “M”) There is no space between the unit of measure and its value (16px) (1em) Percent can also be used in CSS – where the default 100% is 16px Units can be mixed Font sizes change to meet the design requirements of the page

Summary 1

Font weight can be expressed as a number - 100 to 900 (in multiples of 100) where normal is 400 and bold is 700

Keywords normal and bold correspond to 400 and 700 Keywords lighter and darker are relative to the current font weight The keyword bold is used most often Font style can be normal, italic, or oblique Font variant can be normal or small-caps Normal is the default for style and variant but can be used as a reset Text properties are used to set other case settings (lower/upper case)

Summary 1

The shorthand notation uses a single declaration using the font property Values are space separated – except for the font family declaration The font family is in a comma separated list A single closing semicolon is used The order of the values is important: style variant weight size family Individual values can be omitted but the sequence must be maintained

Text Properties

text-alignvertical-align

text-decorationtext-transform

text-indentline-height

letter-spacingword-spacing

Here are some basic text properties to get you started

They do what they indicate with some notable exceptions

See the next slides for more details Color is also a related “text”

property (see CSS Part-1) Fonts are also related to text but

deal more specifically with character style

Text Align

.search { text-align: right;

}

.special { text-align: justify;

}

.footnote { text-align: center;

}

The text-align property aligns text horizontally within its container

Horizontal alignment values include:left, right, center, justify

Vertical Align

td { vertical-align: top;

}

td.special { vertical-align: middle;

}

td.footnote { vertical-align: bottom;

}

The vertical-align property has some limitations

It is used to align text vertically within table cells – not in other containers

It is also used with inline elements such as images to align them with text flow

Vertical alignment values for table cells include: top, middle, bottom

Text Decoration

.note { text-decoration: underline ;

}

.totals { text-decoration: overline ;

}

.edit { text-decoration: line-

through ; }

Text decoration refers to enhancing text with line decoration

Text decoration values include:underline, overline, and line-through

Default is none – which can also be used as a reset

Text Transform

.note { text-transform: uppercase;

}

.alpha { text-transform: lowercase;

}

.title { text-transform: capitalize;

}

The text-transform property sets the capitalization of text

Values include:uppercase, lowercase, capitalize

Capitalize is used for names or titles where every first letter is capitalized

Text Indent and Line Height

p.semi { text-indent: 50px;line-height: 1.5;

}

p.full { text-indent: 10%;line-height: 2em;

}

The text-indent property indents only the first line of a paragraph

Any measurement units can be used to set the amount of indent

The line-height property can be used with measurement units or declared as a multiple – such as 1, 1.5, or 2 for single, one-and-half, or double line-spacing

Letter and Word Spacing

p.loose { letter-spacing: 2px;word-spacing: 2px;

}

p.compressed { letter-spacing: -1px;word-spacing: -1px;

}

Letter an word spacing can be used to change default line/word spacing

Any of the measurement units can be used (pixels, percent, em)

Units can be positive or negative

Summary 2

The text-align properties can be used to change the default top-left positioning of text – relative to its container – or as a reset

The vertical-align properties only work on text in table cells – but can be used for inline elements such as images to align with text flow

text-align - left, right, center, justify vertical-align - top, middle, bottom

Summary 2

The text-decoration property can be used to apply different line styles to text text-decoration - overline, underline, line-through, none

The text-transform property can be use to set the capitalization of text text-transform - uppercase, lowercase, capitalize, none

Summary 2

The text-indent property can be used to indent the first line of a paragraph It indents only the first line of text text-indent - in any measurement unit

The line-height property can be used to change the default line spacing to a specified value – or as a multiple for single, double, and 1.5 line heights

line-height - in any measurement unit – or as a multiple (1, 1.5, 2)

Summary 2

The letter-spacing and word-spacing properties adjust the spacing between letters and words depending on style requirements

Units can be positive or negative in px, percent, or em

letter-spacing - in any measurement unit word-spacing - in any measurement unit

Text Shadow

h1 {text-shadow: 2px, 2px, grey

; }

A text-shadow adds a special effect to text – suitable for headings

A comma-separated list of values is used to be apply the shadow to text

The order is horizontal-shift, vertical-shift, and color

An optional blur value can be added

Review

How did you do? Are you able to: Declare font-family and font properties Recognize differences in serif and sans-serif fonts Identify font names for each major font-family Use different units of measurement for font-size Set font-weight, font-style, and font-variant values Set text properties for alignment, case, and line decoration Set line-height and text-indent properties Set word and letter spacing Create a drop shadow effect

s l i d e d e c k b yPe t e r Ru s h t o n

isharebyme @gmail.com