CSS Styling

CSS Styling Styling Backgrounds background-color Background color corresponds to a HEX value like ʻ#ff0000ʼ, an RGB value like ʻrgb(255,0,0)ʼ or a color name like “red”. Example: div {background-color:#b0c4de;} backgroundimage To set background image, do body {background-image:url(ʻT.gifʼ);} where T is name of pic backgroundrepeat To repeat vertically, do background-repeat:repeat-y; To repeat horizontally, do background-repeat:repeat-x; For no repeat, do background-repeat:no-repeat; backgroundattachment For an image that scrolls with rest of page, do background-attachment:scroll; For a fixed image, do background-attachment:fixed; backgroundposition To position background do, “background-position: X Y;” where X can be left, right or center and Y can be top, bottom or center. Example: background-position: right top; The shorthand property for background is background. Example: {background:#ffffff url('img_tree.png') no-repeat right top;} Styling Text Color To change the font color, add command “color: some color;” where “some color” is a HEX value, RGB value or name. Example: div {color:#b0c4de;} text-align To align text to left, do text-align:left To align text to right, do text-align:right To center text, do text-align:center To stretch the lines so that each line has equal width, do text-align:justify text-decoration To add line below text, do text-decoration:underline To add line above text, do text-decoration:overline To add strikethrough, do text-decoration:line-through Example: text-decoration:overline; Styling Fonts Here are some fonts available in CSS: Generic Family Serif Sans-Serif Monospace Font Family Times New Roman Georgia Arial Verdana Courier New Lucida Console Description Serif fonts have lines at the end of some characters “Sans” means without – these fonts do not have lines at the ends of characters All monospace characters have the same width When specifying the font, you should have several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Example: p{font-family:"Times New Roman", Times, serif;} font-family To specify font, do “font-family: F;” where F is a(re) font name(s). font-style To display text in italics, do font-style:italic; To display text normally, do font-style:normal; font-size To specify font size, do “font-size: SIZE;” where size can be xx-small, x-small, small, medium, large, x-large, xx-large font-weight To specify font weight, do “font-weight:W” where W can be bold, bolder, lighter The shorthand property for fonts is font. The properties can be set in this order: font-style font-weight font-size font-family Example: font:italic bold 12px/30px Georgia, serif; Styling Lists list-style-type To specify the type of item marker, do “list-style-type:T;” where T can be circle, square, upper-roman, and upper-latin list-style-image To make item marker an image, do list-styleimage:url(“T.gif”); where T is the pictureʼs name The shorthand property for list-style is list-style. The properties can be set in this order: list-style-type, list-style-image. Example: ul{list-style: square url("sqpurple.gif");} Styling Tables To style tables, you will use properties introduced earlier. Table Borders To specify table borders in CSS, use the border property. Example: table, th, td { border: 1px solid black; } Sample Result: Notice that the table in the example above has double borders. This is because both the table, th, and td elements have separate borders. To display a single border for the table, use the border-collapse property. Collapse Borders To collapse borders, do border-collapse:collapse; Here is the code above, with the new command: Example: table {border-collapse:collapse;} table,th, td {border: 1px solid black;} Sample Result: Table Width and Height Width and height of a table is defined by the width and height properties. Example: table {width:100%;} th {height:50px;} Sample Result: Table Text Alignment The text in a table is aligned with the text-align and vertical-align properties. The vertical-align property sets the vertical alignment, like top, bottom, or middle. Example td {height:50px; vertical-align:bottom;} Sample Result: Table Padding To control the space between the border and content in a table, use the padding property on td and th elements: Example: td{padding:15px;} Sample Result: Table Color You can specify the color of the borders, the text and background color of th elements using border, background-color, and color properties. Example: table, td, th {border:1px solid green;} th {background-color:green; color:white;} Sample Result: