+ All Categories
Home > Documents > 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type....

1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type....

Date post: 27-Dec-2015
Category:
Upload: jayson-carpenter
View: 215 times
Download: 2 times
Share this document with a friend
43
To Create an Internal To Create an Internal Style Sheet Style Sheet 1. 1. At the top of your HTML document, between the At the top of your HTML document, between the <HEAD> and </HEAD> tags type <HEAD> and </HEAD> tags type < < STYLE STYLE > > . . 2. 2. Type the name of the tag whose properties you Type the name of the tag whose properties you wish to define ( wish to define ( H1 H1 , , P P or whatever). or whatever). 3. 3. Type Type { { to mark the beginning of this tag’s to mark the beginning of this tag’s properties. properties. 4. 4. Define as many properties as desired for this Define as many properties as desired for this tag, using the steps described in slides 12 tag, using the steps described in slides 12 to 43. Separate each property with a semi- to 43. Separate each property with a semi- colon. colon. 5. 5. Type Type } } to mark the end of this tag’s to mark the end of this tag’s properties. properties. 6. 6. Repeat steps 2-5 for each tag for which you Repeat steps 2-5 for each tag for which you wish to define properties. wish to define properties. 7. 7. Type Type </STYLE> </STYLE> to complete the style sheet. to complete the style sheet.
Transcript
Page 1: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

11To Create an Internal To Create an Internal

Style SheetStyle Sheet1.1. At the top of your HTML document, between the At the top of your HTML document, between the

<HEAD> and </HEAD> tags type <HEAD> and </HEAD> tags type <<STYLESTYLE>>..

2.2. Type the name of the tag whose properties you Type the name of the tag whose properties you wish to define (wish to define (H1H1, , PP or whatever). or whatever).

3.3. Type Type {{ to mark the beginning of this tag’s to mark the beginning of this tag’s properties.properties.

4.4. Define as many properties as desired for this Define as many properties as desired for this tag, using the steps described in slides 12 to tag, using the steps described in slides 12 to 43. Separate each property with a semi-colon.43. Separate each property with a semi-colon.

5.5. Type Type }} to mark the end of this tag’s properties. to mark the end of this tag’s properties.

6.6. Repeat steps 2-5 for each tag for which you Repeat steps 2-5 for each tag for which you wish to define properties.wish to define properties.

7.7. Type Type </STYLE></STYLE> to complete the style sheet. to complete the style sheet.

Page 2: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

22To Create an External To Create an External

Style SheetStyle Sheet1.1. Create a new text document.Create a new text document.

2.2. Type the name of the tag whose properties you wish Type the name of the tag whose properties you wish to define (to define (H1H1, , PP, or whatever)., or whatever).

3.3. Type Type {{ to mark the beginning of the tag’s to mark the beginning of the tag’s properties.properties.

4.4. Define as many properties as desired for this tag, Define as many properties as desired for this tag, using the steps described in Slides 12 - 41. Separate using the steps described in Slides 12 - 41. Separate each property with a semi-colon.each property with a semi-colon.

5.5. Type Type }} to mark the end of this tag’s properties. to mark the end of this tag’s properties.

6.6. Repeat steps 2-5 for each tag for which you wish to Repeat steps 2-5 for each tag for which you wish to define properties.define properties.

7.7. Save the document in Text Only format in the Save the document in Text Only format in the desired directory. Give the document the desired directory. Give the document the extension extension .css.css to designate the document as a to designate the document as a Cascading Style Sheet.Cascading Style Sheet.

Page 3: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

33Using an External Style Using an External Style

SheetSheet

1.1. In the HEAD section of each and every HTML In the HEAD section of each and every HTML page in which you wish to use the style page in which you wish to use the style sheet, type sheet, type <LINK REL=stylesheet TYPE <LINK REL=stylesheet TYPE =“text/css”=“text/css”..

2.2. Type HREF = “url.css”Type HREF = “url.css”, where , where urlurl.css is the .css is the name you used in step 7 on slide 2.name you used in step 7 on slide 2.

3.3. Type the final Type the final >>..

Page 4: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

44Applying Styles LocallyApplying Styles Locally

1.1. Within the HTML tag that you want Within the HTML tag that you want to format, type to format, type STYLE=“STYLE=“..

2.2. Type Type property:valueproperty:value, using the , using the steps described in Slides 12 – 43.steps described in Slides 12 – 43.

