:: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 09
11.09 2015 3 Hours
AGENDA
NECESSARY STYLE REVIEW :: What is CSS? :: The Box Model :: The 3 Style Methods :: Code Hints Handout
INLINE STYLE METHOD :: Syntax :: Background Colors, Borders, and Images :: Element Size & Layout :: Style Text (font, color, size, spacing, etc.) :: Create an HTML Email using Tables & Inline Styles
SINGLE DOCUMENT STYLE METHOD :: Syntax
1 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
NECESSARY STYLE
:: What is CSS? [ recap ] CSS stands for Cascading Style Sheet.
To make HTML elements less boring, you must give them style. Styles change the default appearance of elements on your webpage. Styles may be applied to the majority of HTML elements ( including divs, spans, and images )
The basic syntax for applying a basic style includes an element, property, & value:
AN ELEMENT PROPERTY VALUE Body { background-color : #000000 ; } This is an example of how you would code the style for the body element:
1. Type the element you want to style 2. Followed by an opening curly bracket 3. Type the body’s property you wish to change 4. Followed by a colon 5. Type the value you want the property to be (#000000 = black) 6. Followed by a semicolon 7. Followed by a closing curly bracket
:: The Box Model [ Using “div” Elements & The Inline Style Method ]
What is a DIV?
By default a div (short for division) groups content within a box and extends 100% across the browser screen OR 100% within the element it exists within. It auto expands to fit content (unless assigned a style affecting its default actions, i.e. width, height, overflow, etc.). A div may rest within another div. The tag used for div is:
The Box Model Box Model Exercise [ Using “div” Element ]: A method used to demonstrate the behavior of an HMTL SINGLE DOCUMENT or element and how EXTERNAL STYLESHEET styles (mainly size & position) work div { width:260px; This method may be height:45px; used on other tags: padding:20px;