Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td elements: CENG 449 Lecture 7

Slide 2 of 83 table{ border: 6px solid black; } th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 7

Slide 3 of 83 Collapse Borders The border-collapse property sets whether the table borders are collapsed into a single border or separated: CENG 449 Lecture 7

Slide 4 of 83 th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 7

Slide 5 of 83 table { border-collapse: collapse; } th, td { border: 2px solid red; } Firstname Lastname Peter Griffin Lois Griffin CENG 449 Lecture 7

Slide 6 of 83 Table Width and Height Width and height of a table is defined by the width and height properties. table { width: percent | pixel; } pixels:Sets the width in pixels (example: width="50") percent: Sets the width in percent of the surrounding element (example: width="50%") CENG 449 Lecture 7

Slide 7 of 83 table, td, th { border: 1px solid black;} table { width: 100%;} th { height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7

Slide 8 of 83 CENG 449 Lecture 7 table, td, th { border: 1px solid black;} table { width: 50%; } th { height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150

Slide 9 of 83.borderStyle{ border: 1px solid black; } table{ width:50%; } Month Savings January $100 February $80 CENG 449 Lecture 7

Slide 10 of 83.borderStyle { border: 1px solid black; } table{ width:50; } th, td { border: 1px solid black; } Month Savings January $100 February $80 CENG 449 Lecture 7

Slide 11 of 83.borderStyle { border: 1px solid black; } table{ width:50%; } th, td { border: 1px solid black; } Month Savings January $100 February $80 CENG 449 Lecture 7

Slide 12 of 83 Table Text Alignment The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center: CENG 449 Lecture 7

Slide 13 of 83 table, td, th { border: 1px solid black; } td { text-align: right; } Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7

Slide 14 of 83 table, td, th { border: 1px solid black;} table{width:100%; }.leftAlign{ text-align: left;}.rightAlign{ text-align: right;}.topAlign{vertical-align: top; }.bottomAlign{vertical-align: bottom; }.centerAlign{vertical-align: center; } td, th {height: 50px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7

Slide 15 of 83 Table Padding To control the space between the border and content in a table, use the padding property on td and th elements: CENG 449 Lecture 7

Slide 16 of 83 table, td, th { border: 1px solid black;} td { padding: 15px;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7

Slide 17 of 83 Table Color The example below specifies the color of the borders, and the text and background color of th elements: CENG 449 Lecture 7

Slide 18 of 83 table, td, th { border: 1px solid green; } th { background-color: green; color: white;} Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 CENG 449 Lecture 7

Slide 19 of 83 MARGIN, PADDING, POSITIONING CENG 449 Lecture 7

Slide 20 of 83 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. The box model allows us to add a border around elements, and to define space between elements. CENG 449 Lecture 7

Slide 21 of 83 CENG 449 Lecture 7

Slide 22 of 83 Hello! CENG 449 Lecture 7

Slide 23 of 83 body{ border: 2px solid red; } Hello! CENG 449 Lecture 7

Slide 24 of 83 html{ border: 2px solid green; } body{ border: 2px solid red; } Hello! CENG 449 Lecture 7

Slide 25 of 83 html{ border: 2px solid green; } head{ border: 1px solid black; } title{ border: 1px solid blue; } body{ border: 2px solid red; } My Title HERE Hello! CENG 449 Lecture 7

Slide 26 of 83 CSS Margin Margin of an HTML element is the distance from the border of the element to the border of following HTML element. The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. CENG 449 Lecture 7

Slide 27 of 83 margin EX: margin: 10px 20px 10px 10px margin-bottom EX: margin-bottom: 2cm; margin-left EX: margin-left: 2cm; margin-right EX: margin-right: 2px; margin-top EX: margin-top: 10%; CENG 449 Lecture 7

Slide 28 of 83 margin-top/bottom/left/right: possible Values Possible Values Value Description auto The browser calculates a margin length Specifies a margin in px, pt, cm, etc. Default value is 0px % Specifies a margin in percent of the width of the containing element inherit Specifies that the margin should be inherited from the parent element CENG 449 Lecture 7

Slide 29 of 83 To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property. The shorthand property for all the margin properties is "margin": --The margin property can have from one to four values-- margin: 25px 50px 75px 100px; – top margin is 25px – right margin is 50px – bottom margin is 75px – left margin is 100px margin: 25px 50px 75px; – top margin is 25px – right and left margins are 50px – bottom margin is 75px margin: 25px 50px; – top and bottom margins are 25px – right and left margins are 50px margin: 25px; – all four margins are 25px CENG 449 Lecture 7

Slide 30 of 83 body{ border: 2px solid red; margin: 0px; } Hello! CENG 449 Lecture 7

Slide 31 of 83 body{ border: 2px solid red; margin-left: 40px; } Hello! CENG 449 Lecture 7

Slide 32 of 83 body{ border: 2px solid red; margin-left: 40px; margin-top: 0px; } Hello! CENG 449 Lecture 7

Slide 33 of 83 body{ border: 2px solid red; margin-left: 40px; margin-top: 0px; margin-right: 0px; } Hello! CENG 449 Lecture 7

Slide 34 of 83 body{ border: 2px solid red; } Hello! CENG 449 Lecture 7

Slide 35 of 83 body { border: 1px solid red; } p{ border:dotted; } A paragraph with no margins specified. CENG 449 Lecture 7

Slide 36 of 83 HTML Block Elements and Inline Elements Most HTML elements are defined as block level elements or inline elements. Block level elements normally start (and end) with a new line, when displayed in a browser. Examples:,,, Inline elements are normally displayed without line breaks. Examples:,,, CENG 449 Lecture 7

Slide 37 of 83 Block level elements normally start (and end) with a new line, when displayed in a browser. As illustrated in slide 33, this is achieved by assigning default top and bottom margin values to the HTML element CENG 449 Lecture 7

Slide 38 of 83 body { border: 1px solid red; } p{ border:dotted; margin: 0px; } A paragraph with no margins specified. CENG 449 Lecture 7

Slide 39 of 83 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified. CENG 449 Lecture 7

Slide 40 of 83 margin has no relation with the browser size but related to the next border CENG 449 Lecture 7 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified.

Slide 41 of 83 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; margin-top: 30mm; } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified. CENG 449 Lecture 7

Slide 42 of 83 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; margin-top: 30mm; margin-left: 50%; /* % XX Secifies a margin in percent of the width of the containing element */ } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified. CENG 449 Lecture 7

Slide 43 of 83 CENG 449 Lecture 7 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; margin-top: 30mm; margin-left: 50%; /* % XX Secifies a margin in percent of the width of the containing element */ } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified.

Slide 44 of 83 body { border: 1px solid red; } p{ border:dotted; margin-bottom: 2cm; margin-top: 30mm; margin-left: 50%; margin-right: 0.5cm; /* % XX Secifies a margin in percent of the width of the containing element */ } Paragraph-1 with bottom margin specified. Paragraph-2 with bottom margin specified. CENG 449 Lecture 7

Slide 45 of 83 CENG 449 Lecture 7

Slide 46 of 83 p.ex1 { margin-bottom: 2cm; } A paragraph with no margins specified. A paragraph with a 2cm bottom margin. A paragraph with no margins specified. CENG 449 Lecture 7

Slide 47 of 83 body { border: 1px solid red; } ol { border: 2px solid green; } ol li { border: 2px dotted blue; } ITEM-1 ITEM-2 CENG 449 Lecture 7

Slide 48 of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; } ITEM-1 ITEM-2 CENG 449 Lecture 7

