Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015

Size: px

Start display at page:

Download "Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015"

Virginia Carpenter
6 years ago
Views:

1 Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS 8 Oct 2015

2 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

3 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

4 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.

5 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>

6 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

7 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>

8 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>

9 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

10 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:

11 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;

12 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.

13 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:

14 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

15 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>

16 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>

CSS Cascading Style Sheets

CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with