3.3. To create additional style To create additional style definitions, type a semicolondefinitions, type a semicolon;; and and repeat step 2.repeat step 2.

4.4. Type the final quote markType the final quote mark ““..

Page 5: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

55Defining Styles for classesDefining Styles for classes

1.1. Mark the elements in your HTML page that belong Mark the elements in your HTML page that belong to the class by adding to the class by adding CLASS=classnameCLASS=classname (where (where classnameclassname is the identifying word for the class) to is the identifying word for the class) to the appropriate HTML tags.the appropriate HTML tags.

2.2. In the STYLE section of your HTML page, type In the STYLE section of your HTML page, type parenttag.classnameparenttag.classname, where , where parent-tagparent-tag is the tag is the tag that the class is a subset of, and that the class is a subset of, and classnameclassname is the is the same as in step 1.same as in step 1.

3.3. Type a curly bracket Type a curly bracket {{ to begin definitions. to begin definitions.4.4. Type property:valueType property:value to specify the additional to specify the additional

properties that should be applied to elements of properties that should be applied to elements of this class.this class.

5.5. If desired, type a semicolon If desired, type a semicolon ; ; and then specify and then specify additional properties and values (See Slides 12 – additional properties and values (See Slides 12 – 43).43).

6.6. Type a right curly bracket Type a right curly bracket }} to complete the class to complete the class definition.definition.

Page 6: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

66Identifying Particular TagsIdentifying Particular Tags

1.1. Identify the element in your HTML page by adding Identify the element in your HTML page by adding ID=idnameID=idname (where (where IdnameIdname is the identifying word is the identifying word for the tag) to the appropriate HTML tag.for the tag) to the appropriate HTML tag.

2.2. In the STYLE section of your HTML page, type In the STYLE section of your HTML page, type parenttag#idnameparenttag#idname, where , where parenttagparenttag is the kind of is the kind of HTML tag that is identified with the ID attribute, HTML tag that is identified with the ID attribute, and and idnameidname is the same as in step 1. is the same as in step 1.

3.3. Type a curly bracket Type a curly bracket {{ to begin the definitions. to begin the definitions.

4.4. Type Type property:valueproperty:value to specify the additional to specify the additional properties that should be applied to elements of properties that should be applied to elements of this class.this class.

5.5. If desired type a semicolon If desired type a semicolon ; ; and then specify and then specify additional properties and values (See slides 12-43).additional properties and values (See slides 12-43).

6.6. Type a right curly bracket Type a right curly bracket }} to complete the ID to complete the ID definition.definition.

Page 7: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

77Creating Custom Block-Level Creating Custom Block-Level

HTML TagsHTML Tags1.1. In the STYLE section at the top of your HTML In the STYLE section at the top of your HTML

document or in an external style sheet, type document or in an external style sheet, type DIV.classnameDIV.classname, where , where classnameclassname is the identifying is the identifying word for the class you’re going to use. word for the class you’re going to use.

2.2. Or type Or type DIV#IdnameDIV#Idname, where , where IDnameIDname is the is the identifying word for this particular instance of the identifying word for this particular instance of the DIV tag.DIV tag.

3.3. Type Type {property:value{property:value, using the information on , using the information on Slides 12 – 43.Slides 12 – 43.

4.4. Create additional definitions, if desired, separating Create additional definitions, if desired, separating each with a each with a ;.;.

5.5. Add the final Add the final }}

Page 8: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

88Using Custom Block-Level Using Custom Block-Level

HTML TagsHTML Tags

1.1. At the beginning of the desired section of your At the beginning of the desired section of your document, type document, type <DIV<DIV..

2.2. Type Type CLASS=“classnameCLASS=“classname”, where ”, where classnameclassname identifies the type of section.identifies the type of section.

3.3. Or type Or type ID=“idname”ID=“idname”, where , where idnameidname identifies this particular section.identifies this particular section.

4.4. Type the final Type the final >>..

5.5. Create the contents of this section.Create the contents of this section.

6.6. At the end of the desired section, type At the end of the desired section, type </DIV></DIV>..

Page 9: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

99Creating Custom Inline HTML Creating Custom Inline HTML

TagsTags

1.1. In the STYLE section at the top of your HTML In the STYLE section at the top of your HTML document or in an external style sheet, type document or in an external style sheet, type SPAN.classnameSPAN.classname, where , where classnameclassname is the is the identifying word for the class you’re going to use.identifying word for the class you’re going to use.

