How to use HTML "id"
inside your CSS files
As you should know "id" is just an HTML attribute that can be used for several options.
One of these options is to properly identify elements inside your HTML documents that later can be styled u sing CSS.
Create a connection to style your id
If you want to properly style your HTML "id" with CSS, you must first create a connection between your HTML markup and your CSS file.
To do this, you will need to call the "id" name inside your CSS file by using the hashtag "#" symbol.
Now, this can sound complicated at first but let's take a look to a quick example.
For instance, imagine that you have a div with the "id" name "clever".
<div id="clever"> <p>Content example.</p> </div>
Sample #1
This "id" in CSS is called selector.
So if you want to style this div, you will need to write the hashtag "#" symbol with the name "clever".
See the CSS example below.
#clever {
background: purple;
}
Sample #2
Inside this example we are just giving the "id" with the name "clever" a color background of purple.
Once you have made this connection inside your CSS file, then you can proceed by adding more CSS styles like changing text color, adding padding, or perhaps increasing the border.
On the example below you can see all the HTML markup and the CSS together in action.
In this case we are using and internal style sheet but you can also use an external CSS file if you want.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using ID in CSS</title>
<style>
#clever {
background: purple;
color: white;
border: 2px solid #000;
text-align: center;
padding: 8px 0 10px 0;
}
</style>
</head>
<body>
<div id="clever">
<p>Content example.</p>
</div>
</body>
</html>
Sample #3
And here it is, how the final result will look.
Content example.
Keep in mind that with CSS you will have many combinations.
For instance you can also use the hexadecimal color #830083 to give the same purple color.
So never limit your options while working with CSS or think that just because someone is doing something different, you might be wrong.
Options are endless with CSS.
You can always mix and match anything.
Like mix hexadecimal color names or mixing "id" names with "class" names or combine the "id" with any HTML element, just look at the examples below.
div#clever {
background: #830083;
color: #FFF;
border: 2px solid #000;
text-align: center;
padding: 8px 0 10px 0;
}
body #clever {
background: #830083;
color: #FFF;
border: 2px solid #000;
text-align: center;
padding: 8px 0 10px 0;
}
Sample #4
The only recommendation that I can give you before finishing this will be to limit yourself when using "id" names.
I mean if you are going to use "id" names with JavaScript or with HTML elements that require to use "id" like this CSS accordion or this accordion with the toggle plus and minus signs, then you will be fine.
But if you are only going to use "id" names for styling purposes, then I will going to rather recommend you to use "class" names instead.
A good post that can expand on this will be this one, HTML id vs class which will give you a better understanding of why not using "id" names too often.
For the meantime that's all for me folks and remember, if you need web design in Fort Worth or if you need some extra help from a web developer, don't be shy and send me a message below.
