ptg1647605250 LESSON 3: Introducing HTML and CSS
HTML Attributes
HTML elements can be modified by attributes. Attributes are placed within the opening
tag in an element. 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:
<h1 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:
<h1 id="theTopHeading" 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 or
families of elements. I’ll talk about those attributes along with the associated elements.Using the style Attribute
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
<h1> tag 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.