2.2. Or type Or type SPAN#idnameSPAN#idname, where , where idnameidname is is the word that identifies the particular text.the word that identifies the particular text.

3.3. Type Type {property:value{property:value, using the information on , using the information on slides 12 – 42.slides 12 – 42.

4.4. Create additional definitions, if desired, Create additional definitions, if desired, separating each with a separating each with a ;;

5.5. Add the final Add the final }}..

Page 10: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1010Using Custom Inline HTML Using Custom Inline HTML

TagsTags

1.1. At the beginning of the desired words type At the beginning of the desired words type <SPAN<SPAN..

2.2. Type Type CLASS = “classnameCLASS = “classname”, where ”, where classnameclassname identifies the type of text. identifies the type of text.

3.3. Or type Or type ID=“idname”ID=“idname”, where , where idnameidname identifies this particular text.identifies this particular text.

4.4. Type the final Type the final >>..

5.5. Create the text you wish to affect.Create the text you wish to affect.

6.6. Type Type </SPAN></SPAN>..

Page 11: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1111Defining Styles for LinksDefining Styles for Links

1.1. Type Type AA::

2.2. Type Type linklink to change the appearance of links that haven’t to change the appearance of links that haven’t yet been or currently aren’t being clicked or pointed at.yet been or currently aren’t being clicked or pointed at.

Or type Or type visitedvisited to change the appearance of the links that to change the appearance of the links that the visitor has already clicked.the visitor has already clicked.

Or typeOr type active active to change appearance of links when clicked. to change appearance of links when clicked.

Or type Or type hoverhover to change appearance of links when pointed to change appearance of links when pointed to.to.

3.3. Type a curly bracket Type a curly bracket {{ to begin the definitions. to begin the definitions.

4.4. Type Type property:valueproperty:value to specify how the links should look. to specify how the links should look. You might try changing the color (silde19), the background You might try changing the color (silde19), the background color (slide20), and the underlining (slide 24).color (slide20), and the underlining (slide 24).

5.5. If desired type a semicolon; and then specify additional If desired type a semicolon; and then specify additional properties and values.properties and values.

6.6. Type a right curly bracket Type a right curly bracket }} to complete the link definition. to complete the link definition.

Page 12: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1212Choosing a Font FamilyChoosing a Font Family

1.1. Type Type font-family:familynamefont-family:familyname, , where where familynamefamilyname is your first is your first choice of font.choice of font.

2.2. If desired type If desired type , familyname2, familyname2, , where where familyname2 familyname2 is your is your second font choice, Separate each second font choice, Separate each choice with a comma and a space.choice with a comma and a space.

3.3. Repeat step 2 as desired.Repeat step 2 as desired.

Page 13: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1313Embedding Fonts on a Embedding Fonts on a

PagePage

1.1. Type Type @fontface {font-family: “.@fontface {font-family: “.2.2. Type the full name of the font Type the full name of the font

that you wish to embed.that you wish to embed.3.3. Type Type “;src: url(“;src: url(..4.4. Type the URL of the font.Type the URL of the font.5.5. Type Type )})}..6.6. Use the font name from step 2 in Use the font name from step 2 in

other style definitions, as desired.other style definitions, as desired.

Page 14: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1414Creating ItalicsCreating Italics

1.1. Type Type font-style:font-style:..2.2. Type Type obliqueoblique for oblique text, or for oblique text, or

italicitalic for italic text. for italic text.

To remove italics:To remove italics:1.1. Type Type font-style:font-style:..2.2. Type Type normalnormal..

Page 15: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1515Applying Bold FormattingApplying Bold Formatting

1.1. Type Type font-weight:font-weight:..2.2. Type Type boldbold to give an average bold weight to give an average bold weight

to the text.to the text.3.3. Or type Or type bolderbolder or or lighterlighter to use a value to use a value

relative to the current weight.relative to the current weight.4.4. Or type a multiple of Or type a multiple of 100100 between 100 between 100

and 900, where 400 represents book and 900, where 400 represents book weight and 700 represents bold.weight and 700 represents bold.

To remove bold formatting:To remove bold formatting:1.1. Type Type font-weightfont-weight..2.2. Type Type normalnormal..

Page 16: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1616Setting the Font SizeSetting the Font Size

1.1. Type Type font-size:font-size:..

