As I mentioned in the previous post, I’m using W3Schools to review HTML and CSS in order to create some exercises. Here are a few things that I didn’t know about CSS or want to remind myself about.
“Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element!”
Padding (outline, margins, and border) in CSS is added to the width of an element. So div { width: 300px; padding: 25px;} will have a width of 325 pixels. To keep the width at 300 px you need to add the declaration box-sizing: border-box; inside the brackets.
Occasionally I want to add whitespace and end up using a bunch of times. There is a descriptor, white-space: pre; that will work.
This is a paragraph that has a bunch of spaces before the last word.
There are a bunch of ways to control elements based on where they appear in relation to other elements. I haven’t made much use of these selectors, but mostly because I’m not familiar with them. You can explore them at this W3Schools page.
The column-count:n property is something I wish I had known about. It can be used to divide a div (or p) into columns.
Here’s another property that can come in handy in association with justify, margin-right: 20%; -webkit-hyphens: auto; -ms-hyphens: hyphens: auto. You need all three to handle different browsers.
Suppose you want to justify your text but you have a bunch of technical terms like bootstrap and alignment and javascript which sometimes mess up the justification. Then you can use -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto to clean it up a bit.
Suppose you want to justify your text but you have a bunch of technical terms like bootstrap and alignment and javascript which sometimes mess up the justification. Then you can use -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;.
I just learned about display: flex; justify-content: center; when laying out the previous two paragraphs. I first put them in a div and did a float: left and float:right to get them to display next to each other. Then I manipulated the margins to get them closer to the center. This works better and I just need to make sure there is enough padding so that they don’t brush up against each other.