Client-Side Web TechnologiesCSS Part III

Topics

• Color and background properties

• Font and text properties

• Table properties

• Transforms

• Transitions and Animations

Color Property• Specifies the color of an element’s text content

• color

• Value: color | inherit

• Initial: varies among browsers

• Inherited: yes

• Examples:• color: red;

• color: #efefef;

• color: rgb(255, 0, 0)

Background Color Property• Specifies the color of an element’s background

• background-color

• Value: color | inherit

• Initial: transparent

• Inherited: no

• Examples:• background-color: red;

• background-color: #efefef;

• background-color: rgb(255, 0, 0)

Background Image Property• Specifies the background image(s) of an element

• background-image

• Value: [ image | none [ , image | none ]* ] | inherit

• Initial: none

• Inherited: no

• Examples:• background-image: url(‘sompic.jpg’);

• background-image: url(‘abc.jpg’), url(‘123.jpg’);

Background Repeat Property• Specifies how background images are tiled

• <repeat-style> = repeat-x | repeat-y | [ repeat | no-

repeat ]{1,2}

• background-repeat

• Value: [ <repeat-style> [ , <repeat-style> ]* ] | inherit

• Initial: repeat

• Inherited: no

• repeat: image is tiled to fill area

• no-repeat: image is placed once and not repeated

Background Size Property• Specifies the size of background images

• <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover

| contain

• background-size

• Value: [ <bg-size> [ , <bg-size> ]* ] | inherit

• Initial: auto

• Inherited: no

• contain: scale image to largest size such that width and

height fit and aspect ratio is maintained

• cover: scale image to smallest size such that width and

height completely cover and aspect ratio is maintained

• When length or percentages are given, first value is width

and second value is height

Background Attachment Property• Specifies whether a background image is fixed with respect

to viewport or the element

• <attachment> = scroll | fixed

• background-attachment

• Value: [ <attachment> [ , <attachment> ]* ] | inherit

• Initial: scroll

• Inherited: no

• fixed: background is fixed with respect to viewport

• scroll: background is fixed with respect to element

Background Position Property• Specifies the position of a background image

• Has somewhat elaborate syntax:

• http://www.w3.org/TR/css3-background/#background-position

Other Background Properties

• http://www.w3.org/TR/css3-background/#background-clip

• http://www.w3.org/TR/css3-background/#background-origin

Background Shorthand Property• <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> ||

<attachment>

• <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? ||

<repeat-style> || <attachment> || <background-color>

• background

• Value: [ [ <bg-layer> , ]* <final-bg-layer> ] | inherit

• See:• http://codepen.io/jmussitsch/pen/ad72e67429e52816768eae3a2cc516f2

• http://codepen.io/jmussitsch/pen/8775b40e02f5a9083f83c69b4657ae76

Gradients• Can use gradients where an image is expected

• E.g. background-image property

• http://www.w3.org/TR/css3-images/#gradients

• Linear gradients

• Radial gradients

• See http://codepen.io/jmussitsch/pen/a31a7ec53d6dcd3bedf85abf8cd0fd30

Font Family Property• Prioritized list of fonts

• font-family

• Value: [ [ family | generic ] [, family | generic ]* ] | inherit

• Initial: depends on user agent

• Inherited: yes

• Family

• The name of a specific font family

• E.g. Verdana, Times, Helvetica, Courier, etc.

• Generic

• The name of a generic family

• E.g. serif, sans-serif, monospace

• Interesting resource on CSS typography:

http://sixrevisions.com/css/css-typography-01/

Font Style Property• Selects between normal, italic, and oblique font faces

• font-style

• Value: normal | italic | oblique | inherit

• Initial: normal

• Inherited: yes

Font Weight Property• Selects the weight of the font

• font-weight

• Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400

| 500 | 600 | 700 | 800 | 900 | inherit

• Initial: normal

• Inherited: yes

