1 / 14

CSW 131 – Chapter 5 (More) Advanced CSS

CSW 131 – Chapter 5 (More) Advanced CSS. Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley. Style Multiple Elements (pp. 128-129). In the event you want to style 2 or more elements identically , CSS makes it easy.

cole-mclaughlin
Télécharger la présentation

CSW 131 – Chapter 5 (More) Advanced CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSW 131 – Chapter 5(More) Advanced CSS Prepared by Prof. B. for use withTeach Yourself Visually Web Designby Ron Huddleston, Wiley

  2. Style Multiple Elements (pp. 128-129) • In the event you want to style 2 or more elements identically, CSS makes it easy. • First download ch05.zip into downloadssubfolder • 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 element @ line 23 type: h1, h2 [ NOTE comma between elements to be styled ] { font-family: Georgia, "Times New Roman", Times, serif; } • Saveindex.html and view in browser; both h1 & h2 changed. • Note: If element styles conflict, those listed last apply.

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

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

  5. Apply Styles with Classes (pp. 134-135) • 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 <h3> header tag as follows, thus marking it for styling: <h3 class="contentSubhead">Subheading within the . . . then on a new line before </style> type: .contentSubhead [use any name, but MUST start with a period] { font-family: Georgia, "Times New Roman", Times, serif; margin-left: 20px; } • Saveindex.html and view in browser. • Note: Classes can be used multiple times wherever marked on page. • Note2: Class names have NO spaces and ARE case sensitive.

  6. Apply Styles with IDs (pp. 136-137) • 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. • Continuing in index.html using Notepad++, in the body edit the opening <div> tag as follows, thus marking it for styling: <div id="maincontent">& add <!--end maincontent--> after </div> then comment out /*div style*/, and on a new line before </style> type: #maincontent[making sure to start with a pound sign (#)] { margin-left: 20px; border: 1px solid #540907; background-color: #FFFFFF; width: 560px; } • Saveindex.html and view in browser (no change -- same styles used). • Note: IDs have multiple uses: e.g., styles, targeting links, & JavaScript. • Note2: IDs take precedence over classes (they are more specific). Note X/HTML comments<!-- & --> differfrom CSS comments

  7. Use Contextual Selectors (pp. 138-139) • 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 </style> 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; } • Saveindex.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). So only the “child”p within maincontent is being styled.

  8. Use Pseudo-Elements (pp. 140-141) • 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 </style> type the parent element or ID, a space, and the child element: #maincontent p:first-line [marking 1st line of the p] { font-weight: bold; } • Saveindex.html and view in browser. • Note: Only the 1st line of the paragraph within #maincontent changes. • Note2: Browsers tend to ignore pseudo-elements applied to non-text. • Try using first-letterwith font-size: 200%; etc.

  9. Use Pseudo-Classes (pp. 142-143) • 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 </style> we will set all five states for links on this page: Continued . . .

  10. Use Pseudo-Classes (pp. 142-143 CONT.) • Saveindex.html and view in browser. Experiment with the link. • Note: See “Tip” on p. 143 regarding the pseudo-class first-child.

  11. Create an External Style Sheet (pp. 144-145) • 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 <!-–before <style>, and a closing comment tag -->after </style> (again using XHTML, not CSS comment tags) . • Saveindex.html and view, noting styles are gone. • Copy all of the text on the lines BETWEEN the <style> and </style> tags. • 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.

  12. Link a Style Sheet to a Page (pp. 146-147) • 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 <link type="text/css" rel="stylesheet" href="styles.css" /> • In index.html (using Notepad++), type the above line before </head> • Saveindex.html and view in browser. All styles are applied again.

  13. Use the Cascade (pp. 148-149) • 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 </head> type: <style type="text/css"> #top { font-style: italic; text-transform: capitalize; } </style> • Saveindex.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.

  14. To Do List • Read Chapter 5 • Revisit what we did in class • Be careful as we do not follow book • Remember, MUCH more detail about anything we cover is: • at w3.org • the Appendices of your book • 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”?

More Related