Naming:
Naming elements in HTML is the best way to specifically apply CSS to your page. By using these names, we can put all of our page styling into our CSS files, which makes our HTML far easier to read. There are two main ways of naming your CSS, ClassName and ID. The primary difference between these two conventions mostly comes down to how they interact with your JS, but for CSS purposes the difference is this: ClassName is something you apply to multiple different elements, ID is something you apply to lone instances of an element. It might not cause you issues all the time, but it is good form to try and avoid repeating element IDs in your code, lest you start to form any nasty habits.
IDs ought to be unique.
ClassName
To start off, here is how you identify a HTML element with a ClassName:
<p className="example" >Lorum Ipsum</p>
And here is how you would then call that className in your CSS:
.example {
}
From there, you can apply your CSS properties to any item with that ClassName by simply typing your CSS into those curly brackets.
ID
IDs are pretty similar in how you declare them. Here is how you would assign an ID to an element:
<p id="specific-item" > Specific Lorum Ipsum </p>
And here is how you would call that element into your CSS by it's ID:
#specific-item {
}
As with your ClassNames, you can then directly apply your styling onto your item by writing those properties within the curly brackets.
Applying CSS directly to Element Types
Another thing to keep in mind with naming your elements, is that sometimes it's entirely unnecessary. If the idea of naming elements is to cut down on wasted space, then applying ClassNames and IDs to every element can be counter-productive. Sometimes you can save space by applying CSS attributes directly to your HTML element types.
The syntax to do this is very simple. Say you want to make every paragraph element on your page have white text and a black background. You can do that by putting this into your CSS:
p {
background-color: black;
color: white;
}
The above code would apply to every single paragraph element in your code, and it is an excellent way to save time while naming things.
Another great way to apply this technique is by using it to apply a design 'standard' to your whole page. By adding attributes directly to your body element, you can create a standard all other elements will naturally follow unless specifically over-written. For example:
body {
font-family: "Times New Roman", Times, serif;
text-align: center;
}
The above code will cause all of the text on your page to have the 'Times New Roman' font, and force text to be center-aligned by default.
Applying CSS to Elements depending on their Containers
But what if you want to apply properties to specific types of HTML elements within a specific kind of container? Say you want to apply a certain font to paragraph elements inside a specific type of class. You can do it like this:
.example p{
font-family: "Times New Roman", Times, serif;
}
The above code will cause any paragraph tag to have the 'Times New Roman' font, so long as it is nested with an element with the 'example' ClassName.
Applying CSS to Elements when Interacted with via Selectors
Finally, you can use these things called Selectors to apply CSS to elements, but only while certain things are true. For example, by using :hover, we can cause an element to have different CSS properties while a cursor is over the object. Here is some example code for that:
button {
color: red;
}
button:hover {
color: blue;
}
The above code will cause a button element to change from red to blue while a cursor is above it. Similarly, :active can be used to apply CSS attributes to an element, but only while it is being actively clicked. There are many different situation specific selectors you can use, like :link or :visited for example. Using these selectors makes your CSS look and feel like its actively responding to your users. Be sure to look more into them if you are trying to make your CSS more dynamic!
Top comments (0)