Part 4 Introduction to CSS

CSS Table

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

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.

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

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

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

Box Model

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.

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

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.

CSS Border

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!

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?

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

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

CSS Margin

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.

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

CSS Padding

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.

Padding Together – Shorthand td {padding:20px 30px 40px 50px;} //top, right, bottom, left