CSS Layouts CH 13

Objective CSS units The display property Box properties Positioning

Sample Property Names and Values CSS units CSS properties have names and values Sample Property Names and Values Name Value display none font-style Italic margin-top 0.5in font-size 12pt border-style solid color #CC0033 background-color white background-image url(http://www.idgbooks.com/images/paper.gif) list-style-image url(/images/redbullet.png) line-height 120%

CSS units The names are all CSS keywords Values are more diverse Some are keywords, such as none in display or solid in border-style Order values are numbers with units

CSS Units – length values Length values - length is a scalar measure used for width, height, font size, word and letter spacing, text indentation, line height, margins, padding, border widths, and many other properties Lengths are given as a number followed by the abbreviation for one of these units

CSS Units – length values Abbrevation Inches In Centimeters Cm Millimeters Mm Points Pt Picas Pc Pixel Px Ems Em Exs ex This rule says that the font used for the TITLE element should be exactly 1 centimeter high TITLE {font-size: 1cm}

CSS Units – length values The units of length are divided into three classes Absolute units—Inches, centimeters, millimeters, points, and picas Relative units—Pixels, ems, and exs Percentages

CSS Units – length values Absolute units of length - lengths can be specified as a percentage of something VERSE {font-size: 150%}

CSS Units – length values Relative units of length – CSS support three relative units for lenghts em - The width of the letter m in the current font Ex - The height of the letter x in the current font Px -The size of a pixel ( widely use in modern displays

CSS Units – length values The example below set the left and right border of the PULLQUOTE The normal purpose of ems and exs is to set a width that’s appropriate for a given font, without necessarily knowing how big the font is PULLQUOTE { border-right-width: 2em; border-left-width: 2em; border-top-width: 1.5ex; border-bottom-width: 1.5ex }

CSS Units – length values Percentage units of length VERSE {font-size: 150%}

CSS units - URL values CSS properties can have URL values, including background-image, content, and list-style-image URL can be encode in either single or double quotes DOC {background-image: url(http://www.mysite.com/bg.gif) } LETTER {background-image: url(/images/paper.gif) } GAME {background-image: url(currentposition.gif)} INSTRC {background-image: url(../images/screenshot.gif)}

CSS Units - Color values One of the most widely adopted uses of CSS is applying foreground and background colors to elements on the page Properties that take on color values include color, background-color, and border-color CSS provides four ways to specify color: by name, by hexadecimal components, by integer components, and by percentages

CSS Units - Color values CSS understands these 16 color names adopted from the Windows VGA palette by Name aqua black blue fuchsia gray green lime maroon olive purple red silver teal white yellow navy

CSS Units - Color values CSS uses a 24 bits color model and each primary color is store in 8 bits. Number can be in Decimal or hexadecimal. Color Decimal RGB Hexadecimal Percentage Pure red Rgb(255,0,0) #FF0000 Rgb(100%,0%,0%) Pure green rgb(0,255,0) # #00FF00 rgb(0%, 100%, 0%) Pure blue rgb(0,0,255) #0000FF rgb(0%, 0%, 100%) White rgb(255,255,255) #FFFFFF rgb(100%, 100%, 100%) Black rgb(0,0,0) #000000 rgb(0%, 0%, 0%) Light violet rgb(255,204,255) #FFCCFF rgb(100%, 80%, 100%)

Values for the Display Property The display property specifies which one of these an element is Values for the Display Property Block Level Inline Elements Table Parts Invisible block inline table-column None table inline-table table-cell run-in table-column-group compact table-row table-header-group table-row-group table-caption

The Display Property cont… Block elements are usually separated from other elements by line breaks before and after each one Table elements are parts of a grid Inline elements are placed one after the other in a row Block elements are more fixed and, at most, move up and down but not left and right as content is added before and after them

The Display Property - Inline elements Inline elements are laid out horizontally in a row, starting from the top of the containing box of the surrounding page or block element and moving from left to right

The Display Property - Block elements Block-level elements are laid out vertically, one on top of the other The first block is laid out in the top left corner of the containing block; then the second block is placed below it

The Display Property - None Setting display to none hides the element An element whose display property is set to None is invisible and not rendered on the screen

The Display Property - Tables Tables can be format using 10 values in CSS of the display property ✦ table ✦ inline-table ✦ table-row-group ✦ table-header-group ✦ table-footer-group ✦ table-row ✦ table-column-group ✦ table-column ✦ table-cell ✦ table-caption

The Display Property - Tables SYNOPSIS {display: table} TITLE {display: table-header} SCENE { display: table-row} ACT { display: table-row-group } LOCATION, SCENE_NUMBER { display: table-cell }

The Display Property - List items The list-style-type property The list-style-type property determines the nature of the bullet character in front of each list item Examples. See page 354 for more property ✦ disc: • ✦ circle: ° ✦ square: o ✦ decimal: 1, 2, 3, 4, 5, and so on

The Display Property - List items SYNOPSIS { display: block; margin-left: 0.5in } TITLE { display: block } ACT { display: list-item; list-style-type: none } SCENE { display: list-item; list-style-type: square }

The Display Property - image The list-style-image property You can use a bitmapped image as the bullet SCENE { display: list-item; list-style-image: url(heart.jpg); list-style-type: square }

Box properties

Box Properties cont… Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent

Box properties – Margin Margin properties Margin properties control the amount of space added to the box outside its border This can be set separately for the top, bottom, right and left margins using the margin-top margin-bottom margin-right margin-left properties

Box properties – Margin Each margin can be specified as an absolute length or as a percentage of the size of the parent element’s width

Box properties - Border properties Border properties - let you specify the style, width and color of the border Border style – by default, no border is drawn around boxes regardless of the width and color of the border To make a border visible, you must change the border-style property of the box from its default value of none to one of these 10 values in the list

Box properties - Border properties Most boxes don’t have border. They are invisible rectangle Border Style ✦none—No line ✦ hidden—An invisible line that still takes up space ✦ dotted—A dotted line ✦ dashed—A dashed line ✦ solid—A solid line ✦ double—A double solid line ✦ grooved—A line that appears to be drawn into the page ✦ ridge—A line that appears to be coming out of the page ✦ inset—The entire element (not just the line around the edge) appears pushed into the do Example of how to use border http://www.w3schools.com/css/css_border.asp cument

Box properties - Border properties The border-style property can have between one and four values. As with the margin property, a single value applies to all four borders SYNOPSIS { border-style: solid } SYNOPSIS { margin: 1cm 1cm 1cm 1cm } SYNOPSIS, TITLE, ACT, SCENE { display: block } ACT { margin-top: 3ex }

Box properties - Border properties Border width Four border-width properties specify the width of the borderlines along the top, bottom, right, and left edges of the box ✦ border-top-width ✦ border-right-width ✦ border-bottom-width ✦ border-left-width SYNOPSIS { border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px }

Used to set border color ✦ border-top-color ✦ border-right-color ✦ border-bottom-color ✦ border-left-color SYNOPSIS { border-style: solid; border-width: 1px; border-color: red }

Positioning The clear property The clear property specifies whether an element can have floating elements on its sides Link to positioning http://www.w3schools.com/css/css_positioning.asp

references http://www.avajava.com/tutorials/lessons/how-do- i-style-an-xml-file-with-css.html http://www.w3schools.com/css/css_howto.asp CSS http://www.w3schools.com/css/css_boxmodel.asp How do I style an XML file with CSS http://www.avajava.com/tutorials/lessons/how-do-i-style-an-xml-file-with-css.html CSS Trick http://css-tricks.com/complete-guide-table-element/