2.2. Type an absolute font size: Type an absolute font size: xx-smallxx-small, , x-smallx-small, , smallsmall, , mediummedium, , largelarge, , x-largex-large or or xx-largexx-large..

Or type a relative font size: Or type a relative font size: largerlarger or or smallersmaller..

Or type an exact size: say, Or type an exact size: say, 12pt12pt or or 15px15px..

Or type a percentage relative to any parent Or type a percentage relative to any parent style: e.g., style: e.g., 150%150%..

Page 17: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1717Setting the Line HeightSetting the Line Height

1.1. Type Type line-height:line-height:..2.2. Type Type nn, where , where nn is a number that is a number that

will be multiplied by the font-size will be multiplied by the font-size to obtain the desired line height.to obtain the desired line height.Or type Or type p%p% where where p%p% is a is a percentage of the font size.percentage of the font size.Or type Or type aa, where , where aa is an absolute is an absolute value in points, pixels, or value in points, pixels, or whatever.whatever.

Page 18: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1818Setting all Font Values at Setting all Font Values at

OnceOnce1.1. Type Type font:font:..

2.2. If desired, type If desired, type normalnormal, , obliqueoblique, or , or italicitalic to set the to set the font-style (Slide 14).font-style (Slide 14).

3.3. If desired, type If desired, type normalnormal, , boldbold, , bolderbolder, , lighterlighter, or a , or a multiple of multiple of 100100 (up to 900) to set the font-weight (up to 900) to set the font-weight (Slide 14).(Slide 14).

4.4. If desired, type If desired, type small-capssmall-caps to use a small cap font to use a small cap font variant.variant.

5.5. Type the desired font size, using the values given in Type the desired font size, using the values given in step 2 on slide16.step 2 on slide16.

6.6. If desired, type If desired, type /lineheight/lineheight, where lineheight is , where lineheight is expressed in the same form as the font size (slide16).expressed in the same form as the font size (slide16).

7.7. Type a space followed by the desired font family or Type a space followed by the desired font family or families, in order of preferences, separated by families, in order of preferences, separated by commas, as described on slide 12 .commas, as described on slide 12 .

Page 19: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

1919Setting the Text ColorSetting the Text Color

1.1. Type Type color:color:..

2.2. Type Type colornamecolorname, where , where colornamecolorname is one of is one of the 16 predefined colors.the 16 predefined colors.

Or type Or type #rrggbb#rrggbb, where , where rrggbbrrggbb is the is the hexadecimal representation of the desired hexadecimal representation of the desired color.color.

Or type Or type rgb(r,g,b)rgb(r,g,b) where where rr,,gg, and , and bb are are integers from 0-255 that specify the amount integers from 0-255 that specify the amount of red, green, or blue, respectively, in the of red, green, or blue, respectively, in the desired color.desired color.

