Get best price on Prepaid Samsung Galaxy A01 | ||||||||||||
|
||||||||||||
|
CSS Tutorial: The BasicsThe previous page explained how style sheets are referenced by the browser. This page expands on that and shows several working examples of style sheets. Starting off with applying a color to a simple header tag, H1. Here is the complete code for the HTML file with a simple blue header.
<HTML><HEAD>
Click here for this example, use your browsers
back button to return to this page.
<STYLE TYPE="text/css"> <!-- H1 { color: blue } --> </STYLE> </HEAD><BODY> <H1> A blue header </H1> </BODY></HTML> The color tag used affects the Foreground color (text). If you wanted to have this style to be specified in a stand alone file, you would just save the code from the start STYLE tags to the close STYLE tag, inclusively. You would then reference the sheet using the LINK tag mentioned on the previous page. If you want your header aligned in the center of the document, you can add the 'text-align' property as follows:
H1 { color: blue;
text-align: center; } To save some space you can specify the attributes on the same line after the semi-colon.
H1 { color: blue; text-align: center; }
ClassesYou do not need to define each and every tag specifically, but you can instead define classes and reference the class. Classes are defined by a name and a period in front of it. Here's an example:
<STYLE TYPE="text/css">
<!-- .myIndent { margin-left: 1.0in } --> </STYLE> The HTML tags to reference the above .myIndent class is:
<H1 CLASS=myIndent>Indented Header</H1>
Click here for this example, use your browsers
back button to return to this page.
<P CLASS=myIndent>Also this whole paragraph would be indented one inch</P> <P>but this wouldn't be indented</P> IDsIDs are similar to classes except they work on a per element basis. ID use is actually discouraged by the W3C. The idea behind the ID is to define a certain style for a single specific element. They can not be used by multiple tags on the same page as the above example did. IDs are referenced with a pound sign (#) and not a period as classes were.
#item1ID { font: 72pt Courier }
The HTML tag to reference this ID would be:
<SPAN ID=item1ID>some really large type</SPAN>
Being the tricky guy that I am, I have used a new tag, SPAN, to segue into the next topic. SPAN and DIVTwo new tags have also been introduced to implement CSS. The tags alone do not have any predefined attributes, and are there for style to applied to them.
Ok, I think we have the basics out of the way. Let's move on and see what we can squeeze out of these style sheets.
|
privacy policy || © 1997-2016. astonishinc.com All Rights Reserved. |