Styling and the CSS Box Model
With creating web applications one of the main features that make a site ‘pretty’ or visually appealing is the CSS code that is used on that site. Without CSS a lot of sites can look dull, boring, or the way just the way the content is arranged can make it unappealing and difficult to read. One feature of CSS I’m focusing on in this article is the box model. It can be very useful in controlling how and where (with relation to other items) you want the context of your page to display.
The above picture is a box model and is a screenshot from then elements panel in the chrome developers tools where you can see the box model of the elements on your page. This gives you a visual of the box model of a particular element. As you can see the box model consists of 4 parts the content (blue), padding(green), border (yellow) and margin (brown). Each of these parts can be adjusted to suit your design with CSS.
The content (text or image) can be adjusted to different widths or heights. The padding is the clear space between the content and the border, this can be adjusted to a certain size around the whole element or a select side of the element (eg. padding-left). The border can be adjusted to different thicknesses around an element, the style of the border can be changed and there are a number of different choices you can use a solid, dashed, dotted, etc. With the border you can also change the color to make the styling go with your whole page. The last part of the box model is then the margin which is like the padding in that it is clear space this is the space between the different elements. Below is an example of the box model for an element with id ‘about’ and how it would be coded in a CSS file:
#about {
width: 350px;
padding: 25px;
border 20px solid red;
margin: 25px;
}There are a number of different ways to design your site with CSS. I have found knowing and using the box model to adjust and move elements around can be very helpful in terms of creating and defining your layout and design.
W3schools is a great resource for a lot of things CSS related including the box model and how to work with it.(https://www.w3schools.com/css/css_boxmodel.asp)
