1 / 17

Understanding the Basics of CSS: Styles, Selectors, and Implementation in HTML

This guide provides an overview of Cascading Style Sheets (CSS) fundamentals, focusing on how to correctly use CSS in HTML documents. Discover the methods of applying styles internally and externally, learn about different CSS selectors, and understand how to effectively select HTML elements using IDs, classes, and tag names. With practical examples, such as styling a humorous phrase, you'll grasp essential syntax rules, naming conventions, and background styling techniques. Get ready to enhance the visual appeal of your web pages!

telyn
Télécharger la présentation

Understanding the Basics of CSS: Styles, Selectors, and Implementation in HTML

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. Cascading Style Sheets - CSS • basics

  2. CSS use in html • Internally • <head>…<style>…css…</style>…</head> • <tag style=”…”> • Externally • <link rel="Stylesheet" href= "ICS255.css" media="screen">

  3. Selectors • terminology to remember! • Selectors “select” items on the page • such as: • all H1 tags & all H2 tags • 1 tag with the ID “fred” • all tags classified “cats”

  4. 3 ways to apply a style • Selectors = What/how to “select” the tags you want to apply style attributes to • 3 CSS Selectors • tagname (aka element name) • .classname (class attribute) • #idname (id attribute)

  5. SillyPhrase Animal The fox jumped over the lazy dog <p id=”sillyphrase”>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p>

  6. SillyPhrase Animal The fox jumped over the lazy dog • Selectors: (3 ways to apply a style) • IDs - can only be used ONCE • Class - can be used many times • tag - all of that tag, ex: b is all <b> tags

  7. CSS Syntax • similar to Java/C/JavaScript syntax ;;;; • /* block comments, no line comments*/ • Selector { property: value; } • is a tagname, #idname, or .classname • Selector1 selector2 selector3 {…}

  8. SillyPhrase <p id=”sillyphrase”>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p> Animal The fox jumped over the lazy dog .animal { color: blue;font-weight: bold;} #sillyphrase { background-color: green; }

  9. <div> <span> • Do nothing - exist so you can use class=”” • Two for technical reasons • Block tags - take 100% width: <p><h1> • Inline tags - “flow” within: <b><em> • Modern browsers handle this old problem but you shouldn’t push your luck

  10. SillyPhrase <p id=”sillyphrase”>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p> Animal The fox jumped over the lazy dog .animal { color: blue;font-weight: bold;} #sillyphrase { background-color: green; }

  11. SillyPhrase <p id=”sillyphrase”>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p> Animal The fox jumped over the lazy dog • .animals is applied to everything that has the class= “animals” • #sillyphase could be made RED, and then the fox and dog (animals) would inherit the RED color • .animals are black, no matter what color #sillyphrase is

  12. Backgrounds • background-color: #ff00ff • background-image: url( ) • background-repeat: repeat-x, repeat-y, repeat, no-repeat, inherit • background-position: x y; • background-attachment: scroll, fixed

  13. Typical Selector Use • classes are the most flexible • multiple selectors (or complex query) • .classname {…properties...} • .classname h1 {…properties...} • all class=”classname” tags • filter search results: all <h1> tags

  14. <p>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p> animal The fox jumped over the lazy dog p .animal { color: yellow;} p.animal { background-color: red;}

  15. Naming Conventions • If you didn’t notice… • it is all LOWERCASE + no spaces on names • background color = background-color • colors in CSS • named (a short list) red, blue, green… • #99CC33 → #9C3

  16. Next… • Use CSS references / tools • Most HTML tags come with built-in properties, which you can override with CSS • Use LIVE CSS editor to learn (Firefox) part of the Web Developer Tool add-on • FireBug for Firefox & Google Chrome

  17. CSS3 properties • Draft finalized end of 2005? still in draft 2010… • Browser support initially limited • Problems: • buggy limited support • POORLY designed standard

More Related