Pergunta de entrevista da empresa Autotrader

what is the difference in a class and id in CSS?

Respostas da entrevista

Sigiloso

26 de mai. de 2009

class can be used over and over in a document for a style and an ID can only be used once for a specific section such as id=header, etc...

Sigiloso

30 de jul. de 2011

An element with a given ID can be styled in CSS using '#' followed by the given ID. The HTML standard states that IDs are unique and will only correspond to one element. For example: #header-logo { background-image: url(''/images/logo.jpg') no-repeat center center; } Elements with a given class can be styled in CSS using '.' followed by the given class. Any number of elements can share a class. For example: .blue-box { background-color: #99f; border: 1px solid #333; margin: 10px 0; height: 100px; width: 100px; } Bonus points: Unless the HTML is non-standards compliant, styling an element of a given ID should never include the element's parents or its own tag name. For example, this is bad: p#intro-paragraph { font-size: 12px; margin: 10px 30px; } It will first look at every <p> tag, then compare each of them against the ID "intro-paragraph". For efficiency, this will do: #intro-paragraph { font-size: 12px; margin: 10px 30px; } Also, it's possible to chain classes in CSS: .blue-box.first-box { margin-top: 0px; } Note that older versions of internet explorer (as recent as 7 I believe) do not support this. For an element with both classes "blue-box" and "first-box", be careful not to write this as ".blue-box .first-box { ... }". This is because the space between the classes indicates a parent-child relationship and so it will look for an element within the blue-box with a class of first-box (undesired).</p>

Sigiloso

30 de jul. de 2011

An element with a given ID can be styled in CSS using '#' followed by the given ID. The HTML standard states that IDs are unique and will only correspond to one element. For example: #header-logo { background-image: url(''/images/logo.jpg') no-repeat center center; } Elements with a given class can be styled in CSS using '.' followed by the given class. Any number of elements can share a class. For example: .blue-box { background-color: #99f; border: 1px solid #333; margin: 10px 0; height: 100px; width: 100px; } Bonus points: Unless the HTML is non-standards compliant, styling an element of a given ID should never include the element's parents or its own tag name. For example, this is bad: p#intro-paragraph { font-size: 12px; margin: 10px 30px; } It will first look at every <p> tag, then compare each of them against the ID "intro-paragraph". For efficiency, this will do: #intro-paragraph { font-size: 12px; margin: 10px 30px; } Also, it's possible to chain classes in CSS: .blue-box.first-box { margin-top: 0px; } Note that older versions of internet explorer (as recent as 7 I believe) do not support this. For an element with both classes "blue-box" and "first-box", be careful not to write this as ".blue-box .first-box { ... }". This is because the space between the classes indicates a parent-child relationship and so it will look for an element within the blue-box with a class of first-box (undesired).</p>