FaisalAl-Tameemi/README.md

## README.md

      
    Raw
  

              README.md
            
          
    CSS Box Model

Quick Review - CSS Syntax

Let's quickly review some of the basic syntax and anatomy of CSS code.
If we wanted to style all the divs on a given page with a height and width of 400px as well as a blue background, then our CSS code could be as follows:
div {
	height: 400px;
	width: 400px;
	background: blue;
}
Components On The Web


How should we look at components on the web?


What is the box model? how does it relate?


Component breakdown


CSS Properties


Margin
Padding
Border

Float


What is the float property?
When do we need to use it?

Box Sizing

What Is It?

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box? Or just the content-box (which is the default value of the width and height properties)?
How Is It Used?

Since it's just another CSS property, we can use it as such.
It takes 1 of four possible values:

content-box: Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included
border-box: The width and height properties (and min/max properties) includes content, padding and border, but not the margin.
initial
inherit


## index.html
<!doctype html>
<html>
  <head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" href="style.css" />
  </head>
  <body>

		<ul class="nav nav-pills">
			<li class="active">
				<a href="#">
					Home
				</a>
			</li>
			<li>
				<a href="#">
					Profile
				</a>
			</li>
			<li>
				<a href="#">
					Messages
				</a>
			</li>
		</ul>
		<!-- first div // progress bar -->
		<div class="my-container">
			<div class="progress">
			  <div
					class="progress-bar progress-bar-warning"
					role="progressbar"
					aria-valuenow="60"
					aria-valuemin="0"
					aria-valuemax="100"
					style="width: 90%"
				>
			    <span class="sr-only">60% Complete (warning)</span>
			  </div>
			</div>
		</div>
		<div>
			<ul>
				<li>Item 1...</li>
				<li>Item 2...</li>
				<li>Item 3...</li>
			</ul>
		</div>

  </body>
</html>

## style.css

body{
	background: #fff;
}

.my-container{
	height: 400px;
	width: 400px;
	margin: 10px;
	border: 3px solid #ccc;
}

article{
	position: absolute;
	top: 50px;
	right: 50px;
	height: 100px;
	width: 100px;
	background: purple;
}

/* remove default bullet points of the list */
/*ul{
	list-style: none;
}*/

/* style the list items */
/*ul li{
	display: inline-block;
	border: 1px solid #999;
	padding: 10px 20px;
}*/
	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>

	<ul class="nav nav-pills">
	<li class="active">
	<a href="#">
	Home
	</a>
	</li>
	<li>
	<a href="#">
	Profile
	</a>
	</li>
	<li>
	<a href="#">
	Messages
	</a>
	</li>
	</ul>
	<!-- first div // progress bar -->
	<div class="my-container">
	<div class="progress">
	<div
	class="progress-bar progress-bar-warning"
	role="progressbar"
	aria-valuenow="60"
	aria-valuemin="0"
	aria-valuemax="100"
	style="width: 90%"
	>
	<span class="sr-only">60% Complete (warning)</span>
	</div>
	</div>
	</div>
	<div>
	<ul>
	<li>Item 1...</li>
	<li>Item 2...</li>
	<li>Item 3...</li>
	</ul>
	</div>

	</body>
	</html>

	body{
	background: #fff;
	}

	.my-container{
	height: 400px;
	width: 400px;
	margin: 10px;
	border: 3px solid #ccc;
	}

	article{
	position: absolute;
	top: 50px;
	right: 50px;
	height: 100px;
	width: 100px;
	background: purple;
	}

	/* remove default bullet points of the list */
	/*ul{
	list-style: none;
	}*/

	/* style the list items */
	/*ul li{
	display: inline-block;
	border: 1px solid #999;
	padding: 10px 20px;
	}*/