ABOUT HTML ATTRIBUTES
HTML, elements can be modified by attributes. Attributes are placed within the opening tag in an elemem. Many elements support specialized attributes, and there are also a few global elements that can be used with any tag. For example, the ID attribute is used to specify an identifier that uniquely identifies that element on the page. These identifiers are used with JavaScript and Cascading Style Sheets, as you'll learn in later lessons. Here's what a tag with an attribute looks like:
chi id-theTopheading">Everything You Need to Know About HTML</h1>
As you can see, the attribute is placed within the opening tag, to the right of the tag name. You can also include multiple attributes in a single tag, as follows:
<hi id="the TopHeading" class="first >Everything You Need to Know About HTML</h1>
The class attribute is another global attribute that can be used to establish arbitrary groups of elements. You can assign the same class to multiple elements so that they can be referenced as a group via CSS or JavaScript. The third global attribute you'll use a lot is style, which I talk about in the following section. There are also a number of attributes that are associated with specific elements offamilies of elements. I'll talk about those attributes along with the associated elements.
USING THE #STYLE ATTRIBUTES
Earlier in this lesson. I mentioned Cascading Style Sheets as a way you could control the look and feel of your pages. As I mentioned, although there are default styles associated with tags, their main purpose is to describe the structure of a document. Cascading Style Sheets are a way to control how the browser renders HTML elements.
For example, in this lesson. I've used the <h1> tag a couple of times. Browsers print text enclosed inside an <h1> tag in a large, boldface font and leave some whitespace after the heading before printing something else. Using CSS, you can tell the browser to render the httag differently than it normally would. CSS provides a lot of flexibility in how you can alter the appearance of any type of element, and the styles can be applied in a number of different ways.
The advantage of CSS is that it can be used in various ways. For example, you can put all your styles into a separate file and link to that file from your web page. That way, if you want to change the appearance an entire site, you can simply edit your CSS file and make changes that span every page that links to your style sheet. Or, if you prefer, you can include styles at the top of your page so that they apply only to that page. Style sheets affect the entire page; there's also a way to apply styles one tag at a time, using the style attribute. You can also include styles inside the tags themselves using the style attribute.
You can also control the specificity of the styles you create based on how you define them. For example, you can write rules that apply to all tags of a specific type, such as all <h1> elements. Or you can specify classes for your elements and then write rules that apply only to members of that class. Classes are categories or labels that are assigned to tags using the class attribute. For example, you could create a class called headline and then make all <h1> elements in the headline class red. You can also write rules that apply to single elements by assigning them a unique identifier using the id attribute and writing rules that apply to that identifier. Here's an example of an <h1> tag that includes both a class and an ID:
<h1 class="headline" id="leadstoryheadline">Lead Story Headline</h1>
One thing you'll find as you progress through the book is that CSS can serve as a replacement for some tags. As I describe various tags, I explain how you can achieve the same effects using CSS instead. Best practices suggest you should use HTML to describe the structure of pages and CSS to define their appearance. The coverage of CSS in this book culminates with Lesson 15, "Advanced CSS: Page Layout in CSS," which explains how to use CSS to manage the entire layout of the page or even the entire layout of a site.
INCLUDING STYLES IN TAG
As mentioned previously, the style attribute can be used with any tag. By including the style attribute in a tag, you can specify one or more style rules within a tag itself. Here's an example using the <h1> tag, which I introduced earlier:
<hl style="font-family: Verdana, sans-serif;">Heading</h1>
The style attribute of the <h1> tag contains a style declaration. All style declarations follow this same basic pattern, with the property on the left and the value associated with that property on the right. The rule ends with a semicolon, and you can include more than one in a style attribute by placing semicolons between them. If you're only including one rule in the style attribute, the semicolon is optional, but it's a good idea to include it. In the preceding example, the property is font-family, and the value is Verdana, sans-serif. This attribute modifies the standard <h1> tag by changing the font to Verdana, and if the user doesn't have that font installed on his system, whichever sans serif font the browser selects. (Sans-serif fonts are those that do not include serifs, the small lines at the ends of characters.)
Many, many properties can be used in style declarations. As previously mentioned, put ting a declaration into a style attribute is just one of several ways that you can apply styles to your document.
STAY CONNECTED FOR UPCOMING POSTS.. KEEP SHARING & MOTIVATING