Today's Progress
Today's topic is classes and IDs. Classes and IDs are very helpful in letting developers customize what styles they want for certain elements. They will play an even bigger role in JavaScript so this concept is very important for new developers to learn.
Adda starts this lesson with two videos. The first video defines classes and IDs. The second video goes over how to name them.
Classees
When developers talk about a class in CSS, it means a group of elements styled the same. It means having a CSS selector with an attribute you can add to any HTML tag. For example, the code would look like this:
.important-info {
background: yellow;
border: 2px solid green;
}
This code uses the dot before the class name. It lets the computer know it is selecting a class name. Then you can add this class name to your HTML. The HTML code would look something like this:
<p class="important-info">Appointments can be scheduled by calling 555-5555</p>
Inside the opening tag, you'll see the class attribute then an equal sign. After the equal sign, you'll see the class name in quotes. If you don't see your styles for the element you want to style, always check both of your code files to see if you have your class attribute and if you are selecting it correctly in your style sheet.
You can assign this class name to any element you want. The ones that don't have the class name will have those styles. You can also use multiple classes on an element as well. Just make sure you put a space between each class name in your class attribute.
IDs
Skillcrush defines ID as a "single identifier for one HTML tag on a page". IDs are different because there can only be one ID for an HTML tag. They are often used to style elements only appearing once on a page like alerts or links to specific items.
IDs are similar to classes by serving as a bridge between HTML and CSS. However, there are some differences. To add an ID to your style sheet, the code would look something like this:
#new-promotion {
font-size: 18px;
font-weight: bold;
color: blue;
}
IDs use a hashtag. That symbol lets the computer know that this is an ID. After the hash tag is the ID's name.
Then you go to the HTML file and add the ID to your code. It might look like something like this:
<li id="new-promotion">Last minute holiday gifts! Get them before Christmas!</li>
IDs have the id attribute inside the element's opening tag. After the id attribute is the equal sign with the id name in quotes.
Classes and IDs have a complicated relationship because one ID can be used per element. You can still add classes and IDs. Lots of developers add classes to an element that already has an ID. However, all developers need to know the differences between them so they know when to use the right one in their code.
Namng Classes and IDs
This is something I need to be better at as a developer. The objective for both classes and IDs is to read the name and understand the purpose. Plus these names need to be flexible so they can work in the future regardless of the property and value changes.
There are some best practices when it comes to naming classes and IDs. Skillcrush breaks down some of the do's and don'ts developers need to remember when they name their classes and IDs:
- Don't start with a number.
- No blank spaces.
- Keep to lowercase letters
- describe the purpose.
Describing the purpose means it needs to reflect the purpose and not the style. That means an ID name of alert is much better than the name green-alert. The name green alert is not good because it doesn't tell developers the purpose.
You might also see something like "blue-text home-page-header" for a class name. Although it is better than the green-alert name, it still can be a bad choice because the blue-text name isn't good if you want to make changes in the future. Before diving into the quiz and coding activities, Skillcrush walks students through the process of creating navigation on a website.
They particularly identify the difference between destination IDs and anchor IDs. Destinate IDs are the source ids that tell the browser where the link needs to go. You just need to create a regular link by putting an anchor tag (a tag) around a list item with a href attribute.
Next, you put the hashtag symbol and ID name to make a destination. Make sure you put the ID name in the section that matches its purpose. Anchor IDs act as the place the link moves the user to.
You might see this in code by having an ID attribute to different sections' opening tags. Just make sure the ID name and the anchor destination match so everything
Top comments (0)