Lesson 18

Styling with CSS by Id and Class Selectors plus Bootstrap Button Example

The lecture shows you how to select an HTML element for styling with CSS using its id or class attribute instead of using the type selector that targets all elements of a specific name.

Using a type selector is usually not the best practice because HTML web pages usually have hundreds of elements and changing all of them at once to comfort to a specific style might cause inconsistencies in the design.

You can select a specific element for styling with CSS using its id attribute. Only one, and only one, element may have that unique identifier.

If you need to select multiple elements for styling under the same ruleset, you can use the class attribute. It turns out using a class is usually the most popular and safe choice for best practice. When in doubt, just use a class.

The lecture also gives the example of leveraging CSS code already written by somebody else, like the Bootstrap design system. Because the class definitions are already written for you, all you have to do is use the class name if you want to adopt the same style for your web page element, provided you link the Bootstrap spreadsheet to make it available in your document.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

Summary of CSS Styling Techniques

Overview

In the transcript, we learn about how to apply different styles to paragraphs in an HTML document using CSS. The focus is on using IDs and classes to differentiate styles for multiple elements.

Key Points

Selectors and Styles:
- Using a single selector like P applies styles to all  elements.
- To style only the first paragraph, an ID attribute is introduced.
Using IDs:
- An ID must be unique for each element in the document.
- To assign an ID:
```
This is the first paragraph.
```
- In CSS, target the element using #:
```
#first-paragraph {
 /* Styles here */
}
```
Using Classes for Shared Styles:
- When you want to apply styles to multiple elements:
 - Use class attributes instead of unique IDs.
```
This is the second paragraph.
This is the third paragraph.
```
- In CSS, target the class using .:
```
.in-red {
 color: red;
}
```
Practical Use of Classes:
- Classes are commonly used to apply styles across different elements.
- Frameworks like Bootstrap use this method extensively for consistent design:
  - For buttons in Bootstrap, you can use classes like btn and btn-primary to style buttons consistently.
Bootstrap Integration:
- To use Bootstrap styles, include the necessary CSS links in the HTML document.
- Assign Bootstrap classes to elements to adopt their predefined styles.

Conclusion

Utilizing IDs for unique elements and classes for shared styles is fundamental for efficient CSS design. Frameworks like Bootstrap simplify this process by providing predefined styles that can be easily integrated into web projects.

Questions

Amina asked about which parts to copy from Bootstrap. The response indicates that typically, one would assign the necessary classes after installing Bootstrap according to the documentation.

Video Transcript

Like as I was saying a while ago, I have two paragraphs and all of them have the same style. But I don't want the second paragraph to have the same style as the first. How can we go about that? Now the problem with that has to do with my selector here, my CSS. When I write P it means all the paragraphs in this document have the following styles. So in order to make only the first paragraph have these styles, I have to do a few things. So if you only have one thing that you need to change, you can assign an ID attribute to that element and then use the ID as the selector. Let me show you. Let's say the first paragraph will get those styles. So I add an ID attribute. Remember to add attributes to an element, go to the opening tag, add a space after its name, and then start typing the name of the attribute in the CSS ID. Then type equals and then double quotes, double quotes, and type the value within the quotes. In this case, I can write any unique identifier. If you give an ID has to be unique, another element cannot have the same ID. So let's say first dash paragraph, that's the ID. Now I can use this to target in CSS. So if I want to target an element by ID, I start typing a hash and then the ID, first dash paragraph. And I'm going to click run in the top left. Now you can see only the first paragraph has those styles. The second one does not adopt it. Okay, so make sure this ID is the same thing you typed for the value of the ID attribute for the paragraph here. Always start with a hash. The hash means target by ID. ID. Okay. Now let's say I have a third paragraph. And for some reason I want to target the second and the third paragraph to have a different kind of style. The color is red. So I would go here, write some selector. I'm going to write like this, but I'm going to replace that later. Okay, it's not what you should write. And I want the color to be red, but only for the second and the third. Well, if I do by ID, I have to add an ID to the P here and to the P there. So that's two different separate IDs. So I'd have to type it here. So I don't want to do that. Isn't there a way I can apply the same style to any element I want? Like as long as they share something common. Yes, we can do classes. Okay, class name. So if I add a class attribute to the second, let's say in red. And then the class to the third P also called in red. Let's say all the elements that have the class in red will adopt the color red for its text color. So I can go here and start typing for the selector dot. Dot means class and then the class name in red. So this means I define a class called in red that any element that uses this class will get the color red. So that way I can choose what elements I want to be in color red. So the second and the third. So if I click run, I see only the second and third have red. Okay, so that way you can select more than one element and you can choose which ones will adopt a specific style. In practice, in the real world, we always use classes most of the time. Okay, rarely we use the selector for the element name or even the ID. So most of the time just classes. And that has to do with a lot of, if you ever see websites kind of share the similar style today. That's because they use the same class since that were written by someone. Someone can come in and figure out the design system. Like, okay, I want the buttons to look like this and the forms will look like this and they can write all the classes for all those styles. And all you have to do is use those class names to adopt the same style in your own website. One famous framework for that is called Bootstrap. If you use Bootstrap, you're adopting the Bootstrap style. Let me show you. Bootstrap, this website here. And click the docs or examples. Let me show you the button one. Let's see. Components, buttons. If you choose to adopt Bootstrap styles, you can include this in your website. And all you have to do is use their class because there's somebody, they already wrote all the definitions for the styles in CSS. So all you have to do is use the class. So if you want something to look like maybe this blue button here, all you have to do is use the class btn followed by the other class called btn primary. Basically, they have like a base class for all buttons called btn. And if you want to change the colors, you can use a different class. Additional class for primary is like blue. Secondary is like this gray. Success is green. Danger is red and so on. Okay. So basically, it's very useful. You don't have to write your own thing from scratch. All you have to do is copy the class name and you're good to go. All your buttons will be like that as long as you use the class. Okay, going back to the title. So that's all about class. Anybody have any questions? Which Amina asks which part do we copy and paste out of the variance on get Bootstrap? Usually, I don't know especially what you're asking, but usually after you kind of install Bootstrap, all you have to do is assign the class. For example, if you want your buttons to look like the primary, all you have to do is add the attribute class to your element and use btn followed by btn primary. As long as you use these two, it will appear like this. Now to install Bootstrap, that's another matter. You got to look at their documentation, introduction. They tell you how to do it. The easiest way is just copy this link. You see this one here? Copy this link element to the input at the end of your head right before the end. But that's a little bit too advanced for this introduction. Yeah, I was like, what is this? Yeah, so you can read their guide here, follow line by line and you can do it. I'm going to close that.