HTML Tag Class attribute, Learning HTML.
The previous section introduced us to External Style Sheets. Here we are going to extend on this and show you the real power of style sheets.
To recap. Linking to an external style sheet requires you to add a line of code in the <head></head> element of the HTML document. Example:
< html>
< head>
< title>External Style Sheet</title>
< link rel="stylesheet" type="text/css" href="http://www.speakcomputers.com/GreenStyle.css" />
</ head>
< body>
</ body>
</ html>
Code snippet below for GreenStyle.ccs that we linked above. Here we will see the class H1 with the style we defined. We also have another H1 class but we have named it AnyNameYouChoose. Within the new class we have defined a different style for the H1 class. Both are H1 classes but have different names and styles. You can name your class with any name you choose.
H1
{
font-size: 20pt;
font-weight: bold;
font-family: Arial;
color: #009966;
}
H1.AnyNameYouChoose
{
font-size: 20pt;
font-weight: bold;
font-family: Arial;
color: #009966;
font-style: italic;
text-decoration: underline;
}
The Tag element <h1> includes the attribute "class". You can assign a string value to the class, which is a pointer to the style name within the style sheet. Let's do an example.
Copy and paste the code below and click Render.
< html>
< head>
<title>Style attribute class name</title>
<link rel="stylesheet" type="text/css" href="http://www.speakcomputers.com/GreenStyle.css" />
</ head>
< body>
< h1>No class assigned, will use default style for tag from external style sheet</h1>
<h1 class="AnyNameYouChoose">Here we assign the class name that we created above</h1>
</body>
</ html>
The class must exist within the Style Sheet. If the class name does not exist, the default class will be used.
Class and Style tag
You can assign both the class="" and the style="" attributes to the HTML element but the style defined in the style attribute will override the style defined in the class(external style sheet class name). Let's do an example. Copy and paste the code and click Render.
< html>
< head>
<title>Style Attribute override class style</title>
<link rel="stylesheet" type="text/css" href="http://www.speakcomputers.com/GreenStyle.css" />
</ head>
< body>
<h1>No class assigned, will use default style for tag from external style sheet</h1>
<h1 class="AnyNameYouChoose" style="color: #000000;">Here we assign the class name but the style attribute overrides the class style</h1>
</ body>
</ html>
You can change the linked style sheet from "GreenStyle.css", "RedStyle.ccs" or "BlueStyle.ccs" and see the different styles applied.
|