How HTML elements get their style properties and how CSS conflicts are resolved

Jump to: navigation, search

Here are seven ways that HTML elements get style properities. In all cases we will use the _font-size_ property as an example. You should be thinking about order-of-precedence in the examples below. Order-of-precedence define how style-conflicts are resolved. The cases below are listed from lowest (weakest) to highest (strongest) order of precedence. I will touch more on this at the end, so no worries if you don't understand what this order means yet. For all cases, the external style sheet, "my_style_sheet.css", is empty except for the lines shown. In other words, the cases do not build off each other. We also only consider the case of external style sheets. You could embed an internal style sheet within the head tag of an HTML page, but that is considered bad practice, from a maintenance and "seperation of concerns" point of view. Here is the HTML used by all the cases below. Note that line 3 calls an external sstyle sheet. It assumes you created a sub-folder called "css" and in that sub-folder created a file called "my_style_sheet.css" <html> <!--Line 1--> <head> <!--Line 2 --> <link type="text/css" href="css/my_style_sheet.css" rel="stylesheet" /> </head> <body> <p id="First_Paragraph" class= "welcome">Hello</p> <h1 id="First_Heading" class="welcome">Buen Dia</h1> </body> <!--Line 8--> </html> <!--Line 9--> As you can see _id_ is a unique identifier. But several elements, even different types of elements , can belong to the same class. Class and id names can be anything you like. Case 1: Nothing in my_style_sheet.css -> browser defaults In this case "my_style_sheet.css" is an empty file. So the fact that you stated a _class_ and _id_ on lines 6 and 7 doesn't matter. Because _font-size_ isn't specified anywhere, the browser uses its default settings. In this case "Hello" font-size is 12px (?) "Buen Dia" font-size is 16px (?) Note, actual default values depend on the browser and the user's settings. These values are not likely typical defaults and are just used for illustration. Case 2: Inherit style from parent element Here's what's in my_style_sheet.css for case 2: body { font-size:14px; } because _p_ and _h1_ are children of _body_, they should inherit the _font-size_ style defined for _body_. Meaning both "Hello" and "Buen Dia" will be 14px. Inheritance is tricky because in many cases you need to explictily declare that a property is inhereted. You would do this for the child element and not the parent. Case 3: style defined for element Here's what's in my_style_sheet.css for case 3: h1 { font-size:18px; } p { font-size:10px; } Results: "Hello" in 10px "Buen Dia" in 18px. Case 4: style defined by class Here's what's in my_style_sheet.css for case 4: .welcome { font-size:14px; } In this case both "Hello" and "Buen Dia" will be 14px because they both belong to the welcome class. Had the body had another h1 tag like: <h1>Konichi Wa</h1> then that "Konichi Wa" would not be 14px (it would be the default of 16px). Case 5: style defined for element and class Here's what's in my_style_sheet.css for case 5: p.welcome { font-size:10px; } h.welcome { font-size:18px; } Results are "Hello" in 10px "Buen Dia" in 18px. (FYI, same as Case 4 "Konichi Wa" would be 16px.) Case 6: style defined by id Here's what's in my_style_sheet.css for case 6: #First_Heading { font-size:18px; } Results are "Hello" in 12px "Buen Dia" in 18px. "Hello" is 12px because that is the default. And it is the default because you didn't specify it's _font-size_ anywhere. Case 7: In line style Here's what's in my_style_sheet.css for case 6: #First_Heading { font-size:18px; font-weight:normal; } And now lets suppose that Line 7 in the HTML reads the following way <h1 id="First_Heading" class="welcome" style="font-size:24px;">Buen Dia</h1> Now "Buen Dia" -- which by default is 16px and bold -- is 24px but NOT bold. This goes back to the order of precedence mentioned earlier. In this case the highest order of precendence is Case 7 -- "in-line style". You can see there is a conflict between the inline style of 24px and the external style sheet of 18px. In-line style always wins. But in the case of _font-weight_, in-line style didn't specify anything but the external style sheet states "normal". One last point. The example's simplicity makes it silly to define classes and id's. In this case you would have simply styled with in-line style and be done with it. Also note that you can consolidate similar styles for example p { font-size:14px; } h { font-size:14px; } could be abbreviated as p h { font-size: 14px; } you can also mix classes, id's, and elements. #First_Heading p.welcome body { font-size:14px; } One extra last point, you can modify the style property using client-side scripting. I personally use the jQuery JavaScript library for this purpose. Here's an example: $("#First_Heading").css('font-size', '18px'); Scripting is outside the scope of this discussion. Hope this was helpful lp

See also

Personal tools