CSS Box Model: Building a Course Homepage

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

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. Height Width The Box Model • The box model refers to 3 CSS elements: • Margin • Padding • Border

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

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.. Example2: marginsAndPadding.htmlmarginsAndPadding.css

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