Updating sites—CSS Notes

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.

The column-count property is something I wish I had known about. It can be used to divide a div (or p) into columns. There are also a bunch of other properties to control the look as well including: column-fill, column-gap, and column-rule-color.

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.

Leave a Reply

You must be logged in to post a comment.

Well Golly


Atheism Plus

Buy from Amazon