• The values from 100 to 900 form an order sequence where

each number indicates a weight that is at least as dark as

the one before it

• normal = 400

• bold = 700

• bolder and lighter values select font weights that are

relative to the weight inherited from the parent

Font Size Property• Specifies the size of the font

• font-size

• Value: absolute | relative | length | percentage | inherit

• Initial: medium

• Inherited: yes

• Absolute are values of font sizes kept by the user agent that map to actual sizes (small, medium, large, etc.)

• Relative values (larger | smaller) are relative to the

parent element’s font size

Web Fonts• The @font-face at-rule allows for linking to local or

external font resources

• Example:@font-face {

font-family: ‘Gentium’;

src: url(‘http://example.com/fonts/

Gentium.ttf’);

}

p { font-family: ‘Gentium’, serif; }

• More information: http://www.w3.org/TR/css3-fonts/#font-resources

• Google Fonts: https://fonts.google.com/

• There are UX and performance considerations to keep in mind

Font Shorthand Property• font

• Value: [ [ font-style || font-weight ]? font-size [ / line-height ]?

font-family ] | inherit

• Examples:

• font: 12px/14px sans-serif

• font: italic bold 14px Verdana

• font: 16px “Times New Roman”

• See http://codepen.io/jmussitsch/pen/92f84c04b2d9638c38fcd10fa5975367

Line Box Height Calculations• Remember, in an inline formatting context the rectangular

areas that contain the boxes that form lines are called line

boxes

Containing Block

Line Box

Line Box Height Calculations• There are rules that determine the height of these line boxes

1. The height of each inline-level box is calculated (replaced and inline-

block elements use the height of their margin box, inline boxes use

their line-height)

2. Inline-level boxes are aligned vertically according to their vertical-align

property

3. The height of the line box is the distance between the uppermost box

top and the lowermost box bottom

Line Box Height Calculations (continued)• CSS assumes that every font has metrics that define a

characteristic height above the baseline (A) and a depth below it

(D)

• AD = A + D, the distance from the top to the bottom (font size)

• The leading (L) to add = line-height property value – AD

• Half the leading is added above A and the other half below D

Source: http://www.w3.org/Talks/2008/0911-CSS-Amsterdam/

Line Height Property• On a block container element, specifies the minimal height of

line boxes within the element

• On a non-replaced inline element, specifies the height used

in the calculation of the line box height

• line-height

• Value: normal | number | length | percentage | inherit

• Initial: normal

• Inherited: yes

• A value of normal tells a user agent to use a “reasonable”

value based on the font of the element (recommended 1.0 to

1.2)• See http://codepen.io/jmussitsch/pen/902a9941a4e519b481206675cb540639

Vertical Align Property• Specifies the vertical positioning inside a line box

• vertical-align

• Value: baseline | sub | super | text-top | middle |

bottom | text-bottom | length | percentage | inherit

• Initial: baseline

• Inherited: no

• A value of baseline aligns the baseline of the box with the

baseline of the parent box (the baseline of an inline-block

element is generally the baseline of its last line box)

• Other values are explained in detail here:

• http://www.w3.org/TR/CSS2/visudet.html#leading

• See http://codepen.io/jmussitsch/pen/cdd3d96f8044f822444b29a3e3a680b2/

Text Indent Property• Specifies indentation of the first box in a block container

box’s first line box

• text-indent

• Value: length | percentage | inherit

• Initial: 0

• Inherited: yes

Text Align Property• Specifies how inline-level content of a block container box is

horizontally aligned

• text-align

• Value: left | right | center | justify | inherit

• Initial: left (for left-to-right text direction)

• Inherited: yes

Text Decoration Property• Specifies decorations added to text

• text-decoration

• Value: none | [ underline || overline || line-through || blink ]

| inherit

• Initial: none

• Inherited: sometimes (see the specification)

• A value of none produces no text decoration

• A value of underline underlines each line of text

