IDs versus Classes Naming Your Tags for Maximum Functionality

Common Quiz Problems- Change Header Info Title for Browser Tab

Common Quiz Problems- Not properly closing img tag  / is needed at the end  There needs to be a single space between the “ and the /

Common Quiz Problems- unneeded or to make space that is already there Basic Html Page blah blah blah  Remember, block level elements (like,,, come with auto margin above and below– all the space you need

Common Quiz Problems- unneeded or to make space that is already there tortor posuere. Course Site me here  Links are inline (no space above and below) but the above the link pushes it down  has no space; therefore, the is needed around the address to provide white space between the course link and the link

Usability Notes  Alt tags should be as specific as possible   Not so good   Better. Think of what the person needs to read/hear if pic doesn’t load or if they are visually impaired

Usability Notes   Heading tags provide visual hierarchy to page  The most important heading tag on your page  Google recommends only one use of the H1 per page  H1 should be largest, boldest, most emphasized heading on page  Should contain key words for SEO (search engine optimization)  Though there is some debate as to how important this is  Should not be wrapped in an image 

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.

An Element Can Only Behave One Way ... Unless we use IDs and Classes!  An will behave a certain way with no CSS styling (browser default)  We can go to the CSS and make the H1s be a different font, size, bolding, etc.  But we’re left with the problem that ALL h1s will then do that and sometimes we want one (or some) to be H1s but behave slightly differently

An Element Can Only Behave One Way  And it’s not just H1s– ANY element can technically have an ID or Class applied to it One type of Link Another type of Link  Again, without IDs and Classes, links could only look one way.

IDs  Short for identifier.  An ID is a unique identifier for an element  They are most often used to mark page divisions ( )  Examples:  Content goes here 

They’re Attributes and Written the Same Way  IDs are written into the HTML with the tag/element name, an equal sign, and the ID name in quotation marks   One paragraph that might be stylized differently from the rest of the paragraphs on the page.   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

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. It can be used again on a different page in the same site.  You Can’t Do This:  (has more than one ID)   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.

IDs and CSS  IDs are targeted (or hooked into) on the CSS page with a hash mark (#) in front of the id name HTML Content CSS #container { width: 800px; height: auto; background-color: black; } 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.

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.

Target Multiple Elements with Same Class   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.

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. Home Spider- Man a.link { font-family: arial, sans-serif; font-size: 12px; } a.bodylink { font-family: arial, sans-serif; font-size: 15px; color: green; } HTML CSS

Stacking Classes  I rarely do it, but unlike IDS, you can technically stack multiple classes on an element  Now this image, and just this image, will display as a block with a decorative border. Images not given these classes will behave per usual.

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 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 .

Summary  Often you’ll just use a tag’s name by itself  This is a paragraph.  For a unique, occasional stylistic change you might add a class name  This is paragraph with special stylized emphasis  Sometimes you’ll want a style that you can apply to multiple elements, multiple times with a class   You’ve set up the possibility for paragraphs and unordered lists to both have a special emphasis styling

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   IDs are most often used on division sections of site layout: heading, navigation, left column, right column, footer, etc.

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 tag to take on additional properties that the other fancyscript class members will not have