Today's soundtrack is YOB: Our Raw Heart, a sludgy doom metal record that features beautiful singing over heavy guitars with wicked riffs.
This morning, I'm learning how to use a CSS id tag to stylize a specific HTML element on freeCodeCamp, then I'll learn how to adjust an HTML element's padding and margins.
id tags
id tags are not reusable and they are higher-priority than class tags; thus, if a class tag and id tag's stylizing conflict, the id tag's style is the one that will appear.
There are two steps to apply an id style to an HTML element. First, add the desired id tag to the element in the main code section inside of its element tags.
<img id="image-one" src="https://www.site.com/image.png" alt="Example pic">
Next, we add the id style in the "style" section at the top of the page, preceding its name with a #.
<style>
#image-one {
background-color: red;
}
HTML margins and paddington bear from Darkest Peru
There are three things that control an HTML element's proxemics: "padding, margin, and border" (citation).
Padding controls the space between a box's text and it's border. It is defined in pixels.
.box {
border-style: solid;
border-color: green;
background-color: yellow;
border-width: 10px;
text-align: center;
padding: 15px;
}
We can customize the padding per side of an element by specifying them clockwise: top, right, bottom, and left, separated by spaces.
.box {
border-style: solid;
border-color: green;
background-color: yellow;
border-width: 10px;
text-align: center;
padding: 10px 5px 25px 30px;
}
Margins control the amount of space between an element's border and the border of the element it is within. Setting a margin to a negative value will allow the element to entirely fill its surrounding element.
.box {
border-style: solid;
border-color: green;
background-color: yellow;
border-width: 10px;
text-align: center;
padding: 15px;
margin: 15px;
}
We can customize the margins per side of an element by specifying them clockwise: top, right, bottom, and left, separated by spaces.
.box {
border-style: solid;
border-color: green;
background-color: yellow;
border-width: 10px;
text-align: center;
padding: 15px;
margin: 15px 5px 12px 24px;
}
We can choose whether to set an element's sizing based on relative or absolute units. "px" is, of course, absolute; "in" (inches) and "mm" (millimeters) are both also absolute. Two relative units are "em" and "rem", which are both based on font size. According to Jeremy Church, best practice is to "use em for nearly everything, rem occasionally for padding or margins, but only in a pinch, and px sometimes for borders" (citation).