CSW131 Steven Battilana 1 CSW 131 – Chapter 5 (More) Advanced CSS Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley

CSW131 Steven Battilana 2 Style Multiple Elements (pp ) In the event you want to style 2 or more elements identically, CSS makes it easy. In the event you want to style 2 or more elements identically, CSS makes it easy. First download ch05.zip into downloads subfolder copy & paste ch05zip into class_work subfolder extract (unzip) ch05.zip, which becomes subfolder ch05 into class_work subfolder Right-click index.html and select Edit with Notepad++ From Menu pick Encoding | Convert to UTF-8 without BOM On a new line before the h1 style line 23 type: h1, h2 [ NOTE comma between elements to be styled ] { font-family: Georgia, "Times New Roman", Times, serif; } Save index.html and view in browser; both h1 & h2 changed. Save index.html and view in browser; both h1 & h2 changed. Note: If element styles conflict, those listed last apply. Note: If element styles conflict, those listed last apply.

CSW131 Steven Battilana 3 Format Text with Spans (pp ) If you do NOT want to style an entire element, allows the styling of inline elements, e.g., a couple of words within a paragraph, for selective styling. If you do NOT want to style an entire element, allows the styling of inline elements, e.g., a couple of words within a paragraph, for selective styling. Continuing in index.html using Notepad++, in the 1 st paragraph in the body mark Lorem Ipsum as follows with span tags: Continuing in index.html using Notepad++, in the 1 st paragraph in the body mark Lorem Ipsum as follows with span tags: Lorem Ipsum Lorem Ipsum then style on a new line before type: then style on a new line before type:span{ font-weight: bold; font-style: italic; } Save index.html and view in browser; just two words change. Save index.html and view in browser; just two words change. Note: Styles class & id provide even more flexibility (soon=>). Note: Styles class & id provide even more flexibility (soon=>).

