Write For Us

Web Development Primer - Adding CSS to Hello World (The Class and ID Selectors)

E-Commerce Solutions SEO Solutions Marketing Solutions
856 Views

  • Thanks! Share it with your friends!

    You disliked this video. Thanks for the feedback!

admin
Published
We need to talk a little bit about Class and ID in the HTML world. Class and ID are the

hooks that allow you to get Cascading Style Sheet and JavaScript to talk to one another.

The Class here we've got "Hi Canada!" and here we have "Hallo Netherlands!" - two countries. These

paragraphs that contained countries have been given the common class of country. This allows us to

define some Cascading Style Sheet styles for that class. So if I had 115 countries or 115 paragraphs,

each one associated with the class country, I could style all of those paragraphs in one place in the

Cascading Style Sheet file. And that avoids having to do the styling 115 separate times.

Then you have the concept of ID. This is like a primary key for you database developers. If you want to

get very, very surgical here and be able to manipulate one individual paragraph on your page or one

individual element, you give it an ID. That ID, in this case, Canada for the country is unique on this

particular page. Those are the two hooks that allow your Cascading Style Sheet stuff and JavaScript

stuff to manipulate your HTML.

We're going to do a little demo here. I just added a little bit of styling, very simple Cascading Style

Sheet to our Hello World. Here we've got the default paragraph. We are setting the paragraph text color

to blue by default.

This syntax here, this .country is referring to the class country. That's .country refers to the class.

We're just going to set out country backgrounds to light green. Then we have some syntax here that are

specific to Canada and the Netherlands. That's the hash symbol with your ID for Canada refers to that

one paragraph. We're setting the color for that to red to match the Canadian maple leaf flag and setting

the font size to 200%.

Let's have a quick look at that.

See all free videos in this series at SkillBuilders.com/APEX
Category
Success
Sign in or sign up to post comments.
Be the first to comment