Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS 8 Oct 2015
What is CSS? o CSS (Style Sheet) defines how HTML elements are formatted and displayed. o It helps you easily change an HTML page format without substantial HTML code changes. o The style of each element is defined using a set of property values. As an example, a blue DIV with medium sized text has the following CSS properties: This is my text. Property background-color Value blue font-size 12px
CSS Syntax o The standard syntax of CSS includes an element identifier (selector) and set of properties values in brackets: div { background-color : blue; font-size : 12px; Element identifier (selector) 1 st Property - Value 2 nd Property - Value This is my text. Property background-color font-size Value blue 12px
CSS Syntax CSS rules can be added to the HTML document in three ways: 1 Inline with other HTML code. In this case, the syntax is slightly different: use the tag attribute style. <div style = background-color : blue; font-size : 12px; > </div> Downside: The HTML file have to be edited for each format change; Much repetition and complexity in CSS rules.
CSS Syntax CSS rules can be added to the HTML document in three ways: 2 Internal Style Sheet. CSS rules are placed in the <style> tag inside the <head> section. <head> </head> <style> div { background-color : blue; font-size : 12px; </style>
CSS Syntax CSS rules can be added to the HTML document in three ways: 3 External Style Sheet. CSS rules are placed in a separate file outside of the HTML file. The CSS file is referenced inside the <head> section of the HTML file. <head> </head> mystyle.css <link rel= stylesheet type= text/css href= mystyle.css > This standard part never changes div { background-color : blue; font-size : 12px; Change this to your file name
CSS Syntax Selectors CSS Selectors identify which page elements the set of CSS rules apply to. Select by element Select by HTML ID Select by CSS Class div { background-color : blue; font-size : 12px; o This rule is assigned to all DIV elements. #mydiv { background-color : blue; font-size : 12px; o ID is specified with # o Use the specified ID in HTML attribute: <div id= mydiv > </div>.mycssclass { background-color : blue; font-size : 12px; o Class is defined by dot(.) o Use the specified class in HTML attribute: <div class= mycssclass > </div>
CSS Syntax Selectors CSS selectors can be combined in certain ways: div#mydiv { color : blue.my1class,.my2class { color : blue.my1class.my2class { color : blue.my1class.my2class { color : blue o The Div element that has the id=mydiv: o All elements with class my1class or my2class. o All elements with class my1class and my2class. o All elements with class my2class that are inside elements with class my1class. <div id= mydiv ></div> <div id= mydiv2 ></div> <p class= my1class ></p> <div class= my2class ></div> <p class= my1class my2class ></p> <div class= my2class ></div> <div class= my1class > <p class= my2class ></p> </div>
CSS Syntax Selectors To specify styles for different states of an element, add standard states after the selector: a:link { color : blue o Style of links before being visited. This is my link a:hover { color : red a:visited { color : green o Style of links when mouse is hold over. o Style of links when visited. This is my link This is my link
CSS Color The color value for different CSS properties (e.g. text color) can be specified using: o English name o RGB numbers o HEX numbers div { background-color : Yellow; div { background-color : rgb(255, 255, 0); div { background-color : #FFFF00; To correctly find the desired color codes in HEX or RGB, use color charts: www.w3schools.com/tags/ref_colorpicker.asp
CSS Text o Text color: o Text alignment: o Text decoration: color : black / rgb(0,0,0) / #000000; text-align : center / right / justify; text-decoration : overline / line-through / underline; o Text transformation: text-transform : uppercase / lowercase / capitalize; o Font family: o Font size: o Font style: o Unordered list: font-family : "Times New Roman"; font-size : 12px / 12pt / 1.5em; font-style : normal / italic; list-style-type : circle / square;
Element Box An HTML element box around it is separated into three different areas: Margin: An area outside HTML element after the element border. An HTML Element e.g. <p> Border: The border around an HTML element. Padding: An area inside HTML element between the content (e.g. text) and the element border.
Element Box Border o Border color: o Border width: border-color : black / rgb(0,0,0) / #000000; border-width : 2px; o Border style: border-style : none / dotted / hidden / outset / inset / ridge / groove / double / solid / dashed; none is no border and hidden is hidden border. o Apply separately: o Apply all together: border-top-style : dotted; border-right-width : 5px; border : 2px solid black; To find the effect of these values: http://www.w3schools.com/cssref/pr_border-style.asp
Element Box Padding and Margin o Padding: o Padding all together: padding-left : 3px; padding-right : 3px; padding-top : 3px; padding-bottom : 3px; padding : 3px 2px 3px 2px; (top) (right) (bottom) (left) padding : 3px 2px; (top and bottom) (right and left) o Margin style is similar to padding. But they produce different results: padding-left : 5px; padding-top : 5px; margin-right : 10px; border: 2px solid yellow; 5px Text inside element 10px Another element
CSS Example Styling Tables table { table, td, th { border-collapse: collapse; font: 1.2em "Arial"; width: 100%; border: 2px solid black; padding-bottom: 3px; padding-top: 3px; td { padding-left: 7px; td.center { td.itl { padding-left: 0px; text-align: center; font-style: italic; th { background-color: #5C5B58; color: white; th.lowwidth { width: 35%; th.xlowwidth { width: 10%; tr.alt { tr.highlight { background-color: #FBF2D9; background-color: rgb(255, 153, 153);
CSS Example Styling Tables <table> <tr> <th class="xlowwidth">id</th> <th class="lowwidth">firstname</th> <th>lastname</th> </tr> <tr> <td class="center itl">1</td> <td>peter</td> <td>girard</td> </tr> <tr class="alt"> <td class="center itl">2</td> <td>lois</td> <td>bergeron</td> </tr> <tr> <td class="center itl">3</td> <td>john</td> <td>roy</td> </tr> <tr class="alt"> <td class="center itl">4</td> <td>mike</td> <td>williams</td> </tr> <tr class="highlight"> <td class="center itl">count</td> <td colspan="2" >4</td> </tr> </table>