1. End User Computing Applied CSS: Building our course homepage Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie

2. 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

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

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

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

6. The Box Model

7. 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; }

8. Example1: margins.html margins.css

9. 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:

10. 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

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

12. 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

13. 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.

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

15. Boxes..

16. 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.