• A value of overline causes a line to be rendered above each line of text

• A value of line-through causes each line of text to have a line through

the middle

• A value of blink may cause text to alternate between visible and

invisible

Text Shadow Property• Attaches one or more drop-shadows to text

• <shadow> = [ length{2,3} && color? ]

• text-shadow

• Value: none | <shadow> [, <shadow> ]*

• Initial: none

• Inherited: yes

• Length values:

• The 1st length is the horizontal offset of the shadow (+ is right, - is left)

• The 2nd length is the vertical offset (+ is down, - is up)

• The 3rd length is the blur radius (the > the value the more blur)

• Color is the color of the shadow

Letter Spacing Property• Specifies spacing between text characters

• letter-spacing

• Value: normal | length | inherit

• Initial: normal

• Inherited: yes

• A value of normal is the normal spacing for the current font

• Length is inter-character spacing in addition to the default space

between characters

Word Spacing Property• Specifies spacing between words

• word-spacing

• Value: normal | length | inherit

• Initial: normal

• Inherited: yes

• A value of normal is the normal inter-word spacing for the current font

• Length is inter-word spacing in addition to the default space between

words

White Space Property• Specifies how white space inside the element is handled

• white-space

• Value: normal | pre | nowrap | pre-wrap | pre-line | inherit

• Initial: normal

• Inherited: yes

• A value of normal collapses sequences of white space and breaks lines as

necessary to fill line boxes

• A value of pre will not collapse sequences of white space and will only break lines

at preserved newline characters

• A value of nowrap collapses white space but suppresses line breaks

• A value of pre-wrap will not collapse sequences of white space and lines are

broken at preserved newline characters and to fill line boxes as necessary

• A value of pre-line will collapse sequences of white space and lines are broken at

preserved newline characters and to fill line boxes as necessary

• See http://codepen.io/collection/81101b92f534224b445f1afa25fa1b8c/

Tables

• We will briefly go over a few table-related styles

• More information:

• http://www.w3.org/TR/CSS2/tables.html

Table Layout Property• Specifies the table layout algorithm to use

• table-layout

• Value: auto | fixed | inherit

• Initial: auto

• Inherited: no

• The fixed layout algorithm determines the horizontal layout of the table

using the width of the table, the width of the columns, borders, and cell

spacing

• The automatic layout algorithm determines the horizontal layout based on

the widest cell in each column (plus borders)

Border Collapse Property• Specifies how borders are rendered for the table

• border-collapse

• Value: collapse| separate | inherit

• Initial: separate

• Inherited: yes

• The separate value indicates that a border should be drawn around the

table and around each cell

• The collapse value indicates that borders should not be drawn on every

edge of adjacent elements in the table

• See http://codepen.io/jmussitsch/pen/0b2c1e002f651a827e91c78a90d534d9/

Transforms

• Allows elements to be transformed in 2D or 3D

space

• Generally applies to block-level or atomic inline-level

elements

• http://www.w3.org/TR/css3-2d-transforms/• See http://codepen.io/jmussitsch/pen/1fabbae1becfa47e0b2246f6dfd6c17b

Transitions

• Allow property changes in CSS values to occur

smoothly over a specified duration without using

scripts

• http://www.w3.org/TR/css3-transitions/• See http://codepen.io/jmussitsch/pen/ef4616e32cb925ea9d52af681d229ad9

Animations

• Allows animating of CSS property values over time

• http://www.w3.org/TR/css3-animations/• See http://codepen.io/jmussitsch/pen/140a1d5294337698c29c05010c9d3e07

We have only scratched the

surface...

More Stuff!• SASS

• CSS extension language

• http://sass-lang.com/

• Bootstrap

• Very popular HTML/CSS/JS framework for

developing responsive web apps

• http://getbootstrap.com/

• CSS Tricks

• Blog site for all things CSS

• http://css-tricks.com/