csw 131 – chapter 5 (more) advanced css
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
CS
W1
31
Ste
ven
B
att
ilan
a
1
CSW 131 – Chapter 5CSW 131 – Chapter 5(More) Advanced CSS(More) Advanced CSS
Prepared by Prof. B. for use withPrepared by Prof. B. for use withTeach Yourself Visually Web DesignTeach Yourself Visually Web Design
by Ron Huddleston, Wileyby Ron Huddleston, Wiley
CS
W1
31
Ste
ven
B
att
ilan
a
2
Style Multiple Elements Style Multiple Elements (pp. 128-129)(pp. 128-129)
In the event you want to In the event you want to style 2 or more elements identicallystyle 2 or more elements identically, , CSS makes it easy.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 element @ line 23 type:
h1, h2 h1, h2 [ [ NOTENOTE comma between elements to be styled ] comma between elements to be styled ]
{{font-family: Georgia, "Times New Roman", Times, serif;font-family: Georgia, "Times New Roman", Times, serif;
}}
SaveSave index.html index.html andand view view in browser; both h1 & h2 changed.in browser; both h1 & h2 changed. NoteNote: If element styles conflict, those : If element styles conflict, those listed last listed last apply.apply.
CS
W1
31
Ste
ven
B
att
ilan
a
3
Format Text with Spans Format Text with Spans (pp. 130-131)(pp. 130-131)
If you do NOT want to style an entire element, If you do NOT want to style an entire element, <span> <span> allowsallowsthe the styling of inline elementsstyling of inline elements , e.g., a couple of words within a , e.g., a couple of words within a paragraph, for selective styling.paragraph, for selective styling.
Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, in the 1, in the 1stst paragraph paragraph in the body in the body mark mark Lorem Ipsum Lorem Ipsum as follows with span as follows with span tags:tags:
<span><span>Lorem IpsumLorem Ipsum</span></span>
then style on a new line before then style on a new line before </style> </style> type:type:
spanspan{{font-weight: bold;font-weight: bold;font-style: italic;font-style: italic;}}
SaveSave index.html index.html andand view view in browser; just two words change.in browser; just two words change. NoteNote: Styles : Styles classclass & & idid provide even more flexibility (soon=>). provide even more flexibility (soon=>).
CS
W1
31
Ste
ven
B
att
ilan
a
4
Group Elements with Divs Group Elements with Divs (pp. 132-133)(pp. 132-133)
CSS allows the grouping of multiple elements on the page with CSS allows the grouping of multiple elements on the page with the same styles using the the same styles using the <div> <div> tag.tag.
Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, , in the body in the body on a new on a new line after the line after the h2h2 header line add a header line add a <div><div> tag: tag: <div><div>and the closing and the closing </div> </div> tag on a new line before tag on a new line before </body></body>::</div> </div> [everything between div tags are MARKed for styling][everything between div tags are MARKed for styling]then on a new line before then on a new line before </style> </style> type: type: [STYLE our MARKed [STYLE our MARKed items]items]divdiv{{margin-left: 20px;margin-left: 20px;border: 1px solid #540907;border: 1px solid #540907;background-color: #FFFFFF;background-color: #FFFFFF;width: 560px;width: 560px;}}
SaveSave index.html index.html andand view view in browser; a large area changed.in browser; a large area changed. NoteNote: : Inline elements use <span>Inline elements use <span> & & block-level elements use block-level elements use
<div> <div> ..
CS
W1
31
Ste
ven
B
att
ilan
a
5
Apply Styles with Classes Apply Styles with Classes (pp. 134-135)(pp. 134-135)
A A more targeted method to apply styles selectivelymore targeted method to apply styles selectively is by using is by using classesclasses. They are placed within a tag as . They are placed within a tag as class=“classname”class=“classname”, , and MUST start with a period within the style sheet, and MUST start with a period within the style sheet, e.g., e.g., .classname.classname..
Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, , in the body in the body edit the edit the opening opening <h3> <h3> header tag as follows, thus marking it for header tag as follows, thus marking it for styling:styling: <h3 <h3 class="contentSubhead"class="contentSubhead">Subheading within the >Subheading within the . . . . . . then on a new line before then on a new line before </style> </style> type: type: .contentSubhead .contentSubhead [use any name, but MUST start with a period][use any name, but MUST start with a period]
{{font-family: Georgia, "Times New Roman", Times, serif;font-family: Georgia, "Times New Roman", Times, serif;margin-left: 20px;margin-left: 20px;}}
SaveSave index.html index.html andand view view in browser.in browser. NoteNote: Classes : Classes can be used multiple times can be used multiple times wherever marked on wherever marked on
page.page. Note2Note2: : Class names Class names have have NO spaces NO spaces andand ARE case sensitive ARE case sensitive..
CS
W1
31
Ste
ven
B
att
ilan
a
6
Apply Styles with IDs Apply Styles with IDs (pp. 136-137)(pp. 136-137)
Another Another more targeted method to apply styles selectivelymore targeted method to apply styles selectively is by is by using using IDsIDs. They are placed within a tag as . They are placed within a tag as id=“idname”id=“idname”, and MUST , and MUST start with a pound sign (#) within the style sheet, e.g., start with a pound sign (#) within the style sheet, e.g., #idname#idname..
Unlike classes, Unlike classes, IDs can only be used ONCE within a pageIDs can only be used ONCE within a page.. Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, , in the body in the body edit the edit the
opening opening <div> <div> tag as follows, thus marking it for styling:tag as follows, thus marking it for styling: <div <div id="maincontent"id="maincontent">> && add add <!--end maincontent--><!--end maincontent--> after after </div></div>
then then comment out /*div style*/comment out /*div style*/, and on , and on a new line before a new line before </style> </style> type: type: #maincontent#maincontent[making sure to start with a pound sign (#)][making sure to start with a pound sign (#)]
{{margin-left: 20px;margin-left: 20px;border: 1px solid #540907;border: 1px solid #540907;background-color: #FFFFFF;background-color: #FFFFFF;width: 560px;width: 560px;}}
SaveSave index.html index.html andand view view in browser (no change -- same styles in browser (no change -- same styles used).used).
NoteNote: IDs : IDs have multiple useshave multiple uses: e.g., styles, targeting links, & : e.g., styles, targeting links, & JavaScript.JavaScript.
Note2Note2: : IDs take precedence over classesIDs take precedence over classes (they are more specific). (they are more specific).
Note X/HTML commentsNote X/HTML comments<!-- <!-- && --> --> differ differ
from CSS commentsfrom CSS comments
CS
W1
31
Ste
ven
B
att
ilan
a
For ease and convenience, For ease and convenience, contextual selectors let you style contextual selectors let you style elements that are within other elements elements that are within other elements (child of a parent (child of a parent element). Instead of using a comma to separate the elements element). Instead of using a comma to separate the elements in question (like when applying the same styling to multiple in question (like when applying the same styling to multiple elements, the elements, the elements are separated by spaces, with the elements are separated by spaces, with the LAST element being styledLAST element being styled. .
Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, on a new line , on a new line before before </style> </style> type the parent element or ID, a space, and type the parent element or ID, a space, and the child element: the child element: #maincontent p #maincontent p [maincontent = parent and p = marked child [maincontent = parent and p = marked child element]element]
{{text-indent: 0;text-indent: 0;padding-top: 20px;padding-top: 20px;}}
SaveSave index.html index.html andand view view in browser.in browser. NoteNote: Multiple levels can be used, separated by spaces, e.g., : : Multiple levels can be used, separated by spaces, e.g., :
#content p img #content p img would style the image within a paragraph would style the image within a paragraph within a division named content (only within a division named content (only imgimg is styled). is styled).
7
Use Contextual Selectors Use Contextual Selectors (pp. 138-139)(pp. 138-139)
So only the “child”So only the “child”pp within within maincontentmaincontentis being styled.is being styled.
CS
W1
31
Ste
ven
B
att
ilan
a
8
Use Pseudo-Elements Use Pseudo-Elements (pp. 140-141)(pp. 140-141)
For special situations, you can target an element (or ID or For special situations, you can target an element (or ID or class). Typically class). Typically first-linefirst-line or or first-letterfirst-letter they follow the they follow the element using a the format element using a the format element:pseudo-elementelement:pseudo-element as in as in the following example: the following example:
Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, on a new line , on a new line before before </style> </style> type the parent element or ID, a space, and type the parent element or ID, a space, and the child element: the child element: #maincontent p:first-line #maincontent p:first-line [marking 1[marking 1stst line of the p] line of the p]
{{font-weight: bold;font-weight: bold;}}
SaveSave index.html index.html andand view view in browser.in browser. NoteNote: Only the 1: Only the 1stst line of the paragraph within #maincontent line of the paragraph within #maincontent
changes.changes. Note2Note2: Browsers tend to ignore pseudo-elements applied to : Browsers tend to ignore pseudo-elements applied to
non-text.non-text.
Try using Try using first-letterfirst-letter with with font-size: 200%; font-size: 200%; etc.etc.
CS
W1
31
Ste
ven
B
att
ilan
a
9
Use Pseudo-Classes Use Pseudo-Classes (pp. 142-143)(pp. 142-143)
Pseudo-classes Pseudo-classes can apply a style to an element can apply a style to an element based on its based on its current statecurrent state, with a major use being , with a major use being link styleslink styles. Five . Five common states are:common states are:
Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, on a new line , on a new line before before </style> </style> we will set all five states for links on this we will set all five states for links on this page: page:
Continued . . . Continued . . .
Most commonly used pseudo classes and their states
a:link Link in its normal state
a:visited Link used to visit target of link
a:hover Applies when user “mouses over” link
a:active Applies when link is being clicked
a:focus Style when user jumps to link using Tab key
CS
W1
31
Ste
ven
B
att
ilan
a
10
Use Pseudo-Classes Use Pseudo-Classes (pp. 142-143 CONT.)(pp. 142-143 CONT.)
SaveSave index.html index.html andand view view in browser. Experiment with the link.in browser. Experiment with the link. NoteNote: See “Tip” on p. 143 regarding the pseudo-class first-: See “Tip” on p. 143 regarding the pseudo-class first-
child.child.
Type these 5 itemsone after the otheron your page (thisdisplay 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;}
CS
W1
31
Ste
ven
B
att
ilan
a
11
Create an External Style Sheet Create an External Style Sheet (pp. 144-145)(pp. 144-145)
A major feature of CSS is being able to create A major feature of CSS is being able to create one external one external sheet sheet of styles that of styles that can be linked to as many web pages in can be linked to as many web pages in your site as you wishyour site as you wish. Called an . Called an external style sheetexternal style sheet, a , a .css .css file extension is common: file extension is common:
Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, place an , place an opening (X/HTML) comment tag opening (X/HTML) comment tag <!-–<!-– before before <style><style>, and a , and a closing comment tag closing comment tag -->--> after after </style> </style> (again using XHTML, (again using XHTML, not CSS comment tags) .not CSS comment tags) . Save index.html and view, noting styles are gone.
Copy all of the text on the lines BETWEEN the Copy all of the text on the lines BETWEEN the <style> <style> and and </style> </style> tags.tags.
Open a new blank file in Notepad++, then click Edit, then Open a new blank file in Notepad++, then click Edit, then Paste.Paste. Save this new document as styles.css
NoteNote: Remember, virtually all websites use a : Remember, virtually all websites use a combinationcombination of of an an external style sheetexternal style sheet, and , and embedded styles embedded styles within some within some or all of the individual web pages. or all of the individual web pages. Embedded styles take Embedded styles take precedenceprecedence..
CS
W1
31
Ste
ven
B
att
ilan
a
12
Link a Style Sheet to a Page Link a Style Sheet to a Page (pp. 146-147)(pp. 146-147)
Once you create an Once you create an external sheet external sheet you you can easily link it to a can easily link it to a web pageweb page. The link is placed in the head section of the . The link is placed in the head section of the document, and has three required attributes: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" /><link type="text/css" rel="stylesheet" href="styles.css" />
In In index.html index.html (using(using Notepad++ Notepad++), type the above line before ), type the above line before </head></head>
SaveSave index.html index.html andand view view in browser. All styles are applied in browser. All styles are applied again.again.
CS
W1
31
Ste
ven
B
att
ilan
a
13
Use the Cascade Use the Cascade (pp. 148-149)(pp. 148-149)
Remember, virtually all websites use a combination of at least Remember, virtually all websites use a combination of at least one external style sheet, and embedded styles within some or one external style sheet, and embedded styles within some or all of the individual web pages. Embeddied styles take all of the individual web pages. Embeddied styles take precedence, allowing you to use the cascade simply and at your precedence, allowing you to use the cascade simply and at your convenience. convenience.
Continuing in Continuing in index.html index.html usingusing Notepad++ Notepad++, before , before </head></head> type: type: <style type="text/css"><style type="text/css">#top#top{{font-style: italic;font-style: italic;text-transform: capitalize;text-transform: capitalize;}}</style></style>
SaveSave index.html index.html andand view view in browser. This embedded style in browser. This embedded style takes precedence over the styles in the external style sheet.takes precedence over the styles in the external style sheet.
VERY ImportantVERY Important: Take note of the important “Tip” on p. 149 : Take note of the important “Tip” on p. 149 regarding precedence and how it works depending on different regarding precedence and how it works depending on different situationssituations. . Make a special note to yourself about this tip as a Make a special note to yourself about this tip as a future referencefuture reference..
CS
W1
31
Ste
ven
B
att
ilan
a
14
To Do ListTo Do List
Read Chapter 5Read Chapter 5 Revisit what we did in classRevisit what we did in class
Be careful as we do not follow book Remember, MUCH more detail about anything Remember, MUCH more detail about anything
we cover is: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”?