Codecademy - CSS 3: The Box Model

What i've learnt from the The Box Model lesson of Codecademy's CSS course.

-An elements height and width can be changed using CSS. Using this method means that the element will be the same on all devices. Something that fits on a laptop screen could overflow a phone screen.

p {
  height: 80px;
  width: 240px;
}

-Borders can be used with elements. You can set specific styles, thicknesses and colours. If certain values aren't set (e.g. thickness) then the default is assigned for that property.

p {
  border: 3px solid coral;
}

-You can have single line borders at the top, bottom, left or right of an element by using border-top, border-bottom, border-left and/or border-right

p{

border-top: 2px solid white;

border-bottom: 2px solid white;

}

-The border styling reveals the shape of an elements border. Its automatically rectangular. You can change this by using border-radius. Giving a border-radius of 5px, for example, gives the same curvature that a circle with a radius of 5px would have. If your element has the same height and width (so its a square...) if you set its border-radius to 100% it would be a perfect circle.

div.container {
  border: 3px solid rgb(22, 77, 100);
  border-radius: 5px;
}

-Padding is like the space between a painting and the picture frame. Changing padding can mean the elements look less cramped. You can change overall padding in one go or be more specific by using padding-top, padding-bottom, padding-left and/or padding-right.

h2 {
  border: 1px dotted red;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

-Alternatively, you can specify the padding for each side of an element, starting with the top and going round in a clockwise direction (top, right, bottom, left) like the first example. OR if the top & bottom will be the same, and the left & right will be the same you can use the second method (first number is top and bottom, second is left and right)

First Example:
p.content-header {
  border: 3px solid grey;
  padding: 6px 11px 4px 9px;
}

Second Example:
p.content-header {
  padding: 5px 10px;
}

-Margins are the space just outside the border of an element. You can use just margin on its own to set the margins around the whole of the element be more specific using margin-top, margin-bottom, margin-left and/or margin-right. Alternatively, you can use margin and then specify the top, right, bottom and left OR top&bottom left&right margins for your element to be more specific.

p {
  margin-right: 15px;
}

OR

p {
  margin: 6px 10px 5px 12px;
}

-Auto margin You can use the code below to set the top and bottom margin to 0 and the left and right margins are set to auto. This means that however large the screen is, the element will centre itself within the element that it is inside. This only works if a width is also set for that element that is smaller than the element that it is inside. (I think...had to read that one a few times)

div.headline {
  width: 400px;
  margin: 0 auto;
}

-You can set minimum height and widths to elements so that when they're viewed on different sized screens or when windows are resized, it won't become unreadable. These are more commonly implemented on img elements.

p {
  min-width: 300px;
  max-width: 600px;
  min-height: 150px;
  max-height: 300px;
}

-Overflow When using the above size selectors you might find that an element is larger than its parent's containing area. In this case, you need to tell the browser how to behave with the stuff that is left over. Hidden makes sure that content is hidden from view, scroll means that a scroll bar is used so the content can be seen and visible (the default) means that the content can be seen outside of the containing element. It says this selector needs to be used on the parents of the element you want to change but that doesn't make sense with the example given for me.

p {
  overflow: scroll; 
}

-Resetting defaults -All major browsers have default settings for the margins and paddings of elements. This can sometimes make styling a page difficult. These default stylesheets are called user agent stylesheets. These can be reset so there is absolutely no css applied to the webpage and it'll be a clean slate to work with.

* {
  margin: 0;
  padding: 0;
}

-Visibility - Elements can be hidden from a webpage by using the visibility property. This can either be set to hidden or visible. This would mean that there is still a place for the element on the site but it couldn't be seen. Alternatively you could use display:none which would remove it from the page and not keep its place which could alter the layout of the page.

.future {
  visibility: hidden;
}