all homework refers to this setup of inclass1 folder and assets subfolder Chapter 4: pg.129 px pt em % 5 common number for px Common units of measure pg.129 pg.130: Colors ~~ RGB Basic colors 131 Colors may look good on one display and look horrible on other screen to get around this: dont use color name, use RGB. Monitors are RGB. Hex too. Hex starts with # pound sign. such as #00f or #00000f pg. 132-133 RGBA values. HSLA values give a little bit more: opacity, hue, saturation, lightness We'll do a lot of opacity with images. Define stage: what am i going to do? Design stage: where am i going to place what I want to do? Done off machine Two sessions before its due is not a place to start. Read online book (refer to notes) Pg.146 https://www.w3schools.com/css/css_text.asp CSS Text Serif San-Serif Her favorite: has curly que TNR (Times New Roman) ~~ Doesn't go by this monicor in order to use a font, im using a font family pg.147 font-family: "Times New Roman", Times, serif; " " has quotation because spaces are involved. font-family: "Courier New", Courier, monospace; Think about my aidoence pg.149 //normal, italic, and oblique ~~ Forget oblique, rely on italic font-style: italic; font-style: normal font-weight //bold is most common //If I wish to use them, not used often font-variant line-height https://www.w3schools.com/css/css_text.asp To change text: use color rule https://www.w3schools.com/css/tryit.asp?filename=trycss_color

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.

Setting specific parts to a specific color I can cang ethis body { color: blue; } to p { color: blue; } is same thing

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.

p { color: yellow; } h1 { color: orange; } CSS coding is embedded inside the Offlimits == body , I have to write the in the Classes, IDs will be covered later. Two paragraphs, alternate colors each~~

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.

IDS && Classes #p1 , #p2 (CSS)

//within opening tag

//:D text align comes in four flavors center left (Default) right Images cannot be text aligned except within the nav tag and someone went to lunch early (in other words, NO) dont use text align with horizontal rule https://www.w3schools.com/css/tryit.asp?filename=trycss_text-align

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

The three headings above are aligned center, left and right.

Text Decoration == anchor tag text transformation and how little its used is up to me https://www.w3schools.com/css/css_font.asp Times new roman is to be liked Font family p { font-family: "Times New Roman", Times, serif; } https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body

Hello World!

This page has a light blue background color!

https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body

Hello World!

This page has a light blue background color!

Hello World!

This page has a light blue background color!

https://www.w3schools.com/css/css_border.asp Solid, outset, double Shorthand: How wide? what kind of border? whats the color? seperated by a blank I can write long hand: border style, width, ~~~ and it could work THIS is a lot simpler p { border-style: dotted solid; } Do not leave out border style if i want border Horizontal rule: margins auto https://www.w3schools.com/css/css_margin.asp To bottum left right Quite often specify left and right margin-top margin-right margin-bottom margin-left p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } or % or ems p { margin: 25px 50px 75px 100px; } No blank between value If I want all four then I give it one value p { margin: 25px; } or three p { margin: 25px 50px 75px; } top margin is 25px right and left margins are 50px bottom margin is 75px Margin == distance between each tag Allowing page layouts Padding https://www.w3schools.com/css/css_padding.asp The space around the content Four of them, usually give one value for all div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } My turn: Dreamweaver: site>new site Make sure dreamweaver is standard and not developer petersburg.txt view word format file>new html>html5>create css designer plus sign define in page bring in piece by piece bring in txt , not wordpad