Slide 49 of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; } ITEM-1 ITEM-2 CENG 449 Lecture 7

Slide 50 of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; } ITEM-1 ITEM-2 CENG 449 Lecture 7

Slide 51 of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; margin-right: 10mm; } ITEM-1 ITEM-2 CENG 449 Lecture 7

Slide 52 of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; margin-right: 10mm; margin-left: 50%; } ITEM-1 ITEM-2 CENG 449 Lecture 7

Slide 53 of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; margin-left: 1cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; margin-right: 10mm; margin-left: 50%; } ITEM-1 ITEM-2 CENG 449 Lecture 7

Slide 54 of 83 CSS Padding The CSS padding properties define the space between the element border and the element content. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. CENG 449 Lecture 7

Slide 55 of 83 p { background-color: yellow; } p.padding { padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; } This is a paragraph with no specified padding. This is a paragraph with specified paddings. CENG 449 Lecture 7

Slide 56 of 83 Padding Values: length Defines a fixed padding (in pixels, pt, em, etc.) % Defines a padding in % of the containing element initial Sets this property to its default value. inherit Inherits this property from its parent element. Padding - Shorthand property: The padding property can have from one to four values. padding: 25px 50px 75px 100px; – top padding is 25px – right padding is 50px – bottom padding is 75px – left padding is 100px padding: 25px 50px 75px; – top padding is 25px – right and left paddings are 50px – bottom padding is 75px padding: 25px 50px; – top and bottom paddings are 25px – right and left paddings are 50px padding: 25px; – all four paddings are 25px CENG 449 Lecture 7

Slide 57 of 83 body { border: 1px solid red; } ol { border: 2px solid green; margin-bottom:2cm; margin-left: 1cm; } ol li { border: 2px dotted blue; margin-bottom: 1cm; margin-top: 15mm; margin-right: 10mm; margin-left: 50%; padding: 1cm; background-color: yellow; } ITEM-1 ITEM-2 CENG 449 Lecture 7

