Initial commit

## Example files for the title:  

# CSS3 Properties, by Ben Jaffe

[![CSS3 Properties, by Ben Jaffe](http://akamaicovers.oreilly.com/images/9781771372077/cat.gif)](https://www.safaribooksonline.com/library/view/title/9781771372077//)

The following applies to example files from material published by O’Reilly Media, Inc. Content from other publishers may include different rules of usage. Please refer to any additional usage rights explained in the actual example files or refer to the publisher’s website.

O'Reilly books are here to help you get your job done. In general, you may use the code in O'Reilly books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.

If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at <permissions@oreilly.com>.

Please note that the examples are not production code and have not been carefully testing. They are provided "as-is" and come with no warranty of any kind.

{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350

{\fonttbl\f0\fswiss\fcharset0 Helvetica;}

{\colortbl;\red255\green255\blue255;}

\margl1440\margr1440\vieww9000\viewh8400\viewkind0

\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

\f0\fs24 \cf0 No work files for this lesson...}

 No newline at end of file

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Choosing Your Box Model</title>

	<style>

	.box {

		background-color:#f99;

		margin:5px;

		padding:100px;

		text-align:center;

		border: 5px solid #555;

		width:320px;

	}

	.box-1 {

	}

	.box-2 {

	}

	.box-3 {

	}

	</style>

</head>

<body>

	<div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, molestiae, distinctio, reprehenderit atque repellat animi sint fuga sed vitae natus doloribus temporibus velit voluptas laborum odio alias id quod assumenda.</div>

	<div class="box box-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, veniam iusto cum! Placeat, aliquid, distinctio, cum, alias quidem ab atque eaque nemo tempore praesentium ipsum inventore quia natus repudiandae exercitationem.</div>

	<div class="box box-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, id, corporis, quos nostrum nesciunt nam iste illum aliquid esse et reprehenderit ab unde! Minima beatae illum voluptas porro reprehenderit maxime.</div>

	<a href="http://www.paulirish.com/2012/box-sizing-border-box-ftw/">More Information</a>

</body>

</html>

 No newline at end of file

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Choosing Your Box Model</title>

	<style>

	.box {

		background-color:#f99;

		margin:5px;

		padding:100px;

		text-align:center;

		border: 5px solid #555;

		width:320px;

	}

	.box-1 {

		-webkit-box-sizing:content-box;

		-moz-box-sizing:content-box;

		box-sizing:content-box;

	}

	.box-2 {

		-webkit-box-sizing:border-box;

		-moz-box-sizing:border-box;

		box-sizing:border-box;

	}

	.box-3 {

		-webkit-box-sizing:padding-box;

		-moz-box-sizing:padding-box;

		box-sizing:padding-box;

	}

	</style>

</head>

<body>

	<div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, molestiae, distinctio, reprehenderit atque repellat animi sint fuga sed vitae natus doloribus temporibus velit voluptas laborum odio alias id quod assumenda.</div>

	<div class="box box-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, veniam iusto cum! Placeat, aliquid, distinctio, cum, alias quidem ab atque eaque nemo tempore praesentium ipsum inventore quia natus repudiandae exercitationem.</div>

	<div class="box box-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, id, corporis, quos nostrum nesciunt nam iste illum aliquid esse et reprehenderit ab unde! Minima beatae illum voluptas porro reprehenderit maxime.</div>

	<a href="http://www.paulirish.com/2012/box-sizing-border-box-ftw/">More Information</a>

</body>

</html>

 No newline at end of file

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Columns</title>

	<style>

	.content {

	}

	</style>

</head>

<body>

	<div class="content">

		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, incidunt, autem, ducimus, pariatur officia unde ea porro similique laboriosam quo doloremque perferendis qui labore necessitatibus saepe ex laudantium atque doloribus neque molestias id vel quas accusamus nemo minima inventore itaque tempora possimus rerum deserunt dolor cupiditate ipsam earum? Quis, at, animi nisi ea inventore aut repudiandae incidunt quod debitis iusto praesentium nihil optio minima similique magnam sapiente natus. Modi, perspiciatis, debitis eaque rem atque dolor optio ea possimus incidunt eveniet unde reiciendis soluta suscipit error quos illo odio! Doloribus, dicta, magni placeat veritatis fugit debitis architecto officia nisi aperiam aliquid. Saepe, sunt, iusto sit quod debitis molestias maxime rerum vitae obcaecati amet laborum commodi autem unde nobis nihil quis delectus excepturi explicabo eaque facere harum cum odit necessitatibus eos inventore tenetur dolor modi! Pariatur, vero modi adipisci incidunt provident fugit consequatur rem dolore possimus deleniti? Voluptatum non debitis corporis aliquam iste explicabo ab mollitia cumque quaerat recusandae? Tenetur, rem dicta totam eos minus earum libero facilis temporibus harum consequatur molestiae labore laudantium quod optio perspiciatis accusamus neque architecto numquam possimus deleniti nisi similique quidem voluptate impedit delectus error repellat ducimus illum iusto ex minima debitis praesentium fugit sed reiciendis nesciunt!

	</div>

</body>

</html>

 No newline at end of file