1 / 64

Adding Cowbell to Your Site with CSS - Enhancements and Techniques Explained

Explore the exciting world of CSS in this insightful presentation by Rob Porter from Penn State's TLT Studio. Discover various ways to enhance your website's styling through advanced CSS techniques, including substring matching attribute selectors, pseudo-elements, and child selectors. Learn how to efficiently apply styles based on element attributes, create styled content before and after elements, and leverage sibling combinators for flexible design structures. Dive into practical examples and elevate your web development skills!

amma
Download Presentation

Adding Cowbell to Your Site with CSS - Enhancements and Techniques Explained

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. Adding More Cowbell to your Site with CSS Rob Porter - Penn State - TLT Studio @robzonenet Examples from the talk: https://dl.dropboxusercontent.com/u/7733060/cowbell-talk/index.html

  2. CSS

  3. CSS is Awesome

  4. CSS is Awesome http://www.zazzle.com/css_is_awesome_coffee_mug-168716435071981928

  5. http://inspectelement.com/wp-content/uploads/2013/03/Q3cUg29.gifhttp://inspectelement.com/wp-content/uploads/2013/03/Q3cUg29.gif

  6. http://f3nation.com/wp-content/uploads/2013/01/Walken.jpg

  7. Substring Matching Attribute Selectors • Attribute selectors let you target an element based on its attributes.

  8. Substring Matching Attribute Selectors • [att=value] exact value • [att~=value] whitespace separated list of words • [att|=value] starts with and is immediately followed by - • [att^=value] starts with • [att$=value] ends with • [att*=value] contains

  9. Substring Matching Attribute Selectors [att=value]“exact value” example input[type="text"] { width: 200px; }

  10. Substring Matching Attribute Selectors [att$=value] “ends with” example a[href$=".png"] { background: url(mypngicon.gif) no-repeat left 50%; padding: 2px 0 2px 20px; }

  11. Substring Matching Attribute Selectors [att*=value] “contains” example ul li a[href*="google.com"] { background-image: url(demo-images/google.png); }

  12. Pseudo-elements

  13. Pseudo-elements • ::first-letter • ::first-line • ::before • ::after

  14. Pseudo-elements ::before, ::after Adding Content to your site HTML <ul> <li class="email-address">robzonenet@gmail.com</li> </ul> CSS .email-address::before { content: "Email address: "; } Result • Email address: robzonenet@gmail.com

  15. Pseudo-elements ::before, ::after Adding Content to your site HTML <a href=“http://studio.tlt.psu.edu/“>TLT STUDIO</a> is great CSS @media print { #content a::after { content: " (" attr(href) ") "; } } Printed Paper TLT STUDIO (http://studio.tlt.psu.edu) is great

  16. Child Selectors ul > li { margin: 0 0 5px 0; }

  17. Child Selectors ul > li { margin: 0 0 5px 0; } ul li { margin: 0 0 5px 0; }

  18. Child Selectors ul > li { margin: 0 0 5px 0; } Descendants ul li { margin: 0 0 5px 0; } Children

  19. Child Selectors • HTML • <ul> • <li>List item one</li> • <li>List item two • <ol> • <li>Nested list item one</li> • <li>Nested list item two</li> • </ol></li> • <li>List item three</li> • </ul> CSS Children ul li { color: red; } Descendants ul > li { color: yellow; }

  20. Child Selectors • HTML • <ul> • <li>List item one</li> • <li>List item two • <ol> • <li>Nested list item one</li> • <li>Nested list item two</li> • </ol></li> • <li>List item three</li> • </ul> CSS Children ul li { color: red; } Descendants ul > li { color: yellow; }

  21. Child Selectors • HTML • <ul> • <li>List item one</li> • <li>List item two • <ol> • <li>Nested list item one</li> • <li>Nested list item two</li> • </ol></li> • <li>List item three</li> • </ul> CSS Children ul li { color: red; } Descendants ul > li { color: yellow; }

  22. Adjacent Sibling Combinators p + p { color: red; }

  23. Adjacent Sibling Combinators CSS p + p { color: red; } div + p { color: yellow; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <div>Box</div> • <p>Line Three</p> • </div>

  24. Adjacent Sibling Combinators CSS p + p { color: red; } div + p { color: yellow; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <div>Box</div> • <p>Line Three</p> • </div>

  25. Adjacent Sibling Combinators CSS p + p { color: red; } div + p { color: yellow; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <div>Box</div> • <p>Line Three</p> • </div>

  26. General Sibling Combinators p ~ p { color: red; }

  27. General Sibling Combinators CSS p ~ p { color: red; } div ~ p { color: yellow; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <div>Box</div> • <p>Line Three</p> • </div>

  28. General Sibling Combinators CSS p ~ p { color: red; } div ~ p { color: yellow; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <div>Box</div> • <p>Line Three</p> • </div>

  29. General Sibling Combinators CSS p ~ p { color: red; } div ~ p { color: yellow; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <div>Box</div> • <p>Line Three</p> • </div>

  30. Pseudo-classes • :link • :visited • :hover • :active

  31. Pseudo-classes • :first-child • :last-child • :nth-child(N) • :nth-of-type(N) • :first-of-type • :last-of-type

  32. Pseudo-classes:first-child CSS p:first-child { color: red; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <p>Line Three</p> • <div>**Box**</div> • <p>Line Four</p> • <p>Line Five</p> • </div>

  33. Pseudo-classes:first-child CSS p:first-child { color: red; } • HTML • <div> • <h2>H2</h2> • <p>Line One</p> • <p>Line Two</p> • <p>Line Three</p> • <div>**Box**</div> • <p>Line Four</p> • <p>Line Five</p> • </div>

  34. Pseudo-classes:nth-child(N) CSS p:nth-child(3) { color: red; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <p>Line Three</p> • <div>**Box**</div> • <p>Line Four</p> • <p>Line Five</p> • </div>

  35. Pseudo-classes:nth-child(N) CSS p:nth-child(2n) { color: red; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <p>Line Three</p> • <div>**Box**</div> • <p>Line Four</p> • <p>Line Five</p> • </div>

  36. Pseudo-classes:nth-child(N) CSS p:nth-child(2n+1) { color: red; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <p>Line Three</p> • <div>**Box**</div> • <p>Line Four</p> • <p>Line Five</p> • </div>

  37. Pseudo-classes:nth-child(N) p:nth-child(An+B) A = Cycle Size n = Counter starting at zero(A*0, A*1, A*2,…) B = Offset value used to determine where the iteration will begin

  38. Pseudo-classes:nth-child(N) p:nth-child(odd) p:nth-child(even)

  39. Pseudo-classes:nth-last-child(N) p:nth-last-child(2n+3)

  40. Pseudo-classes:nth-of-type(N)

  41. Pseudo-classes:nth-of-type(N) CSS p:nth-of-type(2n+1) { color: red; } • HTML • <div> • <p>Line One</p> • <p>Line Two</p> • <p>Line Three</p> • <div>**Box**</div> • <p>Line Four</p> • <p>Line Five</p> • </div>

  42. Math in CSS? calc()

  43. Math in CSS? .sidebar { width: 35%; float: left; margin-right: 1em; } .content { width: calc(65% - 1em); float: right; }

  44. Math in CSS? .column-1-12 { width: 8.333%; } .column-2-12 { width: 16.6667%; } .column-3-12 { width: 25%; }

  45. Math in CSS? .column-1-12 { width: calc(100% / 12); } .column-2-12 { width: calc(100% / 12 * 2); } .column-3-12 { width: calc(100% / 12 * 3); } .column-1-12 { width: 8.333%; } .column-2-12 { width: 16.6667%; } .column-3-12 { width: 25%; } =>

  46. Font Icons • Actually Font Characters • Scales nicely • aria-hidden="true"

  47. Free Font Icons • http://icomoon.io/ • http://fortawesome.github.io/Font-Awesome/icons/ • http://fontello.com/

More Related