tutorial 8 : css - web.cs.dal.caniri/hinf6220/tutorial8.pdfcss selectors identify which page...

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

Upload: nguyenngoc

Post on 16-Mar-2018

214 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

Networks and Web for Health Informatics

(HINF 6220)

Tutorial 8 : CSS8 Oct 2015

Page 2: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

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:

What is CSS?

This is my text.

Property Value

background-color blue

font-size 12px

Page 3: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

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; … }

CSS Syntax

This is my text.

Property Value

background-color blue

font-size 12px

Element identifier(selector)

1st Property - Value 2nd Property - Value

Page 4: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

CSS rules can be added to the HTML document in three ways:

Inline with other HTML code.

In this case, the syntax is slightly different: use the tag attribute style.

Downside: The HTML file have to be edited for each format change;

Much repetition and complexity in CSS rules.

CSS Syntax

1

<div style = “ background-color : blue; font-size : 12px; …” >

</div>

Page 5: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

CSS rules can be added to the HTML document in three ways:

Internal Style Sheet.

CSS rules are placed in the <style> tag inside the <head> section.

CSS Syntax

2

<head>

<style>

div { background-color : blue; font-size : 12px; … }

</style>

</head>

Page 6: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

CSS rules can be added to the HTML document in three ways:

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.

CSS Syntax

3

<head>

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>

</head>

This standard part never changes Change this to

your file name

div { background-color : blue; font-size : 12px; … }

mystyle.css

Page 7: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

CSS Selectors identify which page elements the set of CSS rules apply to.

CSS Syntax | Selectors

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>

Page 8: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

CSS selectors can be combined in certain ways:

CSS Syntax | Selectors

div#myDiv { color : blue }o The Div element that has

the id=myDiv:

.my1class, .my2class { color : blue }

.my1class.my2class { color : blue }

.my1class .my2class { color : blue }

<div id=“myDiv” ></div>

<div id= “myDiv2” ></div>

o All elements with class

my1class or my2class.<p class=“my1class” ></p>

<div class=“my2class” ></div>

o All elements with class

my1class and my2class.<p class=“my1class my2class”></p>

<div class=“my2class” ></div>

o All elements with class

my2class that are inside

elements with class

my1class.

<div class=“my1class” >

<p class=“my2class”></p>

</div>

Page 9: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

To specify styles for different states of an element, add standard states after the selector:

CSS Syntax | Selectors

a:link { color : blue }o Style of links before being

visited.

a:hover { color : red }

a:visited { color : green }

This is my link

o Style of links when

mouse is hold over.This is my link

o Style of links when

visited.This is my link

Page 10: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

The color value for different CSS properties (e.g. text color) can be specified using:

To correctly find the desired color codes in HEX or RGB, use color charts:

www.w3schools.com/tags/ref_colorpicker.asp

CSS Color

o English name

div {

background-color :

Yellow;

}

o RGB numbers

div {

background-color :

rgb(255, 255, 0);

}

o HEX numbers

div {

background-color :

#FFFF00;

}

Page 11: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

o Text color:

o Text alignment:

o Text decoration:

o Text transformation:

o Font family:

o Font size:

o Font style:

o Unordered list:

CSS Textcolor : black / rgb(0,0,0) / #000000;

text-align : center / right / justify;

text-decoration : overline / line-through / underline;

text-transform : uppercase / lowercase / capitalize;

font-family : "Times New Roman";

font-size : 12px / 12pt / 1.5em;

font-style : normal / italic;

list-style-type : circle / square;

Page 12: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

An HTML element box around it is separated into three different areas:

Element Box

An HTML Element

e.g. <p>

Padding:

An area inside HTML element between the

content (e.g. text) and the element border.

Border:The border around an HTML element.

Margin:

An area outside HTML element after the

element border.

Page 13: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

Element Box | Border

o Border color:

o Border width:

o Border style:

none is no border

and hidden is hidden border.

o Apply separately:

o Apply all together:

border-color : black / rgb(0,0,0) / #000000;

border-width : 2px;

border-style : none / dotted / hidden / outset / inset / ridge /

groove / double / solid / dashed;

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

Page 14: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

Element Box | Padding and Margin

o Padding:

o Padding all together:

o Margin style is

similar to padding.

But they produce

different results:

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)

padding-left : 5px;

padding-top : 5px;

margin-right : 10px;

border: 2px solid yellow;

Text inside element

Another

element

5px

10px

Page 15: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

CSS Example | Styling Tables

table

{

border-collapse: collapse;

font: 1.2em "Arial";

width: 100%;

}

table, td, th

{

border: 2px solid black;

padding-bottom: 3px;

padding-top: 3px;

}

th

{

background-color: #5C5B58;

color: white;

}

th.lowwidth { width: 35%; }

th.xlowwidth { width: 10%; }

td { padding-left: 7px; }

td.center

{

padding-left: 0px;

text-align: center;

}

td.itl

{

font-style: italic;

}

tr.alt

{

background-color: #FBF2D9;

}

tr.highlight

{

background-color: rgb(255, 153, 153);

}

Page 16: Tutorial 8 : CSS - web.cs.dal.caniri/HINF6220/Tutorial8.pdfCSS Selectors identify which page elements the set of CSS rules apply to. CSS Syntax | Selectors Select by element Select

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>