{"id":2866,"date":"2020-03-08T13:22:28","date_gmt":"2020-03-08T20:22:28","guid":{"rendered":"http:\/\/www.wellgolly.com\/?p=2866"},"modified":"2020-03-08T13:22:28","modified_gmt":"2020-03-08T20:22:28","slug":"updating-sites-css-notes","status":"publish","type":"post","link":"https:\/\/www.wellgolly.com\/?p=2866","title":{"rendered":"Updating sites\u2014CSS Notes"},"content":{"rendered":"<p>As I mentioned in the previous post, I\u2019m using <a href='https:\/\/www.w3schools.com\/'>W3Schools<\/a> to review HTML and CSS in order to create some exercises. Here are a few things that I didn\u2019t know about CSS or want to remind myself about.<\/p>\n<p>\u201cNote: 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!\u201d <\/p>\n<p>Padding (outline, margins, and border) in CSS is added to the width of an element. So <i>div { width: 300px; padding: 25px;}<\/i> will have a width of 325 pixels. To keep the width at 300 px you need to add the declaration <i>box-sizing: border-box;<\/i> inside the brackets.<\/p>\n<p>Occasionally I want to add whitespace and end up using <i>&amp;nbsp;<\/i> a bunch of times. There is a descriptor, <i>white-space: pre;<\/i> that will work.<\/p>\n<p style='white-space: pre;'>This is a paragraph that has a bunch of spaces before the last       word.<\/p>\n<p>There are a bunch of ways to control elements based on where they appear in relation to other elements. I haven\u2019t made much use of these selectors, but mostly because I\u2019m not familiar with them. You can explore them at <a href='https:\/\/www.w3schools.com\/cssref\/css_selectors.asp'>this<\/a> W3Schools page.<\/p>\n<p>The <i>column-count:n<\/i> property is something I wish I had known about. It can be used to divide a div (or p) into columns.<\/p>\n<div style='column-count:3;'>\nThe <i>column-count<\/i> 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: <i>column-fill<\/i>, <i>column-gap<\/i>, and <i>column-rule-color<\/i>.\n<\/div>\n<p>Here\u2019s another property that can come in handy in association with <i>justify<\/i>, <i>margin-right: 20%; -webkit-hyphens: auto; -ms-hyphens: hyphens: auto<\/i>. You need all three to handle different browsers.<\/p>\n<div style='display: flex; justify-content: center;'>\n<p style=' text-align: justify; width: 20%; padding: 20px;'>\nSuppose 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 <i>-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto<\/i> to clean it up a bit.\n<\/p>\n<p style=' text-align: justify; width: 20%; padding: 20px; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;'>\nSuppose 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;.\n<\/p>\n<\/div>\n<p>I just learned about <i>display: flex; justify-content: center;<\/i> when laying out the previous two paragraphs. I first put them in a div and did a <i>float: left<\/i> and <i>float:right<\/i> 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\u2019t brush up against each other.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As I mentioned in the previous post, I\u2019m using W3Schools to review HTML and CSS in order to create some exercises. Here are a few things that I didn\u2019t know about CSS or want to remind myself about. \u201cNote: Remember that the height and width properties do not include padding, borders, or margins! They set &hellip; <a href=\"https:\/\/www.wellgolly.com\/?p=2866\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Updating sites\u2014CSS Notes<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-2866","post","type-post","status-publish","format-standard","hentry","category-html-and-css"],"_links":{"self":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2866"}],"version-history":[{"count":40,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2866\/revisions"}],"predecessor-version":[{"id":2906,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2866\/revisions\/2906"}],"wp:attachment":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}