Designing A Web Page With CSS

How would you link to an external style sheet?

<link href="sa_layout.css" rel="stylesheet" type="text/css" />

What is CSS?

Cascading style sheet. Used to render a document via a style sheet that specifies the appearance of each page element

What is the general syntax for defining a CSS style rule?

selector { property1: value1; property2: value2; .... }

How would we set a text decoration, transform text, or display a font variant of text?

text-decoration: type; wheretype is non, underline, overline or line-through text-transform: type; where type is capitalize, uppercase, lowercase or none font-variant: type; where type is normal or small-caps

What is a pseudo class and what styles are there?

A classification of an element based on its current status, position or use in the document. selector:psuedo-class {styles;} Can have: link (not visited) visited active (being clicked) hover (mouse over) focus (has focus of keyboard or mouse)

What is a contextual selector?

A web page is set up like a hierarchy of pages, and contextual selectors represent the locations of elements within the hierarchy. Parents, children, siblings, descendants

What is !important?

Enforces a style - makes shit bigger and is good for blind folk. property: value !important;

How do we use opacity to do with the coloring?

It defines how much of the colors below the surface of the current object show through to affect its appearance. rgba(red, blue, green, opacity) hsla(hue, saturation, lightness, opacity)

What is inline style, how would we implement it and is it useful?

Styles applied directly to specific elements using the style attribute: <element style="style rules">... </element> It is clear which page element is being edited, but this is not recommended in most cases and considered inefficient

How do we change the font used, or change its size?

Times New Roman is default but we can specify it by: font-family: fonts; fonts is a comma separated list of specific or generic font names. To set a size use font-size: size; where size is a CSS unit of length in either relative or absolute units

How would you define a color, specifically give example to the colors olive and fuchsia!

Uses the red blue green triplet and we can enter them as hexidecimal values. Olive: (128, 128, 0) OR Hexi: 808000 Fuchsia: (255, 0, 255) OR Hexi: FF00FF

How would you set space between letters or words?

Using the following 2 cool commands. letter-spacing: size; word-spacing: size;

What is style inheritance?

Where properties are passed from a parent element to its children. body {color: blue;} h1 {text-align: center;}

What is and how would we implement an embedded style sheet?

Where the styles are inserted directly within the head element of an HTML document using the style element: <style type="text/css"> styles </style>

How would you specify font style or weight?

font-style: type; where type is normal, italic or oblique. font-weight: type; where type is normal, bold, bolder, light, lighter, or a font weight value

How would you combine all text formatting in a single style?

font: font-style font-variant font-weight font-size/line- height font-family;

How would we set background, foreground and text colors?

for background: background-color: color; for foreground and text: color: color;

How would you implement the hue, saturation and lightness triplet?

hsl(hue, saturation, lightness) (fill in the three options as required)

How would you insert a graphic image as a list marker?

list-style-image: url(url); where url is the URL of the graphic image file

How would we set the positions of list markers, define all of the list style properties in a single style, and set the indentation of a list?

list-style-position: position; where position is inside or outside list-style: type url(url) position; and finally.. padding-left: size; where size is teh length that the list should be indented

How would you change the marker displayed in lists? And what are some of the commands?

list-style-type: type; disc, circle, square, decimal, lower-roman, lower-alpha, upper-alpha, none