Slide 58 of 83 p.padding { padding-left: 2cm; } p.padding2 { padding-left: 50%; } This is a text with no left padding. This text has a left padding of 2 cm. This text has a left padding of 50%. CENG 449 Lecture 7

Slide 59 of 83 CENG 449 Lecture 7

Slide 60 of 83 body { border: 1px solid red; } p.padding { padding-bottom: 2cm;} p.padding2 { padding-bottom: 50%; border: 1px dotted blue; } This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%. CENG 449 Lecture 7

Slide 61 of 83 CSS Dimension The CSS dimension properties allow you to control the height and width of an element. height and width properties sets the height and with of an HTML element The height and width properties do not include padding, borders, or margins, just the content of the element Ex: p.ex { height: 100px; width: 100px; } CENG 449 Lecture 7

Slide 62 of 83 height: auto|length|initial|inherit; autoThe browser calculates the height. lengthDefines the height in px, cm, etc. %Defines the height in percent of the containing block initialSets this property to its default value. inheritInherits this property from its parent element. CENG 449 Lecture 7

Slide 63 of 83 p.ex { height: 200px; width: 100px; border: dotted; } The height and width of this paragraph are 200px and 100px. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. CENG 449 Lecture 7

Slide 64 of 83 CENG 449 Lecture 7

Slide 65 of 83 html { border: solid red; } body { border: solid black; } Hello CENG 449 Lecture 7

Slide 66 of 83 html { border: solid red; background-color: yellow; } body { border: solid black; } Hello CENG 449 Lecture 7

Slide 67 of 83 html { border: solid red; background-color: yellow; } body { border: solid black; background-color: cyan; } Hello CENG 449 Lecture 7

Slide 68 of 83 html { border: solid red; background-color: yellow; height: 99%; } body { border: solid black; background-color: cyan; } Hello CENG 449 Lecture 7

Slide 69 of 83 html { border: solid red; background-color: yellow; height: 100%; } body { border: solid black; background-color: cyan; height: 50%; } Hello CENG 449 Lecture 7

Slide 70 of 83 html { border: solid red; background-color: yellow; height: 100%; } body { border: solid black; background-color: cyan; height: 100%; } Hello CENG 449 Lecture 7

Slide 71 of 83 body { border: solid black; background-color: cyan; } Hello CENG 449 Lecture 7

Slide 72 of 83 p { max-height: 70px; background-color: yellow; overflow: auto; } The maximum height of this paragraph is set to 70px. The maximum height of this paragraph is set to 70px. The maximum height of this paragraph is set to 70px..… …. s CENG 449 Lecture 7

Slide 73 of 83 CSS overflow Property: The overflow property specifies what happens if content overflows an element's box. overflow: visible|hidden|scroll|auto|initial|inherit; visibleThe overflow is not clipped. It renders outside the element's box. hiddenThe overflow is clipped, and the rest of the content will be invisible scrollThe overflow is clipped, but a scroll-bar is added to see the rest of the content autoIf overflow is clipped, a scroll-bar should be added to see the rest of the content initialSets this property to its default value. inheritInherits this property from its parent element. CENG 449 Lecture 7

Slide 74 of 83 div.scroll { background-color: #00FFFF; width: 100px; height: 100px; overflow: scroll; } div.hidden { background-color: #00FF00; width: 100px; height: 100px; overflow: hidden; } The overflow property specifies what to do if the content of an element exceeds the size of the element's box. overflow:scroll You can use the overflow property when you want to have better control of the layout. The default value is visible. overflow:hidden You can use the overflow property when you want to have better control of the layout. The default value is visible. CENG 449 Lecture 7

Slide 75 of 83 CENG 449 Lecture 7

Slide 76 of 83 heightSets the height of an element max-heightSets the maximum height of an element max-widthSets the maximum width of an element min-heightSets the minimum height of an element min-widthSets the minimum width of an element widthSets the width of an element CENG 449 Lecture 7

Slide 77 of 83 CSS Display and Visibility visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there: CENG 449 Lecture 7

Slide 78 of 83 h1.hidden { visibility: hidden; } This is a visible heading This is a hidden heading Notice that the hidden heading still takes up space. CENG 449 Lecture 7

Slide 79 of 83 h1.hidden { visibility: hidden; } This is a visible heading This is a hidden heading Notice that the hidden heading still takes up space. CENG 449 Lecture 7

Slide 80 of 83 h1.hidden { display: none; } This is a visible heading This is a hidden heading Notice that the hidden heading does not take up space. CENG 449 Lecture 7

Slide 81 of 83 CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: Changing How an Element is Displayed Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards. CENG 449 Lecture 7

Slide 82 of 83 li { display: inline; } Display a list of links as a horizontal menu: HTML CSS JavaScript CENG 449 Lecture 7