Or type Or type rgb((r%,g%,b%)rgb((r%,g%,b%) where where rr,,gg, and , and bb specify the percentage of red, green, and specify the percentage of red, green, and blue, respectively, in the desired color.blue, respectively, in the desired color.

Page 20: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2020Changing the Text’s Changing the Text’s

BackgroundBackground1.1. Type Type background:background:..

2.2. Type Type transparenttransparent or or colorcolor, where , where colorcolor is a color name is a color name or hex color.or hex color.

3.3. If desired, type If desired, type url(image.gif)url(image.gif), to use an image for the , to use an image for the background.background.

If desired, type If desired, type repeatrepeat to title the image both to title the image both horizontally and vertically, horizontally and vertically, repeat-xrepeat-x to tile the image to tile the image only horizontally, only horizontally, repeat-yrepeat-y to tile the image only to tile the image only vertically, and vertically, and no-repeatno-repeat to not tile the image. to not tile the image.

If desired, type If desired, type fixedfixed or or scrollscroll to determine whether to determine whether the background should scroll along with the canvas.the background should scroll along with the canvas.

If desired, type If desired, type x yx y to set the position of the to set the position of the background image, where background image, where xx and and yy can be expressed can be expressed as a percentage or an absolute distance from the top-as a percentage or an absolute distance from the top-left corner. Or use values of left corner. Or use values of toptop, , centercenter, or , or bottom bottom for for x x and and leftleft, , centercenter, and , and rightright for for yy..

Page 21: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2121Controlling SpacingControlling Spacing

To specify tracking (space between words)To specify tracking (space between words) Type Type word-spacing:word-spacing:.. Type Type lengthlength, where , where lengthlength is a numerical value in pixels, is a numerical value in pixels,

points, ems, etc.points, ems, etc.

To specify kerning (space between letters)To specify kerning (space between letters) Type Type letter-spacingletter-spacing:: Type Type lengthlength, where , where lengthlength is a numerical value in pixels, is a numerical value in pixels,

points, ems, etc.points, ems, etc.

To add indentsTo add indents Type Type text-indent:text-indent:.. Type a value for the text indent, either as an absolute Type a value for the text indent, either as an absolute

value (either positive or negative) or as a percentage.value (either positive or negative) or as a percentage.

Page 22: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2222Setting White Space Setting White Space

PropertiesProperties

1.1. Type Type white-space:white-space:..

2.2. Type Type prepre to have browsers take all to have browsers take all extra spaces and returns into account.extra spaces and returns into account.

Or type Or type nowrapnowrap to keep all elements to keep all elements on the same line, except where on the same line, except where you’ve inserted BR tags.you’ve inserted BR tags.

Or type Or type normalnormal to treat white space as to treat white space as usual.usual.

Page 23: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2323Aligning TextAligning Text

1.1. Type Type text-align:text-align:..

2.2. Type Type leftleft to align the text to the left. to align the text to the left.

Or type Or type rightright to align the text to the to align the text to the right.right.

Or type Or type centercenter to center the text in to center the text in the middle of the screen.the middle of the screen.

Or Or justifyjustify to align the text on both to align the text on both the right and left.the right and left.

Page 24: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2424Underlining TextUnderlining Text

1.1. Type Type text-decoration:text-decoration:..

2.2. To underline text, type To underline text, type underlineunderline..

Or, for a line above the text, type Or, for a line above the text, type overlineoverline..

Or, to strike out the text, type Or, to strike out the text, type line-line-throughthrough..

To get rid of underlining etc.To get rid of underlining etc.1.1. Type Type text-decoration:text-decoration:..

2.2. Type Type nonenone..

Page 25: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2525Making Text Blink Making Text Blink

(Netscape)(Netscape)

1.1. Type Type text-decoration: text-decoration: ..

2.2. Type Type blinkblink..

Page 26: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2626Changing the Text CaseChanging the Text Case

1.1. Type Type text-transform: text-transform: ..

2.2. Type Type capitalizecapitalize to put the first character of each to put the first character of each word in uppercase.word in uppercase.

Or type Or type uppercaseuppercase to change all the letters to to change all the letters to uppercase.uppercase.

Or type Or type lowercaselowercase to change all the letters to to change all the letters to lowercase.lowercase.

Or type Or type nonenone to leave the text as is (possibly to leave the text as is (possibly canceling out an inherited value).canceling out an inherited value).

To use a small caps fontTo use a small caps font1.1. Type Type font-variant:font-variant:..

2.2. Type Type small-capssmall-caps..

Page 27: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2727Offsetting Elements in the Offsetting Elements in the

Natural FlowNatural Flow

1.1. Type Type position:relative; position:relative; . .

2.2. Type Type toptop, , rightright, , bottombottom, or , or left left ..

3.3. Type Type :v:v, where , where v v is the desired is the desired distance that you want to offset the distance that you want to offset the element from its natural location, either element from its natural location, either as an absolute or relative value (10pt, as an absolute or relative value (10pt, or 2em, for example).or 2em, for example).

4.4. If desired, type If desired, type ;; (semicolon) and repeat (semicolon) and repeat steps 2 and 3 for additional directions.steps 2 and 3 for additional directions.

Page 28: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2828Positioning Elements Positioning Elements

AbsolutelyAbsolutely

1.1. Type Type position:absolute;position:absolute;..

2.2. Type Type toptop, , rightright, , bottombottom, or , or leftleft..

3.3. Type Type :v:v, where , where v v is the desired is the desired distance that you want to offset the distance that you want to offset the element from its parent element, either element from its parent element, either expressed as an absolute or relative expressed as an absolute or relative value (10pt, or 2em, for example).value (10pt, or 2em, for example).

4.4. If desired, type If desired, type ;; (semicolon) and repeat (semicolon) and repeat steps 2 and 3 for additional directions.steps 2 and 3 for additional directions.

Page 29: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

2929Positioning elements in 3DPositioning elements in 3D

1.1. Type Type z-index:z-index:..

2.2. Type Type nn, where , where nn is a number that is a number that indicates the element’s level in indicates the element’s level in the stack of objects.the stack of objects.

Page 30: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3030Displaying and Hiding Displaying and Hiding

ElementsElements

1.1. Type Type display: display: ..

2.2. Type Type nonenone to hide the given elements. to hide the given elements.

Or type Or type blockblock to display the element as to display the element as a block-level (thus starting a new a block-level (thus starting a new paragraph).paragraph).

Or type Or type inlineinline to display the element as to display the element as inline (not starting a new paragraph).inline (not starting a new paragraph).

Or type Or type list-itemlist-item to display the elements to display the elements as if you had used the LI tag.as if you had used the LI tag.

Page 31: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3131Setting the Height or Width for Setting the Height or Width for

an Elementan Element

1.1. Type Type width:wwidth:w, where , where w w is the width is the width of the element, and can be expressed of the element, and can be expressed either as an absolute value or as a either as an absolute value or as a percentage of the parent element.percentage of the parent element.

2.2. Type Type height:hheight:h, where , where hh is the height is the height of the element, and can be expressed of the element, and can be expressed only as an absolute value.only as an absolute value.

Page 32: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3232Setting the BorderSetting the Border

1.1. Type Type borderborder..

2.2. If desired, type If desired, type –top–top, , -bottom-bottom, , -left-left, or , or –right–right, , (with no space after (with no space after borderborder) to limit where the ) to limit where the border should go.border should go.

3.3. If desired, type If desired, type thinthin, , mediummedium, , thickthick, or an , or an absolute value (like absolute value (like 4px4px) to determine the ) to determine the thickness of the border. Medium is the default.thickness of the border. Medium is the default.

4.4. If desired, type If desired, type nonenone, , dotteddotted, , dasheddashed, , solidsolid, , doubledouble, , groovegroove, , ridgeridge, , insetinset or or outsetoutset to to determine the border style.determine the border style.

5.5. If desired, type If desired, type colorcolor, where , where colorcolor is either one of is either one of the 16 predefined color names or is expressed as the 16 predefined color names or is expressed as described on slide 19.described on slide 19.

Page 33: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3333Adding Padding around an Adding Padding around an

ElementElement

1.1. Type Type paddingpadding..

2.2. If desired, type If desired, type –top–top, , -bottom-bottom, , -left-left, or , or ––rightright, (with no space after , (with no space after paddingpadding) to ) to limit the padding to one side of the limit the padding to one side of the object.object.

3.3. Type Type :x:x, where , where x x is the amount of is the amount of desired space to be added,, expressed desired space to be added,, expressed in units or as a percentage of the in units or as a percentage of the parent element.parent element.

Page 34: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3434Setting the Margin around an Setting the Margin around an

ElementElement

1.1. Type margin.Type margin.

2.2. If desired, type If desired, type –top–top, , -bottom-bottom, , -left-left, or , or ––rightright, (with no space after , (with no space after marginmargin) to ) to limit where space should be added.limit where space should be added.

3.3. Type Type :x:x, where , where xx is the amount of is the amount of desired space to be added, expressed desired space to be added, expressed in units or as a percentage of the width in units or as a percentage of the width of the corresponding value of the of the corresponding value of the parent element.parent element.

Page 35: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3535Aligning Elements Aligning Elements

VerticallyVertically

1.1. Type Type vertical-align:vertical-align:

2.2. Type Type baselinebaseline to align the element’s baseline to align the element’s baseline with the parent’s baseline.with the parent’s baseline.

Or type Or type middlemiddle to align the middle of the to align the middle of the element with the middle of the parent.element with the middle of the parent.

Or type Or type subsub to position the element as a to position the element as a subscript of the parent.subscript of the parent.

Or type Or type supersuper to position the element as a to position the element as a superscript of the parent.superscript of the parent.

Or type Or type text-toptext-top to align the top of the to align the top of the element with the top of the parent.element with the top of the parent.

continued.continued.

Page 36: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3636Aligning Elements Vertically Aligning Elements Vertically

cont’dcont’d

Or type Or type text-bottomtext-bottom to align the bottom of to align the bottom of the element with the bottom of the parent.the element with the bottom of the parent.

Or type Or type toptop to align the top of the element to align the top of the element with the top of the tallest element on the line.with the top of the tallest element on the line.

Or type Or type bottombottom to align the bottom of the to align the bottom of the element to the bottom of the lowest element element to the bottom of the lowest element on the line.on the line.

Or type a percentage of the line height of the Or type a percentage of the line height of the element, which may be positive or negative.element, which may be positive or negative.

Page 37: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3737Wrapping Text Around Wrapping Text Around

ElementsElements

1.1. Type Type float:float: . .

2.2. Type Type leftleft if you want the element if you want the element on the left and the text to flow to on the left and the text to flow to its right.its right.

Or type Or type rightright if you want the if you want the element on the right and the element on the right and the text to flow to its left .text to flow to its left .

Page 38: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3838Stopping Text WrapStopping Text Wrap

1.1. Type Type clear: clear: ..

2.2. Type Type leftleft to stop the flow until the left to stop the flow until the left side is clear of all elements.side is clear of all elements.

Or type Or type rightright to stop the flow until the to stop the flow until the right side is clear of elements .right side is clear of elements .

Or type Or type bothboth to stop the flow until both to stop the flow until both sides are clearsides are clear

Or type Or type nonenone to continue the flow. to continue the flow.

Page 39: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

3939Changing the Foreground Changing the Foreground

ColorColor

1.1. Type Type color:color: . .

2.2. Type Type colornamecolorname, where , where colornamecolorname is one of is one of the 16 predefined colors.the 16 predefined colors.

Or type Or type #rrggbb#rrggbb, where , where rrggbb rrggbb is the is the hexadecimal representation of the desired hexadecimal representation of the desired color.color.

Or type Or type rgb(r, g, b)rgb(r, g, b), where , where rr, , gg, and , and bb are are integers from 0-255 that specify the amount integers from 0-255 that specify the amount of red, green, or blue, respectively, in the of red, green, or blue, respectively, in the desired color.desired color.

Or type Or type rgb(r%, g%, b%)rgb(r%, g%, b%), where , where rr, , gg, and , and b b specify the percentage of red, green, and specify the percentage of red, green, and blue, respectively, in the desired color.blue, respectively, in the desired color.

Page 40: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

4040Clipping an ElementClipping an Element

1.1. Type Type clip: rect(clip: rect( . .

2.2. Type Type t r b lt r b l, where , where tt, , rr, , bb, and , and ll are the top, right, bottom, and are the top, right, bottom, and left coordinates of the left coordinates of the rectangular portion of the rectangular portion of the element that you want to display.element that you want to display.

3.3. Type the final Type the final )) . .

Page 41: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

4141Setting List PropertiesSetting List Properties

1.1. Type Type list-style:list-style: . .

2.2. If desired, to set the list item property to a If desired, to set the list item property to a solid, round circle type solid, round circle type discdisc..

3.3. Or type Or type circlecircle to use an empty, round circle. to use an empty, round circle.

Or type Or type squaresquare to use a solid square. to use a solid square.

Or type Or type decimaldecimal to use a solid square. to use a solid square.

Or type Or type lower-alphalower-alpha to use lowercase letters. to use lowercase letters.

Or type Or type upper-alphaupper-alpha to use uppercase letters. to use uppercase letters.

Or type Or type lower-romanlower-roman to use lowercase Roman to use lowercase Roman numerals.numerals.

Page 42: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

4242Setting List Properties Setting List Properties

(cont’d)(cont’d)

Or type Or type upper-romanupper-roman to use uppercase to use uppercase Roman numeralsRoman numerals

Or type Or type url(image.gif)url(image.gif), where image.gif , where image.gif is the URL of the image that you want is the URL of the image that you want to use as a marker for your lists.to use as a marker for your lists.

3.3. If desired, type If desired, type outsideoutside to hang the to hang the marker to the left of the list items. marker to the left of the list items. Type Type insideinside to align the marker flush to align the marker flush left together with all other lines in the left together with all other lines in the list item paragraph.list item paragraph.

Page 43: 1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.

4343Specifying Page BreaksSpecifying Page Breaks

To specify a page break after a given tag:To specify a page break after a given tag:

Type page-break-after:always.Type page-break-after:always.

To specify a page break before a given tag:To specify a page break before a given tag:

Type page-break-before:always.Type page-break-before:always.

To remove page breaks:To remove page breaks:

Type page-break-after:auto or page Type page-break-after:auto or page break-before:auto.break-before:auto.


Recommended