Handout-Advanced CSS Topics

Lists

• Already familiar with <ol>, <ul>, and <dl>

• Marker – bullet in unordered list

  • Page 371 of textbook refers to CSS 2.1 values

• Have already seen effect of list-style-type: none; to remove bullets from the list

  • We combined this with display: inline; to get a horizontal navigation bar from unordered list

• We can also give lists a different bullet image than the customary by using list-style-image: url(whatEver.gif);

  • Will generate the image for each item in list

    • Make certain images are sized appropriately

---

Lists continued

• List marker positions

  • List-style-position

    • Default is outside, but could specify inside

    • See page 375 for example

• Can also specify margins and padding

  • Can use these for indentation devices for most modern browsers

---

Generated content

• Content is created by the browser

  • Not represented in markup or content

  • Not a part of the DOM (Document Object Model)

  • Rely on :before and :after

    • a[href]:before { content: “(link)”; }

    • Will place the text (link) in front of each link on the page

      Google Link , for example (**View in Firefox, doesn't work in IE at this point**).

  • Might be helpful to identify the type of content you are linking to (for example: PDF file)

  • Can also be helpful to actually include link

---

Generated Content-links

• Consider that I want to use media=“print” in my CSS

  • a: link: after {
    content: “ (“ attr(href) “ ) “;
    }
    

  • This will add information regarding the actual location of the file on the printed version of the link

    • Do print preview in Firefox (IE is a problem child)
      If you print my handouts from Firefox, link locations will display. I have the following in my print stylesheet:
      a:link:after, a:visited:after {
      content: " (" attr(href) ") ";
      font-size: 90%;
      }
      
      Here's an example link

---

Generated Content (continued)

• When you include content, you can’t use HTML as part of the content

  • To go to new line use \A

  • Not that widely supported

• Note that we used attr(href) to actually insert the value of the attribute

• If the attribute doesn’t exist, an empty string is inserted

---

Counters

• counter-reset

  • To reset the starting point for a counter

    • h2#ch3 {counter-reset: chapter 3; }

• counter-increment

  • Every level of nesting provides new scope for counters also

    For example, I have given the list below an id of counter, and placed the following code in my css:
    #counter {counter-reset: item 3;}
    #counter li:before {counter-increment: item;
    content: counter(item) ".";
    }
    

    *note, may need to view in Firefox, it should have both bullets and numbers.

    • This should be item 4
    • This is 5
    • This is 6

  • Try in IE and Firefox

  • As you can see, support is sporadic at best

---

User Interface Styles

• You can use CSS to make the visitor’s experience more enjoyable or more confusing

• Consider these font keywords:

  • Caption, icon, menu, message-box, small-caption, status-bar

    Example: body {font: icon;}

  • These are keywords that basically say, "make my font look like the icon font on the user system" and "make my font look like font on the user system menu". Used to style the web page so it is more like the desktop. So, the above style will set the font in the body to look like the font under the system icons.

  • Can also style other parts of browser to match the style on the users desktop

    • See pages 398 – 399 in textbook for examples

---

Changing the cursor

• Use cursor property

  • Values include: pointer, crosshair, move, text, wait, help, progress

    Can also change to a customized cursor. For example:
    body {cursor: url(globe.gif), pointer}

---

Outlines

• Similar to a border

  • But they do not participate in the flow of the document

  • They can be non-rectangular (meaning, if applied to an inline element, the outline may not be a box but may look like two offset stacked boxes-see page 405).

  • Properties include outline-style, outline-width, outline-color

    For example, p {outline-style: dotted; outline-width: 10px; outline-color: #ff0000;}

    See pages 404-410 of your book for examples

---

Non-screen media

• Can designate styles for specific media. Can be done by creating a stylesheet partiularly for that media (for example, in a linked style sheet, you would use the media= property: <link … media=“print” or projection or screen or more)

---

Media=“print”

• Can designate rules for a page:

  • @page { size 7.5in 10in; margin: 0.5in; “

  • @page { size: landscape; }

  • Page-break-before or page-break-after;

  • Consider h2 {page-break-before: always; }

    • Really don’t understand why more authors don’t employ these features on their pages

    • Yes, there is some sporadic support, but it is improving with each release

  • Also support for widows and orphans (page 422)

---

Media=“projection”

• Can go full screen mode and make “slides” just like PowerPoint

  • Many browsers need an extension or addon to accomplish

---

Media=“aural”

• Limited support at this time

• speak: spell-out; as an example

• speak-punctuation: code;

• speak-header: always;

  • For table headers

• speech-rate: slow;

• volume: soft;

• voice-family: male (need XML file, etc.)

• pitch: high;

---

Lab 5

• Use Eric Meyer’s S5 modified template as an example (linked in Moodle)

  • Develop a short (2 – 3 slides) presentation outlining why an employer should hire you as a web designer

  • Presentation should be able to display in projection/ full screen mode

  • Select another color scheme than blue (perhaps brown)

---

Projects

• We will be working on these soon

• Project 1 will continue our practice with working with CSS

• Project 2 is to develop a portfolio of your work

  • Starting with CMWEB 110 class through this one

  • Might want to start tracking down examples

  • Obviously, you will build this with emphasis on CSS

---

Summary

• Focused on additional CSS capabilities

  • Generated content

  • User interface styles

  • Non-screen media