Chapter 7. Bridging HTML and CSS

Global Attribute – Class, ID and Style

Global Attribute – Class, ID and Style
Tag:

Global attributes are the attributes that you can set for any HTML tag. The class, id, and style attributes are the three major global attributes. Those are very important to bridge between HTML and CSS. As we explain CSS in detail in the next chapter, we'll give you the key points of these attributes mainly from the HTML point of view.

Class attribute

The class attribute is used to categorize HTML tags mainly for styling purposes. For styling purposes, the tags with the same class are handled by CSS as one group. For example, you can change the font color to red only for the text between the tags with the red class. The syntax of CSS will be explained in the next chapter.

ID attribute

We have already explained the id attribute to specify the location of a specific element in an HTML document. It is also used to specify the tag to add special styling by CSS.

Style attribute

The role of the style attribute is different from the other two attributes explained above. This attribute is used when you want to directly type CSS code in a specific tag. Using this attribute, you can add styles specifically to the element.

Idea<style> tag vs. style attribute

If you are a beginner, you may be confused about the <style> tag and the style attribute.
The <style> tag is used when you want to apply styles to the HTML document while the style attribute is used to apply styles to a specific element that has the style attribute.

Global attributes are the attributes that you can set for any HTML tag. The class, id, and style attributes are the three major global attributes. Those are very important to bridge between HTML and CSS. As we explain CSS in detail in the next chapter, we'll give you the key points of these attributes mainly from the HTML point of view.

Class attribute

The class attribute is used to categorize HTML tags mainly for styling purposes. For styling purposes, the tags with the same class are handled by CSS as one group. For example, you can change the font color to red only for the text between the tags with the red class. The syntax of CSS will be explained in the next chapter.

ID attribute

We have already explained the id attribute to specify the location of a specific element in an HTML document. It is also used to specify the tag to add special styling by CSS.

Style attribute

The role of the style attribute is different from the other two attributes explained above. This attribute is used when you want to directly type CSS code in a specific tag. Using this attribute, you can add styles specifically to the element.

Idea<style> tag vs. style attribute

If you are a beginner, you may be confused about the <style> tag and the style attribute.
The <style> tag is used when you want to apply styles to the HTML document while the style attribute is used to apply styles to a specific element that has the style attribute.

Tag: