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 -
Tuesday, 11. August 2009
The third method of applying styles to document involves linking to external style sheets. External style sheets are the most appropriate method for styling documents. If styles need to be changes, the modifications can take place in one CSS file rather than all HTML pages.
To change the header style to an external style, move the rule set to a new CSS file. That means copy the code to a new filed called something like style.css
@charset “UTF-8″;
/* CSS Document */
body {background-color: grey;}
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: white;
width: 10em;
}
Next you have to link your HTML page to your CSS.
<!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>Untitled Document</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>
</head>
<body>
</body>
</html>
That is all the code required. Now you simply add the style sheet link in all of your html pages and you can control your entire site from on style sheet.
Posted in CSS Applying Styles by frenchsquared -
Tuesday, 11. August 2009
Header styles also can be used to style the <p> element. The CSS rules can be placed in the head of the document using the style element. Like inline styles, header styles, header styles should be avoided where possible because the styles are added to the HTML markup rather than in external CSS files.
There are cases where header styles might be the preferred option in specific instances, such as a CSS rule that is specific to one page within a large website. Rather than add this rule to an overall CSS file, a header style may be used.
The type=”text/css” attribute must be specified within the style element in order for browsers to recognize the file type.
<title>CSS Tutorial</title>
<style type=”test/css” media=”screen”>
p {
font-family: arial, helvetica, sans-serif;
margin: 1em;
padding: 1em;
background-color: gray;
width: 10em;
}
</style>
</head>
Posted in CSS Applying Styles by frenchsquared -
Monday, 10. August 2009
CSS, Inline styles can be applied directly to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles are added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets. Styles that are applied inline can cause additional maintenance across a website because multiple pages might need changing rather then one CSS file.
<p style=”font-family: arial, helvetica, sans-serif; margine: 1em; padding 1em; background-color: gray; width: 10em;”>Lorem ipsum color sit amet, consectuer adipiscing elit…</p>
Posted in CSS Applying Styles by frenchsquared -