CSW131 Steven Battilana 4 Group Elements with Divs (pp ) CSS allows the grouping of multiple elements on the page with the same styles using the tag. CSS allows the grouping of multiple elements on the page with the same styles using the tag. Continuing in index.html using Notepad++, in the body on a new line after the h2 header line add a tag: Continuing in index.html using Notepad++, in the body on a new line after the h2 header line add a tag:<div> and the closing tag on a new line before : [everything between div tags are MARKed for styling] [everything between div tags are MARKed for styling] then on a new line before type: [STYLE our MARKed items] div{ margin-left: 20px; border: 1px solid #540907; background-color: #FFFFFF; width: 560px; } Save index.html and view in browser; a large area changed. Save index.html and view in browser; a large area changed. Note: Inline elements use & block-level elements use. Note: Inline elements use & block-level elements use.

CSW131 Steven Battilana 5 Apply Styles with Classes (pp ) A more targeted method to apply styles selectively is by using classes. They are placed within a tag as class=“classname”, and MUST start with a period within the style sheet, e.g.,.classname. A more targeted method to apply styles selectively is by using classes. They are placed within a tag as class=“classname”, and MUST start with a period within the style sheet, e.g.,.classname. Continuing in index.html using Notepad++, in the body edit the opening header tag as follows, thus marking it for styling: Continuing in index.html using Notepad++, in the body edit the opening header tag as follows, thus marking it for styling: Subheading within the... Subheading within the... then on a new line before type:.contentSubhead [use any name, but MUST start with a period] { font-family: Georgia, "Times New Roman", Times, serif; margin-left: 20px; } Save index.html and view in browser. Save index.html and view in browser. Note: Classes can be used multiple times wherever marked on page. Note: Classes can be used multiple times wherever marked on page. Note2: Class names have NO spaces and ARE case sensitive. Note2: Class names have NO spaces and ARE case sensitive.

CSW131 Steven Battilana 6 Apply Styles with IDs (pp ) Another more targeted method to apply styles selectively is by using IDs. They are placed within a tag as id=“idname”, and MUST start with a pound sign (#) within the style sheet, e.g., #idname. Another more targeted method to apply styles selectively is by using IDs. They are placed within a tag as id=“idname”, and MUST start with a pound sign (#) within the style sheet, e.g., #idname. Unlike classes, IDs can only be used ONCE within a page. Unlike classes, IDs can only be used ONCE within a page. Continuing in index.html using Notepad++, in the body edit the opening tag as follows, thus marking it for styling: Continuing in index.html using Notepad++, in the body edit the opening tag as follows, thus marking it for styling: & add after & add after then comment out /*div style*/, and on a new line before type: #maincontent [making sure to start with a pound sign (#)] { margin-left: 20px; border: 1px solid #540907; background-color: #FFFFFF; width: 560px; } Save index.html and view in browser (no change -- same styles used). Save index.html and view in browser (no change -- same styles used). Note: IDs have multiple uses: e.g., styles, targeting links, & JavaScript. Note: IDs have multiple uses: e.g., styles, targeting links, & JavaScript. Note2: IDs take precedence over classes (they are more specific). Note2: IDs take precedence over classes (they are more specific). Note X/HTML comments differ from CSS comments

CSW131 Steven Battilana For ease and convenience, contextual selectors let you style elements that are within other elements (child of a parent element). Instead of using a comma to separate the elements in question (like when applying the same styling to multiple elements, the elements are separated by spaces, with the LAST element being styled. For ease and convenience, contextual selectors let you style elements that are within other elements (child of a parent element). Instead of using a comma to separate the elements in question (like when applying the same styling to multiple elements, the elements are separated by spaces, with the LAST element being styled. Continuing in index.html using Notepad++, on a new line before type the parent element or ID, a space, and the child element: Continuing in index.html using Notepad++, on a new line before type the parent element or ID, a space, and the child element: #maincontent p [maincontent = parent and p = marked child element] { text-indent: 0; padding-top: 20px; } Save index.html and view in browser. Save index.html and view in browser. Note: Multiple levels can be used, separated by spaces, e.g., : #content p img would style the image within a paragraph within a division named content (only img is styled). Note: Multiple levels can be used, separated by spaces, e.g., : #content p img would style the image within a paragraph within a division named content (only img is styled). 7 Use Contextual Selectors (pp ) So only the “child” p within maincontent is being styled.

CSW131 Steven Battilana 8 Use Pseudo-Elements (pp ) For special situations, you can target an element (or ID or class). Typically first-line or first-letter they follow the element using a the format element:pseudo-element as in the following example: For special situations, you can target an element (or ID or class). Typically first-line or first-letter they follow the element using a the format element:pseudo-element as in the following example: Continuing in index.html using Notepad++, on a new line before type the parent element or ID, a space, and the child element: Continuing in index.html using Notepad++, on a new line before type the parent element or ID, a space, and the child element: #maincontent p:first-line [marking 1 st line of the p] { font-weight: bold; } Save index.html and view in browser. Save index.html and view in browser. Note: Only the 1 st line of the paragraph within #maincontent changes. Note: Only the 1 st line of the paragraph within #maincontent changes. Note2: Browsers tend to ignore pseudo-elements applied to non-text. Note2: Browsers tend to ignore pseudo-elements applied to non-text. Try using first-letter with font-size: 200%; etc. Try using first-letter with font-size: 200%; etc.

CSW131 Steven Battilana 9 Use Pseudo-Classes (pp ) Pseudo-classes can apply a style to an element based on its current state, with a major use being link styles. Five common states are: Pseudo-classes can apply a style to an element based on its current state, with a major use being link styles. Five common states are: Continuing in index.html using Notepad++, on a new line before we will set all five states for links on this page: Continuing in index.html using Notepad++, on a new line before we will set all five states for links on this page: Continued... Most commonly used pseudo classes and their states a:linkLink in its normal state a:visitedLink used to visit target of link a:hoverApplies when user “mouses over” link a:activeApplies when link is being clicked a:focusStyle when user jumps to link using Tab key

CSW131 Steven Battilana 10 Use Pseudo-Classes (pp CONT.) Save index.html and view in browser. Experiment with the link. Save index.html and view in browser. Experiment with the link. Note: See “Tip” on p. 143 regarding the pseudo-class first-child. Note: See “Tip” on p. 143 regarding the pseudo-class first-child. Type these 5 items one after the other on your page (this display is only to save space). a:link { font-weight: bold; color: #540907; } a:visited { font-weight: bold; color: #8A3D20; } a:hover { text-decoration: none; color: #372F22; } a:active { text-decoration: none; color: #372F22; } a:focus { text-decoration: none; color: #372F22; }

CSW131 Steven Battilana 11 Create an External Style Sheet (pp ) A major feature of CSS is being able to create one external sheet of styles that can be linked to as many web pages in your site as you wish. Called an external style sheet, a.css file extension is common: A major feature of CSS is being able to create one external sheet of styles that can be linked to as many web pages in your site as you wish. Called an external style sheet, a.css file extension is common: Continuing in index.html using Notepad++, place an opening (X/HTML) comment tag, and a closing comment tag --> after (again using XHTML, not CSS comment tags). Continuing in index.html using Notepad++, place an opening (X/HTML) comment tag, and a closing comment tag --> after (again using XHTML, not CSS comment tags). Save index.html and view, noting styles are gone. Copy all of the text on the lines BETWEEN the and tags. Copy all of the text on the lines BETWEEN the and tags. Open a new blank file in Notepad++, then click Edit, then Paste. Open a new blank file in Notepad++, then click Edit, then Paste. Save this new document as styles.css Note: Remember, virtually all websites use a combination of an external style sheet, and embedded styles within some or all of the individual web pages. Embedded styles take precedence. Note: Remember, virtually all websites use a combination of an external style sheet, and embedded styles within some or all of the individual web pages. Embedded styles take precedence.

CSW131 Steven Battilana 12 Link a Style Sheet to a Page (pp ) Once you create an external sheet you can easily link it to a web page. The link is placed in the head section of the document, and has three required attributes: Once you create an external sheet you can easily link it to a web page. The link is placed in the head section of the document, and has three required attributes: type of document (your style sheet) being linked (always text/css) rel or relationship (usually set to stylesheet) href is the location of the style sheet document In index.html (using Notepad++), type the above line before In index.html (using Notepad++), type the above line before Save index.html and view in browser. All styles are applied again. Save index.html and view in browser. All styles are applied again.

CSW131 Steven Battilana 13 Use the Cascade (pp ) Remember, virtually all websites use a combination of at least one external style sheet, and embedded styles within some or all of the individual web pages. Embeddied styles take precedence, allowing you to use the cascade simply and at your convenience. Remember, virtually all websites use a combination of at least one external style sheet, and embedded styles within some or all of the individual web pages. Embeddied styles take precedence, allowing you to use the cascade simply and at your convenience. Continuing in index.html using Notepad++, before type: Continuing in index.html using Notepad++, before type: #top{ font-style: italic; text-transform: capitalize; }</style> Save index.html and view in browser. This embedded style takes precedence over the styles in the external style sheet. Save index.html and view in browser. This embedded style takes precedence over the styles in the external style sheet. VERY Important: Take note of the important “Tip” on p. 149 regarding precedence and how it works depending on different situations. Make a special note to yourself about this tip as a future reference. VERY Important: Take note of the important “Tip” on p. 149 regarding precedence and how it works depending on different situations. Make a special note to yourself about this tip as a future reference.

CSW131 Steven Battilana 14 To Do List Read Chapter 5 Read Chapter 5 Revisit what we did in class Revisit what we did in class Be careful as we do not follow book Remember, MUCH more detail about anything we cover is: Remember, MUCH more detail about anything we cover is: at w3.org the Appendices of your book DOCUMENT Your Project DOCUMENT Your Project Typed for the next class – “short & sweet” About your (planned) business or organization About you About another business or organization Have you selected or do you need a “client”?