Menu
This came up from another question that was asked here but I figure it's something that probably has a "Best Practice" Approach.
When designing a website, the designer will most likely put together a set of generic styles for all elements within a website. (Standard Fonts for Text in Divs/Spans/H1/H2s)
In the case of tables, they may be defining default sitewide borders and alignments as well... e.g.
Table
{
border: dashed 1px #333333;
padding: 2px;
}
However if you have a table within a table (from RSolberg's example, an AJAX Calender within a DataGrid) then both your parent & nested tables will both inherit these styles. (Suppose that's why they're called Cascading)
My question is what's the best practice for applying styles to top most elements without having sub-elements also inherit them.
Should you just provide an override which undoes whatever styling you've applied.
e.g.
Table
{
border: dashed 1px #333333;
padding: 2px;
}
Table Table
{
border: solid 0px #000000;
padding: 0px;
}
984
HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages.
There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.
CSS stands for cascading style sheets. In short, CSS is a design language that makes a website look more appealing than just plain or uninspiring pieces of text. Whereas HTML largely determines textual content, CSS determines visual structure, layout, and aesthetics.
HTML is used to structure the content on the web page. CSS is used to add style to the content of a web page. HTML provides display information of various tags to the browser. CSS enhances that information by providing styling to those same HTML tags.
If you have HTML like this:
<html>
...
<body>
<div>
<div>
<div>
<div>
</body>
</html>
You could apply styles only to the div that is child of the body element using the child selector (>) like this:
body > div
{
border:solid 1px orange;
}
The nested div will not get a border.
For more information please visit: http://www.w3.org/TR/CSS2/selector.html#child-selectors.
Please note that Internet Explorer 6 does not support the child selector.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
