tutorial 8 : css - web.cs.dal.caniri/hinf6220/tutorial8.pdfcss selectors identify which page...
TRANSCRIPT
Networks and Web for Health Informatics
(HINF 6220)
Tutorial 8 : CSS8 Oct 2015
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
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
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>
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>
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
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>
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>
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
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;
}
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;
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.
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
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
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);
}
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>