1 / 13

IDs versus Classes

IDs versus Classes. Naming Your Tags for Maximum Functionality. Those Tags Again. Tags do a pretty good job of allowing us to mark up text that will then provide us the chance to style it with CSS. However IDs and Classes allow us even more possibilities for layout and design.

andren
Download Presentation

IDs versus Classes

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. IDs versus Classes Naming Your Tags for Maximum Functionality

  2. Those Tags Again • Tags do a pretty good job of allowing us to mark up text that will then provide us the chance to style it with CSS. • However IDs and Classes allow us even more possibilities for layout and design. • Some designers think of IDs and Classes as HOOKS. • They are ways of sinking hooks into our tags that allow CSS to get a hold of them more precisely.

  3. IDs • Short for identifier. • An ID is a unique identifier for an element • They are most often used to mark page divisions (<div>) • Examples: • <div id=“container”></div> • <div id=“ banner”></div> • <div id=“content”></div> • <div id=“sidebar”></div> • <div id=“footer”></div>

  4. IDs on Different Element Kinds • IDs are written into the HTML with the tag/element name, an equal sign, and the ID name in quotation marks • <p id=“fancyquote”> • One paragraph that might be stylized differently from the rest of the paragraphs on the page. • <ul id=“navigation”> • An unordered list that will be turned into a navigation bar with CSS • NOTE: BOTH ID AND CLASS NAMES CAN BE MADE UP. BUT YOU USUALLY WANT TO NAME BY FUNCTION

  5. Rules • IDs • Each element can have only one ID • Each page can only have one element with that ID • Once you use an ID on a page, you can not use it on that page again. • You Can’t Do This: • <div id=“footer” id=“container”> (has more than one ID) • <div id=“column”> • <ul id=“column”> • You’ve got a div and an unordered list with the same ID. • This will not validate and probably not give the effect you want.

  6. IDs and CSS • IDs are targeted (or hooked into) on the CSS page with a hash mark (#) in front of the id name CSS #container { width: 800px; height: auto; background-color: black; } HTML <div id=“container”> </div> The CSS creates a container for the page that is 800 pixels wide, has a height that automatically expands as large as is needed, and has a background color of black.

  7. Classes • Classes are much more flexible. • They are not unique. • Classes let you take a style that might be used often in your document and apply it liberally all around. • Classes also let you style an element differently from how its styled by default without the class applied.

  8. Target Multiple Elements with Same Class • <p class=“fancyscript”></p> • <li class=“fancyscript”></p> • CSS • .fancyscript{ font: blackadder; } • Now any element you assign a “fancyscript” class will appear in the blackadder font. • Note: in CSS, classes are identified with a period (.) in front of the class name.

  9. Two (or more) different kinds of an element • I often have different link styles for my navigation versus inside the body text. Classes work wonders here. HTML CSS <a href=“http://markdpepper.com”>Home</a> <a class=“bodylink” href= “http://wikipedia.org/spider-man”>Spider-Man</a> a.link { font-family: arial, sans-serif; font-size: 12px; } a.bodylink { font-family: arial, sans-serif; font-size: 15px; color: green; }

  10. A Useful Metaphor • Think of an ID as a student’s unique Student ID Number • This student ID# allows me to address one unique singular student. I can send an email to just him or her. • Think of a Class as a way to address every single person who is a member of that class • I can address everyone in the Digital Document Design at once. I can send out a course email.

  11. Summary • Often you’ll just use a tag’s name by itself • <p>This is a paragraph.</p> • For a unique, one time stylistic change you might add an ID name • <p id=“emphasis”>This is paragraph with special stylized emphasis</p> • Sometimes you’ll want a style that you can apply to multiple elements, multiple times with a class • <p class=“emphasis”></p> • <ulclass=“emphasis”></ul> • You’ve set up the possibility for paragraphs and unordered lists to both have a special emphasis styling

  12. Summary • ID names and classes are written in the HTML by first writing the tag name immediately followed by id or class, an equals sign, and the id or class name in quotations • <div id=“container”></div> • <ul class=“navigation”></ul> • The closing tag never repeats the id or class name. It merely contains the closing slash and the tag name

  13. Summary • In the CSS, IDs are targeted with a hashmark and the id name • #container { • Classes are either identified by themselves with a period • .fancyscript { • Or identified with the accompanying element if it needs to be targeted too (i.e. other elements have that class but you don’t want them to take on the specific property) • blockquote.fancyscript { • You want the <blockquote> tag to take on additional properties that the other fancyscript class members will not have

More Related