Introduction to CSS Part3

In this lesson, we covered the four properties of the box model: height and width, padding, borders, and margins. Understanding the box model is an important step towards learning more advanced HTML and CSS topics. Let’s take a minute to review what you learned:

  • The box model comprises a set of properties used to create space around and between HTML elements.
  • The height and width of a content area can be set in pixels or percentages.
  • Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties.
  • Padding is the space between the content area and the border. It can be set in pixels or percent.
  • Margin is the amount of spacing outside of an element’s border.
  • Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element.
  • Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin.
  • margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width.
  • The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent’s content area.
  • The visibility property can hide or show elements.
  • In the default box model, box dimensions are affected by border thickness and padding.
  • The box-sizing property controls the box model used by the browser.
  • The default value of the box-sizing property is content-box.
  • The value for the new box model is border-box.
  • The border-box model is not affected by border thickness or padding.

Example:

*{
  box-sizing: border-box;
}
body {
  background-color: white;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  font-weight: 100;
  letter-spacing: 2px;
  padding: 20px;
}

.navigation  li.logo {
  color: black;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
}

.donate{
  visibility: hidden;
}

#banner {
  background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg");
  background-size: cover;
  background-position: bottom center;
  height: 700px;
  width: 100%;
}

#banner .content h1 {
  border: 3px solid white;
  position: relative;
  top: 50px;
  width: 400px;
  margin: 0 auto;
}

#main {
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  width: 400px;
  height: 1000px;
  overflow: scroll;
}

h1 {
  color: white;
  font-size: 42px;
  font-weight: 600;
  text-align: center;
}

h2 {
  border: 1px dotted red;
  color: red;
  font-size: 14px;
  line-height: 48px;
  padding: 20px 30px;
  margin: 30px 20px;
  text-align: center;
}

h3 {
  color: red;
  font-size: 26px;
  font-weight: 700;
  padding: 20px 10px;
}

p {
  color: grey;
  font-size: 16px;
  line-height: 48px;
  margin-top: 60px;
  padding: 10px 20px;
}

.pull-quote {
  margin: 0 auto;
  width: 400px;
}

.byline {
  border-bottom: 1px solid LightGrey;
  border-top: 1px solid LightGrey;
  color: DarkGrey;
  font-size: 14px;
  font-weight: 200;
}

.share {
  border: 1px solid LightGrey;
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

.share a {
  background: red;
  border: 1px solid red;
  border-radius: 3px;
  color: white;
  display: inline-block;
  margin: 10px;
  padding: 14px;
  text-decoration: none;
}

.share a:hover {
  background: white;
  border: 1px solid red;
  color: red;
}


/* Universal Styles */

body {
  background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_foodlogo.png");
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
}

a {
  text-decoration: none;
}

/* Navigation */

nav {
  text-align: center;
}

nav img {
  display: block;
  width: 180;
  margin: 0 auto;
}

nav span {
  display: block;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 10px 0px;
}

nav a {
  color: #666666;
}

/* Content Container */

.content {
  width: 100%;
  height: 500px;
  margin: 10px auto;
  overflow: scroll;
}

/* Content Header */

.header {
  background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  background-position: center;
  background-size: cover;
  height: 320px;
}

.header h1 {
  background-color: #05A8AA;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  width: 68%;
  padding: 20px;
  margin: 0 auto;
}

/* Content Body */

.content .body {
  width: 90%;
  margin: 0 auto;
}

.body p {
  color: #333333;
  font-weight: 100;
  line-height: 34px;
  width: 90%;
  margin-top: 18px;
}

/* Content Button */

.button {
  border-radius: 4px;
  color: #05A8AA;
  display: block;
  font-weight: 700;
  width: 200px;
  padding: 20px;
  margin: 40px auto;
  border: 1px solid blue;
}

.button:hover {
  background-color: #05A8AA;
  border: 1px solid #05A8AA;
  color: #FFF;
}

/* Content Nutrition */

ul.nutrition {
  padding: 20px;
}

ul.nutrition li {
  display: inline-block;
  background-color: #05A8AA;
  list-style: none;
  width: 200px;
  padding: 10px 20px;
  margin-bottom: 3px;
}

.nutrition .category {
  color: white;
  font-weight: 100;
  letter-spacing: 2px;
  display: block;
}

.nutrition .value {
  color: white;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
}

Let’s review what you’ve learned so far:

  • The position property allows you to specify the position of an element.
  • When set to relative, an element’s position is relative to its default position on the page.
  • When set to absolute, an element’s position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled.
  • When set to fixed, an element’s position can be pinned to any part of the web page. The element will remain in view no matter what.
  • When set to sticky, an element can stick to a defined offset position when the user scrolls its parent container.
  • The z-index of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements.
  • The display property allows you to control how an element flows vertically and horizontally in a document.
  • inline elements take up as little space as possible, and they cannot have manually adjusted width or height.
  • block elements take up the width of their container and can have manually adjusted heights.
  • inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width.
  • The float property can move elements as far left or as far right as possible on a web page.
  • You can clear an element’s left or right side (or both) using the clear property.
  • When combined with an understanding of the box model, positioning can create visually appealing web pages. So far, we’ve focused on adding content in the form of text to a web page. In the next unit, you’ll learn how to add and manipulate images to a web page.

Example:

body {
  background-color: #FFF;
  margin: 0 auto;
}

header {
  background-color: #466995;
  border-bottom: 1px solid #466995;
  position: fixed;
  width: 100%;
  z-index: 10;
}

ul {
  margin: 30px auto;
  padding: 0 20px;
  text-align: center;
}

li {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  width: 80px;  
}

li:hover {
  color: #DBE9EE;
}

h1 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 300;
  text-transform: uppercase;
}

h2 {
  color: #333;
  font-family: 'Varela Round', sans-serif;
  font-size: 26px;
  font-weight: 100;
  margin: 0 auto 20px auto;
}

h3 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  padding: 30px;
}

h4 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase
}

p {
  color: #333;
  font-family: 'Varela Round', sans-serif;
  font-size: 18px;
}

footer {
  background-color: #DBE9EE;
  text-align: center;
  height: 100px;
}

.welcome {
  background-color: #DBE9EE;
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
  width: 100%;
  position: relative;
  top: 50px;
}

.question {
  text-align: center;
  position: relative;
  top: 40px;
}

.answer {
  border: 1px solid #466995;
  margin: 20px;
  display: inline-block;
}

.answer:hover {
  background: #C0D6DF;
  color: #FFF;
}

Button Example:

a{
  color:blue;
  text-decoration: underline;
  cursor: pointer;
}

a:hover{
  text-decoration: none;
}

.nav-link{
  text-decoration: none;
}

.nav-link:hover{
  color: #5495ff
}

.btn {
  background-color: #2176FF;
  border-radius: 2px;
  color: #ffffff;
  font-family: 'Raleway',sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 14px;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.btn:hover {
  background-color: #fff;
  color: #2176FF;
  transition: color .1s ease-in, background-color .1s ease-in;
}
 
.btn:active {
  font-size: 18px;
  transition: font-size .1s ease-in-out;
}

.activity {
  border: 1px solid #2176FF;
  cursor: pointer;
  text-decoration: none;
}
.activity:hover {
  background-color: #fff;
  color: #5495ff;
  transition: color .9s , background-color .9s ;
}
 
.activity:active {
  font-size: 40px;
  transition: font-size .1s;
}