3.02 basic css properties notes

8/15/2019 3.02 Basic CSS Properties Notes

http://slidepdf.com/reader/full/302-basic-css-properties-notes 1/4

3.02 Basic CSS Properties NotesBasic Tags

Inline Style Creates an inline style. Code is placed inside the opening tag of the desiredtag.

style=”property: value”Ea!ple: "p style=”color:re#”$

Internal Style S%eet Creates an internal style sheet. Code is placed in the <head>section.

"style type=”tet&css”$%r 'color: re#()"&style$

Eternal Style S%eet Links the webpage to an external style sheet."%ea#$"lin* rel=+styles%eet+ type=+tet&css+ %re,=+!ystyle.css+ &$"&%ea#$

Bo#y Styles-ac*groun#color:yello/( Sets the background color.

-ac*groun#i!age:url1paper.gi,1( Sets the background to an image.

Tet Styles

color:re#( Changes the text color. Values: name hexadecimal !"ff####$ rgb!%&&##$.

tetalign:center( 'ligns the text hori(ontally. Values: left right center )ustify.

tet#ecoration:un#erline( *nderlines text..

tetin#ent:0p( +ndents text from the left.

tettrans,or!:uppercase( Controls capitali(ation. Values: none capitali(e

uppercase lowercase.4ont Styles

,ont,a!ily:arial( Sets the typeface for text. ,ypefaces with multiple words in theirname should be enclosed inside -uotes. Values: font name generic name !serif sansserif cursi/e fantasy monospaced$

,ontsi5e:6007( Sets the font si(e. Values: xxsmall xsmall small medium large xlarge xxlarge smaller larger 0

,ontstyle:nor!al( Sets the font style for paragraphs. Values: normal italic obli-ue.

8in* Styles

a:lin* 'color:9440000() Sets color for an un/isited link.

a:visite# 'color:9440000() Sets color for an /isited link.a:%over 'color:9440000() Sets color for a mouse o/er link.a:active 'color:9440000() Sets color for the selected link.

8ist Styles

liststylei!age:urli!age.gi,”( Sets list item marker to an image.

liststyletype: Sets the item marker type. Values: none circle disc s-uare decimalloweralpha lowergreek lowerlating lowerroman upperalpha upperlatin upper



roman

' list of CSS properties can be found online at:http:11www.w2schools.com1css1css3reference.asp

http://www.w3schools.com/css/css_reference.asp

http://www.w3schools.com/css/css_reference.asp



3.02 CSS Internal Style S%eet ;ctivity 4ame 333333333333333333333

5etrie/e the 6,7L webpage that you created in 2.#% Creating an 6,7L 8ebpage !7y6,7L 8ebpage$. Create a CSS internal style sheet that will apply the features in thechart below to the entire page. 's needed refer to the 2.#% CSS ,utorial 4otes that

you completed or the 82Schools CSS ,utorialhttp:11www.w2schools.com1css1default.asp and CSS reference charts posted on the site.Complete the indi/idual steps below and then show the coding for the entire style sheetin the last cell.

Style Co#e

Define Internal StyleSheet (within headsection)

Text color green

Text alignment center

Font-family Verdana

Text size 16 ixels

Show !omlete InternalStyle Sheet !oding

8hen you ha/e completed the internal style sheet coding exchange your code withanother student. 9ach student should e/aluate the other students code checking forcorrect coding for each item in the checklist abo/e. ;i/e the other student constructi/efeedback about his1her CSS style sheet coding.

http://www.w3schools.com/css/default.asp




3.02 CSS Internal Style S%eet ;ctivity<ey

5etrie/e the 6,7L webpage that you created in 2.#% Creating an 6,7L 8ebpage !7y6,7L 8ebpage$. Create a CSS internal style sheet that will apply the features in thechart below to the entire page. 's needed refer to the 2.#% CSS ,utorial 4otes that

you completed or the 82Schools CSS ,utorialhttp:11www.w2schools.com1css1default.asp and CSS reference charts posted on the site.Complete the indi/idual steps below and then show the coding for the entire style sheetin the last cell.

Style Co#e

Define Internal StyleSheet

"%ea#$"style type=+tet&css+$ >(insert coding "elow)"&style$"&%ea#$

Text color green -o#y 'color:green()

Text alignment center p 'tetalign:center()

Font-family #$cida!onsole

p ',ont,a!ily:+8uci#a Console+()

Text size 16 ixels p ',ontsi5e:6?p()

Show !omlete InternalStyle Sheet !oding

"%ea#$"style type=+tet&css+$-o#y 'color:green(tetalign:center(,ont,a!ily:+8uci#a Console+(,ontsi5e:6?p()"&style$"&%ea#$



3.02 basic css properties notes

Documents