Wednesday, 12. August 2009
Some older browsers, such as Netscape Navigator 4 and IE 4, have poor support for CSS. It is possible to hide styles from these browsers using specific media types and @import rules.
All styles will be hidden from Netscape Navigator 4 by changing the link element’s media type from screen to screen, projection. Netscape Navigator 4 does not support multiple media types.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>CSS, How to hide content</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen, projection”>
</head>
<body>
</body>
</html>
The remaing styles will be hidden from IE 4 and several other older browsers by moving the <p> element rule set out of the original style sheet and into the imported style sheet. IE 4 can not read imported files.
@ import “advanced.css”;
//Code inside advanced.css
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
}
All modern browsers will read the multiple media type screen. projection. as well as the imported style, so they will display the fully styled <p> element.
Header styles can also be hidden from older browsers by enclosing the contents of the styled element inside a comment.
<style type=”text/css” media=”screen”>
<!–
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
}
–>
</style>
Posted in CSS Applying Styles by frenchsquared -
Wednesday, 12. August 2009
@import Styles?
Header and external style sheets also can import other style sheets using the @import rule. The @import rule must be placed before all other rules in the header or external style sheet.
@import “advanced.css”;
p {
font-family: arial, helvetica, san-serif;
margin: 1em;
padding: 1em;
background-color: black;
}
Imported styles can be used to link to multiple CSS files as well as to hide styles from older browers.
Posted in CSS Applying Styles by frenchsquared -
Friday, 31. July 2009
When several selectors share the same declarations, they may be grouped together to prevent the need to write the same rule more then once. Each selector must be separated with a comma.
HTML Code
<h1> CSS Headings One</h1>
<h2> CSS Heading Two</h2>
<p> Some text about your css tutorial would go here</p>
CSS Code
h1 {
text-align: center;
color: navy;
}
h2 {
font-style: italic;
text-align: center;
color: navy;
}
In the above code The h1 and h2 elements share two declaration, so parts of the two rule sets can be combined to be more efficient.
HTML Code
<h1> CSS Headings One</h1>
<h2> CSS Heading Two</h2>
<p> Some text about your css tutorial would go here</p>
CSS Code
h1, h2 {
text-align: center;
color: navy;
}
h2 {
font-style: italic;
}
Posted in Understanding CSS by frenchsquared -
