Blog 4
CSS can be a little tedious at first and sometimes I find it difficult to use CSS to put my content exactly the way I want it but Gemma’s tip to use the developer tools to real time edit my css in the browser so that I can see immediately the result and then add it to my CSS file as a permanent change.
We covered using css in our lecture this week so that we could begin putting decoration to our semantic HTML assignment. Since I already have experience with CSS there was not a ton of new information for me to learn but it’s always great to get a refresher. There are some really cool things about css which I found in this article. Some of the items on the list are super useful to know like the shorthand properties that allow you to set multiple values at once on a property such as margin e.g. margin: 0px 10px 10px 0px. I actually ended up using this feature in my project for setting different padding values in the footer.
A less useful but still interesting thing you can do with CSS is change the colour of a text selector or on a web page by setting the background colour on the ::selection property. This means when the user highlights the text on the webpage that imports the stylesheet it will appear the colour you specified in the CSS file. Lastly another really useful feature of css is the calc() tool. The example in the article is to use the tool when you want to start content on a page after your 300px nav. Calc will allow you to set the content width to the size of the viewport minus the nav width e.g. width: calc(100vw - 300px);