1. Part 4 Introduction to CSS

2. CSS Table

3. Table Borders table, td, th { border:1px solid black; } Firstname Lastname Bader Ali Paul Manuel The example below specifies a black border for table, th, and td elements

4. Table Borders table, td, th { border:1px solid black; border-collapse:collapse } Firstname Lastname Bader Ali Paul Manuel The table in the previous example has double borders. Why? To display a single border for the table, use the border-collapse property.

5. Table Width and Height table,td,th { border:1px solid black; } table { width:100%; height:150px; } th { height:75px; } Firstname Lastname Bader Ali Paul Manuel

6. Table – Text alignment table,td,th { border:1px solid black; } td { width: 100px; height:100px; text-align:right; } Name Saving Bader 100 Paul 300

7. Table colors table,td,th { border:1px solid green; } th { background-color:green; color:white; } Firstname Lastname Bader Ali Paul Manuel

8. Box Model

9. The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

10. CSS box model Explanation of the different parts: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear

11. CSS Box Model div.ex { margin:10px; border:3px solid gray; padding:7px; width:200px; } ISC 340 Web Programming ISC 340 web Programming 200px 7px 3px grey color 10px What is the total width of the box? NOTE: you can specify the height of The box also.

12. CSS Border

13. Border p{ border-style: dotted } /* dashed, solid, double, groove, ridge, inset, outset */ p{ border-color: yellow green red blue} /* top –yellow; right – green; bottom – red; left – blue */ p{ border-width: 10px 20px 30px 40px } /*top – 10px; right – 20 px; bottom – 30 px; left – 40px **NOTE**: None of the border properties will have ANY effect unless the border- style property is set!

14. Border - Individual sides /* Setting the style for the top border only */ /* border-right, border-bottom, border-left */ p{ border-top-color: yellow } /* green, blue */ p{ border-top-width: 50px } /* 50cm */ What is missing in the above CSS rules?

15. All Borders Together - short notation h1{border: 50px solid red} /* width, style, color */ This is head This is head

16. border-bottom Together – short notation ( border-top, border-right, border-left ) h1{border-bottom: 50px solid red} /* width, style, color*/ This is head This is head

17. CSS Margin

18. Margin-Individual sides margin-top:100px; margin-bottom:100px; margin-right:2cm; margin-left:2cm; NOTE: It is possible to use negative values, to overlap content.

19. Margin Together – Shorthand h1{margin: 2cm 3cm 20cm 5cm} //top, right, bottom, left This is head

20. CSS Padding

21. Padding-Individual sides padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; The padding clears an area around the content (inside the border) of an element.

22. Padding Together – Shorthand td {padding:20px 30px 40px 50px;} //top, right, bottom, left 100 200 400 500