|
HTML 4.0 has given us new ways to style text and to position objects using Cascading Style Sheets and The Document Object Model (The DOM). The important thing to remember if you choose to use these methods is that not all browsers support these newer concepts. Also different newer browsers may treat these methods differently so you should always test these methods with multiple browsers before launching your pages to avoid any hidden surprises. Cascading Style Sheets is comprised ofa Style Sheet which is located usually in the Head section of your HTML document but can also be located in an external document which can be referenced from multiple pages. To see a Cascading Style sheet Click Here and View Page Source The following style sheet is embedded in the HEAD section of the document. An important thing to remember just like with the Font Face variable is that the Font Style must be present on the end users machine. <STYLE TYPE="text/css"> <!-- H1 { color: green; font-size: 28px; font-family: impact } P { text-indent: 1cm; background: yellow; font-family: courier } --> </STYLE> The <!-- to --> hides the style sheet from older browsers. Each line defines the attributes of any text that is surrounded by the H1 or P tags. I could also define attributes for any other H Tags such as the H3 or H4 tags overriding normal H Tag attributes. Remember though that older browsers that cant see Cascading Style Sheets will display the normal H1 attributes when displaying text. Therefore keep in mind that H1 will display large by browsres not recognizing Cascading Style Sheets and H6 will display small. So by wrapping any text with <H1>Text</H1> will now display using the Cascading Style Sheet like Textand any Text wrapped with P tags will display as Text and on this page I defined an H3 attribute in my stly sheet displayingTextIn the example: Linked CSS view the page source and you will see it is linked to a Style Sheet instead of having the Style Sheet in the Head section. This way multiple pages can use the same style sheet. In the example at Class definitions view the page source and you will see I have given a Class definition to each P tag wrapping some text. This allows you to use the P tag while associating it with different CSS attributes that are defined in the Style Sheet in the Head section. Another Style Sheet can remove the underlines from your hyperlinks. Just remember that web surfers usually look for these underlines to identify a hyperlink so sometimes removing them just for design purposes can actually do more harm than good. See the Style Sheet at No Underlines to view this in action. The Document Object Model uses a combination of CSS in conjunction with positioning attributes using the DIV Tag that we discussed earlier. Just like giving our P tags above class definitions we can give any divided area an ID. Once an ID is associated with an area we can position this area to exact XY coordinates from the upper left hand corner of the browsers view screen. This can also be used to layer objects . If you view this Page and look at its page source you will see I have used Style Sheets to define the text attributes using two Divided Areas to wrap each section of text and gave them unique ID's of location1 and location2. location2 is positioned 200pixels from the left edge and 5 pixels from the top. location1 is positioned 400pixels from the left edge and 25 pixels from the top Similarly at Example 2 I have positioned a couple of paragraphs and given each location "fred" and "tim" width and height parameters which cause the text to wrap and limit it to the defined space. In Example 3 Text is overlayed on top of an image. Once again it is important to consider that not all browsers can view these layouts and so some viewers may just see images and text aligned to the left. Tables are often times more effective in isolating individual parts of a layout. |