Cascading
stylesheets tutorial
Learn basic css coding
Emdedding a stylesheet into html document
Learn basic css coding
Emdedding a stylesheet into html document
|
Cascading
stylesheets tutorial
Learn basic css coding Emdedding a stylesheet into html document |
|
 Bookmark
This Page Adding Cascading Stylesheets Inline. Adding stylesheets inline simply means adding a style straight into the body your html document. <HTML> <HEAD> <TITLE>My Page</TITLE> </HEAD> <BODY> <B STYLE="color: blue; font-family: ariel">Welcome!</B> </BODY> </HTML> Unfortunately, if you want to use bold text again on the page which is also blue and arial font then you would have to code that bold tag the same way again. There is a easier way to code pages to achieve the same result. Embedding CSS code into the <head> of your html document On the introduction page we used the html code in the text box below for the first part of the body content. This is just normal html coding. And this is how it looked once the css coding was applied within the head of the html document; Cascading StyleSheets Tutorial:Learn how to apply CSS to your webpage!Introduction to Cascading Stylesheets!This
is just an example of the many cool things you To apply the CSS, the code below is placed within the head of your html which then causes the effects. This is the explanation of what happens. STYLE TYPE="text/css" Tells the browser that a style being applied to the text of your html document and specifies the MIME type so that stylesheet code that isn't supported by some browsers can be ignored. <!-- Is a comment tag. This makes the script "browser compatible". Older browsers overlook whatever is within and reads the document as a normal html page. --> H4, b { color: #63639C; font-family: arial } All "Heading 4 " and "bold" html tags in the body, will be given the color specified and the fontface arial. Anytime that you use the bold tag, or the H1 tag, this style will be applied. P { text-indent: 3cm; background: silver; font-family: courier } This code tells your browser to indent the text by 3cm, apply a background of silver and make the font "courier" on all text enclosed by any and all <P> or paragraph tags. Close the style tag in the normal manner of scripting. You have a "selector" and a "declaration". The selector in this example is H4 and b, and the declaration is to apply "color" and "arial font" to all text that is within those tags. <STYLE TYPE="text/css"> You tell the browser that style is being applied to the document. H4, b {color: #63639C; font-family: arial } You stipulate the "selectors" and then make a "declaration" as to what style you want applied to the "selectors". (html tags of H1 and b or any other tags that you specify) You can apply the stylesheet to any tags within your document and to as many tags as you wish. Want to make certain words in bold or different colors? This is where classes come in. You can create different classes of b, each with a different declaration. The code would look like this: <STYLE TYPE="text/css"> <!-- b.first { color: green } b.second { color: purple } b.third { color: blue } --> </STYLE> And your HTML code would look like this: <b class="first">HTML</b> <b class="second">would</b> >b class="third">this</b> But an even more flexible way in the use of classes is to create the class without assigning it to any particular html tag. In the embedded stylesheet you simply place <STYLE TYPE="text/css"> <!-- .first {color: red } --> </STYLE> and your html would look like this, <b class="first">HTML</b> This will allow you to make any word red or whatever color you assign.. You can call the class whatever you like, for example, instead of .first you could call it .wombat and applying it to an italic tag and the html in your page would look like this; <i class="wombat">.wombat</i> Notice how I have used "red" colored text further up the page and now in the example, one with bold text and the other with italics. I have used the class .wombat I created in the head for each instance. Stylesheet rules are inherited from "parent" to "child." This means whatever other tags are enclosed within the stylesheet, (such as an italics tag for example) will take on the properties of the parent tag. Comment tags. These are important for your own use. Using the comment tag, which can go on any line, can remind you why you assigned certain classes. For example, on this page I have placed the comments /* used .wombat as an example to show different class names */ This reminds me why I used that particular name. On this page we have embedded a stylesheet within a html document which means you have placed the cascading stylesheet within the head of your document. On to CSS tutorial 2 Linking to an External Stylesheet. |
|
