Slide 1

CSS with XHTML Please use speaker notes for additional information! Slide 2 Slide 3 This uses a style sheet h3 { color: purp">This uses a style sheet h3 { color: purple; font-family: "Times New Roman"; } This is a H1 heading This is outside a paragraph! Actually it is in a division! This is inside a paragraph! This is a H2 header. This is a H3 header. Note h3 is done with embedded style on this page This is just a line - inside a paragraph. This is a line following the opening of another paragraph. Some code for HTML entity format In coding HTML, you should use "for the quotation mark " and & for the ampersand as well as < for the less than sign and > for the greater than sign because these have special meanings in HTML. Remember also that which stands for non-breaking space can be used to put extra spaces on your page. See HTML code for the characters used. This is a paragraph with the color changed by in line style. Now we are back to the regular paragraph definition from the external style sheet. Links to an external style sheet. Style in the head portion of the XHTML. Style embedded in the code for this particular paragraph.">This uses a style sheet h3 { color: purp" title=" This uses a style sheet h3 { color: purp"> This uses a style sheet h3 { color: purple; font-family: "Times New Roman"; } This is a H1 heading This is outside a paragraph! Actually it is in a division! This is inside a paragraph! This is a H2 header. This is a H3 header. Note h3 is done with embedded style on this page This is just a line - inside a paragraph. This is a line following the opening of another paragraph. Some code for HTML entity format In coding HTML, you should use "for the quotation mark " and & for the ampersand as well as < for the less than sign and > for the greater than sign because these have special meanings in HTML. Remember also that which stands for non-breaking space can be used to put extra spaces on your page. See HTML code for the characters used. This is a paragraph with the color changed by in line style. Now we are back to the regular paragraph definition from the external style sheet. Links to an external style sheet. Style in the head portion of the XHTML. Style embedded in the code for this particular paragraph. Slide 4 body {color:green; background:pink; } h1, h2 {font-family: verdana, sans-serif; color: red; } h3 {color:blue; font-family: verdana, sans-serif; } p {color: blue; font-family: "Times New Roman", serif; } This code is overridden by CSS code in the head portion of the XHTML. This code is overridden for a particular paragraph in the XHTML by CSS code embedded in the tag command for a particular paragraph. Cascading Style Sheet test table { border: solid thick; } This is a header This is a sentence after the header. The first cell The second cell This is a paragraph. This is a header after a paragraph This is another paragraph. With a second line This is another header This is a paragraph again. This paragraph goes on and on and on and on and on and on and on and on and on and on and on and on and on and on to make sure that it wraps! This is trying to put a header inside a paragraph. This is another try!">Cascading Style Sheet test table { borde" title=" Cascading Style Sheet test table { borde"> Cascading Style Sheet test table { border: solid thick; } This is a header This is a sentence after the header. The first cell The second cell This is a paragraph. This is a header after a paragraph This is another paragraph. With a second line This is another header This is a paragraph again. This paragraph goes on and on and on and on and on and on and on and on and on and on and on and on and on and on to make sure that it wraps! This is trying to put a header inside a paragraph. This is another try! Slide 7 Slide 8 body { font-family: "Times New Roman", "Times Roman", serif; color: green; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } p { text-indent:.5in; margin-top:.25in; color: blue } table { background: white; } td { color: orange; } h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; color: red; } Slide 9 Slide 10 Cascading Style Sheet test This is a hea">Cascading Style Sheet test This is a header This is a sentence after the header. The first cell The second cell This is a paragraph. This is a header after a paragraph This is another paragraph. With a second line This is another header This is a paragraph again. This paragraph goes on and on and on and on and on and on and on and on and on and on and on and on and on and on to make sure that it wraps!">Cascading Style Sheet test This is a hea" title=" Cascading Style Sheet test This is a hea"> Cascading Style Sheet test This is a header This is a sentence after the header. The first cell The second cell This is a paragraph. This is a header after a paragraph This is another paragraph. With a second line This is another header This is a paragraph again. This paragraph goes on and on and on and on and on and on and on and on and on and on and on and on and on and on to make sure that it wraps! Slide 11 body { font-family: "Times New Roman", "Times Roman", serif; color: green; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } p { text-indent:.5in; margin-top:.25in; color: blue } table { background: white; border: solid thick; } td { color: orange; } h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; color: red; } Slide 12 Slide 13 Cascading Style Sheet test This is a hea">Cascading Style Sheet test This is a header This is a sentence after the header. The first cell The second cell This is a paragraph. This is a header after a paragraph This is another paragraph. With a second line This is another header This is a paragraph again. This paragraph goes on and on and on and on and on and on and on and on and on and on and on and on and on and on to make sure that it wraps!">Cascading Style Sheet test This is a hea" title=" Cascading Style Sheet test This is a hea"> Cascading Style Sheet test This is a header This is a sentence after the header. The first cell The second cell This is a paragraph. This is a header after a paragraph This is another paragraph. With a second line This is another header This is a paragraph again. This paragraph goes on and on and on and on and on and on and on and on and on and on and on and on and on and on to make sure that it wraps! Slide 14 body { font-family: "Times New Roman", "Times Roman", serif; color: green; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } p { text-indent:.5in; margin-top:.25in; color: blue } table { background: white; border: solid thick; border-color: brown; } td { color: orange; } h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; color: red; } Slide 15 Slide 16 More CSS body { font-family: "Times New ">More CSS body { font-family: "Times New Roman", "Times Roman", serif; color: red; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } p { text-indent:.5in; margin-top:.25in; color: blue } table { background: white; border: solid thick; border-color: brown; } td { color: orange; } h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; color: green; }">More CSS body { font-family: "Times New " title=" More CSS body { font-family: "Times New "> More CSS body { font-family: "Times New Roman", "Times Roman", serif; color: red; background: pink; margin-top: 1.5in; margin-left:.5in; margin-right:.5in } p { text-indent:.5in; margin-top:.25in; color: blue } table { background: white; border: solid thick; border-color: brown; } td { color: orange; } h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; color: green; } Slide 17 This is a header This is a sentence after the header. Notice that it is in red because that is the color selected for the body default. The first cell The second cell This is a paragraph. Again, we need it to go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on to see the wrap! This is a header after a paragraph This is data that is outside of a header and outside of a paragraph so it is red! Slide 18 Slide 19 Slide 20 Style sheets This is a header. This is o">Style sheets This is a header. This is outside the paragraph. This is a paragraph. And this is more of the paragraph. And still more... This is a header This is a block! This is in the table HELLO WORLD HI BYE This is a line below the table. It is a division.">Style sheets This is a header. This is o" title=" Style sheets This is a header. This is o"> Style sheets This is a header. This is outside the paragraph. This is a paragraph. And this is more of the paragraph. And still more... This is a header This is a block! This is in the table HELLO WORLD HI BYE This is a line below the table. It is a division. Slide 21 body { font-family: "Times New Roman", "Times Roman", serif; color: green; font-weight: bold; text-align: center; margin-left: 1.5in; margin-right: 1.5in; background-image: url(CISa.gif); background: aqua; } p { text-indent:.5in; margin-top: 1in; color: blue; background-image: url(flag.gif); } blockquote { color: #eeaabb; font-style: italic; font-size: 48pt; } h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; color: red; text-decoration: underline; text-transform: uppercase; font-size: 36pt; } table { border: solid thin; border-color: brown; } td { border: solid thin; border-color: brown; }.center { text-align: center; color: pink; }.right { text-align: right; color: orange; font-style: italic; font-weight: bold; } Note that there is a background image followed by a background color - the background color won and you see the page with a aqua background. This shows the borders for the tables and the cells. The dot followed by a name makes style that is used with CLASS. It can be associated with a variety of tags. Slide 22 Slide 23 Slide 24 Style sheets This is a header. This is o">Style sheets This is a header. This is outside the paragraph. This is a paragraph. And this is more of the paragraph. And still more... This is a header This is a block! This is in the table HELLO WORLD HI BYE This is a line below the table. It is a division. This shows the use of class with blockquote and with table cells.">Style sheets This is a header. This is o" title=" Style sheets This is a header. This is o"> Style sheets This is a header. This is outside the paragraph. This is a paragraph. And this is more of the paragraph. And still more... This is a header This is a block! This is in the table HELLO WORLD HI BYE This is a line below the table. It is a division. This shows the use of class with blockquote and with table cells. Slide 25 body { font-family: "Times New Roman", "Times Roman", serif; color: green; font-weight: bold; text-align: center; margin-left: 1.5in; margin-right: 1.5in; background-image: url(CISa.gif); } p { text-indent:.5in; margin-top: 1in; color: blue; background-image: url(flag.gif); } blockquote { color: #EEAABB; font-style: italic; font-size: 48pt; } h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; color: red; text-decoration: underline; text-transform: uppercase; font-size: 36pt; }.center { text-align: center; color: pink; }.right { text-align: right; color: orange; font-style: italic; font-weight: bold; } In this style sheet, the only background is an image which you can see. This shows the definition of.right and.center which are used with class= on the preceding page. Slide 26 Slide 27 Slide 28 Style sheets still body {margin-left: 10"> Style sheets still body {margin-left: 10" title=" Style sheets still body {margin-left: 10"> Style sheets still body {margin-left: 10%; margin-right: 10%; color: navy; background-color: yellow; } h1 { margin-left: -5%; color: maroon; } h2 { margin-top: 3em; margin-bottom: 3em; } strong { text-transform: uppercase; font-style: italic; font-weight: bold; font-size: 150%; }.outline { border: solid; border-width: medium; border-color: brown; margin-left: 30%; margin-right: 30%; background-color: rgb(144,225,255); } Slide 29 .picbox { border: solid; border-width: medium; border-color: brown; margin-left: 26%; margin-right: 26%; background-image: url(CISa.gif); } This is a header 1 title. This is text in a division. This is a header 2 title. This is simply test. Notice that the em is the height of the font. 3em is 3 times the base. So for this example, the margin around the H2 header is going to be larger than normal. Note the use of the percent in the margins, this helps to adjust to a variety of window sizes. Now I am going to do some text in strong! This is the contents of the DIV with the class of outline that was defined above. The outline class called for a solid border of medium width and color of brown. The contents is given the third way that you can give color which is to give the number for the hex instead of the letters). Slide 30 Slide 31 Slide 32 Style sheets still body {margin-left: 10"> Style sheets still body {margin-left: 10" title=" Style sheets still body {margin-left: 10"> Style sheets still body {margin-left: 10%; margin-right: 10%; color: navy; background-color: yellow; } h1 { margin-left: -5%; color: maroon; } h2 { margin-top: 3em; margin-bottom: 3em; } strong { text-transform: uppercase; font-style: italic; font-weight: bold; font-size: 150%; }.outline { border: solid; border-width: medium; border-color: brown; margin-left: 30%; margin-right: 30%; background-color: rgb(144,225,255); } Slide 33 div.picbox { border: solid; border-width: medium; border-color: brown; margin-left: 26%; margin-right: 26%; background-image: url(CISa.gif); } This is a header 1 title. This is text in a division. This is a header 2 title. This is simply test. Notice that the em is the height of the font. 3em is 3 times the base. So for this example, the margin around the H2 header is going to be larger than normal. Note the use of the percent in the margins, this helps to adjust to a variety of window sizes. Now I am going to do some text in strong! This is the contents of the DIV with the class of outline that was defined above. The outline class called for a solid border of medium width and color of brown. The contents is given the third way that you can give color which is to give the number for the hex instead of the letters). This is the contents of the DIV with the class of outline that was defined above. The outline class called for a solid border of medium width and color of brown. The contents is given the third way that you can give color which is to give the number for the hex instead of the letters). In this example, I am saying that picbox can only be used with div. This is written as: div.picbox If I try to use the picbox class with another tag, it will not work.