End User Computing Applied CSS: Building our course homepage Sujana Jyothi Department of Computer Science

Today’s lecture We've going to try and do three things today  Cover the “Box Model”  Build the course homepage using the Box Model  This will prepare us for Wednesday's lab

The Box Model The box model refers to 3 CSS elements:  Margin  Padding  Border

The Box Model The box model refers to 3 CSS elements:  Margin  Padding  Border Width Height

The Box Model The box model refers to 3 CSS elements: Margin Padding Border Width Height

The Box Model

Margins An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } Or alternatively… body { margin: 100px 40px 10px 70px; }

Example1: margins.html margins.css

Padding Padding can be understood as "filling". Padding defines the inner distance between the element and its border Lets have a look at an example.. marginsAndPadding.html marginsAndPadding.cssmarginsAndPadding.htmlmarginsAndPadding.css Example2:

Borders Borders can be used for decoration, for underling or for separation Border settings include:  border-width (pixels, thick, thin…)  border-color  border-style (dashed, solid, dotted…)  border Example3: marginsPaddingAndBorders.html marginsPaddingAndBorders.css

Width and Height You can define the width and height of an element Let’s take a look Example 4: marginsPaddingBordersWidthAndHeight.html marginsPaddingBordersWidthAndHeight.css

Summary To recap the box model  Is used to show where the container is, where the content will stop and what the margin and padding does.  It is important to understand if you are doing any projects in CSS

New Homepage Let’s use the box model to develop our new homepage for the course which will have  a header,  a footer,  a content container and  a left container. All of this will be needed to do Wednesday's lab.

The Web Page Final Example: index.htmlindex.html style16.cssstyle16.css

Boxes..

Let’s get started… Create all our divs and get our positions sorted. Then we are going to make incremental changes until we get it looking right.