6_CasCadingStylesSheetsCSS.ppt

CASCADING STYLE SHEETS -CSS
HTML

CASCADING STYLE SHEETS
• Used for adding formatting to web documents.
• Provides number of attributes to create dynamic effects
in web page.
• Using style sheets text and image formatting properties
can be predefined in a single list.
• It allows to make global changes to all documents from
a single location.
• Style sheets are said to cascade when they combine to
specify the appearance of a page.

DEFINING A STYLE
• To define a style we use
<Style Type=“text/css”>
tag
{
attribute: value;
attribute: value
}
</Style>

There are three ways of inserting a style sheet:
1. External style sheet
2. Internal style sheet
3. Inline style
• With an external style sheet, you can change the look of an entire website by
changing just one file!
• Each page must include a reference to the external style sheet file inside the
<link> element.
• The <link> element goes inside the head section:
External style sheet

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
body
{
background-color: lightblue;
}
h1
{
color: navy;
margin-left: 20px;
}
mystyle.css

<html>
<head>
<title>using external style sheet</title>
<link rel="stylesheet" href="71_css_xtstylesheet.css" type="text/css">
</head>
<body>
<h1>heading section in the stylesheet called</h1>
<p>paragraph has been changed in style sheet</p>
</body>
</html>
body
{
font:10pt;
font-family:Serif;
color:blue;
background:pink
}
h1
{
font:24pt;
color:red
}
p
{
margin-left:50px;
margin-right:50px;
}
71_css_xtstylesheet.css

Internal Style Sheet
• An internal style sheet may be used if one single page has a unique style.
• Internal styles are defined within the <style> element, inside the head section of
an HTML page:
<html>
<head>
<style>
body
{
background-color: linen;
}
h1
{
color: maroon;
margin-left: 60px;
}
</style>
</head>
<body>
<h1> Hi </h1>
</body>
</html>

Inline Styles
• An inline style may be used to apply a unique style for a single element.
• An inline style loses many of the advantages of a style sheet (by mixing content
with presentation). Use this method sparingly!
• To use inline styles, add the style attribute to the relevant tag. The style attribute
can contain any CSS property.
• The example shows how to change the color and the left margin of a <h1>
element:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

<html>
<head>
<title>using inline styles in html pages</title>
<style>
h2
{
font-size: 40pt;
font-family: "arial";
color:red;
}
</style>
</head>
<body style="background-color:yellow">
<h1 style="font-size: 25pt;font-family: arial;
color: blue">inline use of style over h1 tag in blue colour</h1>
<h1 style="font-size: 40pt;font-family: arial;
color: green">inline use of style over h1 tag in green colour</h1>
<h2>using internal style</h2>
<p>with out style
</body>
</html>

FONT ATTRIBUTES
• Font-family = specifies font family name like
sans, serif, times new roman etc.
• Font-style = normal, italic or oblique
• Font-weight = normal, bold, bolder, lighter or
100,200,300 …. 900
• Font-size = in pt

COLOR AND BACKGROUND ATTRIBUTES
• Color = sets elements text color.
A color name and color code
• Background-color = color in elements background.
A color name or color code.
• Background-image = sets the background image.
A url or none
• Background-repeat = repeat-x, repeat-y, repeat, no-repeat
• Background-attachment: property sets whether a
background image is fixed or scrolls with the contents of
the page.

• Background-Position:
The background-position property sets the starting
position of a background image.
(left top, left center, left bottom, right top, right
center, right bottom, center top, center, center
bottom).
• Background-size:
Specifies the size of the background images
(100%,100%) Stretch the background image to
completely cover the content area,(25%) Stretch the
background image so that exactly four copies fit
horizontally, (50px,50px) specifies the size of
background image

TEXT ATTRIBUTES
• Text-decoration = adds decoration to an element like
none, underline, overline, line-through, blink
• Vertical- align= baseline, sub, super, top, text-top,
middle, bottom, text-bottom
• Text-transform = applies transformation to the text.
Capitalize, uppercase, lowercase
• Text-align = left, right, center or justify aligns text within
an element.
• Word-spacing: property specifies the amount of space
between words. Eg: BODY {word-spacing: 10pt}
• letter-spacing: property specifies the amount of space
between letters. Eg: .wide {letter-spacing: 10cm}

BORDER ATTRIBUTES
• Border-style = solid, double, groove, ridge, inset, outset
• Border-color = color name or color code
• border-width = thin, medium, thick or length
• Border-top-width = thin, medium, thick or length
• Border-bottom-width = thin, medium, thick or length
• Border-left-width = thin, medium, thick or length
• Border-right-width = thin, medium, thick or length
• Border-top = specifies width, color and style
• Border-bottom = specifies width, color and style
• Border-left= specifies width, color and style
• Border-right=specifies width, color and style
• Border = sets all the properties at once

MARGIN ATTRIBUTES
• Margin-top = percent, length or auto
• Margin-bottom = percent, length or auto
• Margin-left = percent, length or auto
• Margin-right = percent, length or auto
• Margin = percent, length or auto

LIST ATTRIBUTE
• List-style-type =
disc,
circle,
square,
decimal,
lower-roman,
upper-roman,
lower-alpha,
upper-alpha,
none

CLASSES and ID’S
• Can be used some times in place of inline style.
• Allows to use two different style sheets for the same
tag/attribute without using inline styles.
• ID’s are used as selectors for the style rules, making it possible to
effect a particular element without creating inline style for it.
• ID’s are unique . They are identified by symbol “#”.
• Can be applied to some occurrence of an element but not the
others.
• This can be done by classes, it not need to be unique.
• Many elements can be members of the same class. It is identified
by the symbol “.”

USING DIV TAG
• A web page can be divided into segments or divisions.
• It can be achieved using <div>……</div> tags.
• The HTML <div> tag is used for defining a section of your
document.
• With the div tag, you can group large sections of HTML
elements together and format them with CSS.
• Its attribute is
– Align = Defines alignment of the content enclosed in div tag.
(left, right, center and justify)

• <div style="color:#00FF00“>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
• <body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a href="http://www.google.com">Google</a> </div>
</body>
• <div id="menu" align="right" >
<a href="">HOME</a>
<a href="">CONTACT</a>
<a href="">ABOUT</a>
</div>
• <div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>This paragraph would be your content paragraph with all of
your readable material.</p>
</div>

USING SPAN TAG
• Used to provide the style information to few words or
even few letters.
• It can be achieved by using <span>…… </span>tags.
• Like
<span style="color : #f00;">2ndWord</span>
• <p>My text book color : <span class="blue">light
blue</span> eyes.</p>
• <span style="background-color: #FFFF00">You can
highlight your text any color you like</span>

<html>
<head>
</head>
<body>
<p>My text book color : <span
class="blue">light blue</span> with flower
images.</p>
<span style="background-color: #FFFF00">You
can highlight your text any color you
like</span>
</body>
</html>

<html>
<head>
</head>
<body>
<p>My text book color : <span class="blue">light blue</span> with flower images.</p>
<span style="background-color: #FFFF00">You can highlight your text any color you like</span>
<br>
<STYLE TYPE="text/css">
.newtext
{
font-size: 18pt;
color: #ff0000;
font-family: arial
}
#newtext2
{
font-size: 20pt;
color: #ff00ff;
font-family: courier
}
</STYLE>
<SPAN CLASS="newtext">Here's What You Get</SPAN>
<SPAN ID="newtext2">Here's What You Get</SPAN>
</body>
</html>

h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}
h1, h2, p
{
text-align: center;
color: red;
}
Grouping Selectors

Multiple Style Sheets
• If some properties have been defined for the same selector in different style sheets,
the value will be inherited from the more specific style sheet.
• For example, assume that an external style sheet has the following properties for
the <h1> element:
• then, assume that an internal style sheet also has the following property for the
<h1> element:
• If the page with the internal style sheet also links to the external style sheet the
properties for the <h1> element will be:
• The left margin is inherited from the external style sheet and the color is replaced by
the internal style sheet.
color: orange;
margin-left: 20px;
h1
{
color: orange;
}
h1
{
color: navy;
margin-left: 20px;
}

<html>
<head>
<title> Embedding a style sheet</title>
<style>
body
{
background: yellow;
margin-left: 1 in;
margin-right: 1.5 in;
color: green
}
h1
{
font-size: 40pt;
font-family: san-serif;
color:red;
text-align: center;
text-transform:lowercase
}
p
{
font-size: 12pt;
font-family: serif;
color: blue
}
</style>
</head>
<body>
<h2>this tag is reflecting only other effects over the page</h2>
this is the simple text in the page
<h1>THIS TAG implements the embeded effect of h1 headig tag</h1><br>
<p>this tag implements the embeded effect of paragraph tag.<br>
</body>
</html>
Embedding a style sheet

Id - css
<html>
<head>
<title>Using ID in html document</title>
<style type="text/css">
#firstparagraph
{
background: yellow
}
#secondparagraph
{
background: red
}
</style>
</head>
<body>
<p>paragraph without using any ID</p>
<h1>Hello</h1>
<h1 id="firstparagraph">Hw r u?</h1>
<p id="firstparagraph">This is implementation of first paragraph ID</p>
<p id="secondparagraph">This is implementation of second paragraph ID</p>
</body>
</html>

<html>
<head>
<title>using ids in html document</title>
<style ="text/css">
p#exampleID1
{
background-color: yellow
}
p#exampleID2
{
text-transform: uppercase
}
</style>
</head>
<body>
<p id="exampleID1">This paragraph has an ID name of
"exampleID1" and has a white CSS defined background
<p id="exampleID2">This paragraph has an ID name of
"exampleID2" and has had its text transformed to uppercase letters.
</body>
</html>
Id - css

<html>
<head>
<title>Using class in html document</title>
<style>
.firstparagraph
{
background: green
}
.secondparagraph
{
background: red
}
</style>
</head>
<body>
<p>paragraph without using any ID
<p class="firstparagraph">This is implementation of first paragraph
class</p>
<p class="secondparagraph">This is implementation of second
paragraph class</p>
<h2 class="firstparagraph">This is the heading tag</h2>
</body>
</html>
CSS- Classes

<html>
<head>
<title>using ids in html document</title>
.exampleID3
{ background-color: red;
color: white
}
</style>
</head>
<body>
<p class='exampleID3'>These paragraphs all have the same styling applied to them and we
used classes because we wanted to reuse our styling!
</body>
</html>
CSS- Classes

<html>
<head>
<title>Using class in html document</title>
.firstparagraph
{
background: blue
}
.secondparagraph
{
background: red
}
</style>
</head>
<body>
<p class="firstparagraph">paragraph without using any ID
<p>This is implementation of first paragraph class</p>
<p class="secondparagraph">This is implementation of second
paragraph class</p>
<h1 class="firstparagraph">hello</h1>
<h2 class="secondparagraph">hellooooooo</h2>
</body>
</html>
CSS- Classes

<img src="/wp-content/uploads/flamingo.jpg" border="25">
.border
{
border-width: 25px;
border-color: red;
border-style: solid;
}
<img src=“1.jpg" class="border">
Borders

p.dotted
{
border-style: dotted;
}
p.dashed
{
border-style: dashed;
}
p.solid
{
border-style: solid;
}
p.double
{
border-style: double;
}
p.groove
{
border-style: groove;
}
p.ridge
{
border-style: ridge;
}
p.inset
{
border-style: inset;
}
p.outset
{
border-style: outset;
}
p.none
{
border-style: none;
}
p.hidden
{
border-style: hidden;
}
p.mix
{
border-style: dotted dashed solid double;
}

CSS Styling HTML Lists
In HTML, there are two types of lists:
1.Ordered Lists <ol>:Items marked with numbers or letters.
2.Unordered Lists <ul>: Items marked with bullets.
With CSS, you can use your own images as bullets in a list. The CSS list
properties allows you to:
• Set different list item markers for ordered lists.
• Set different list item markers for unordered lists.
• Set an image as the list item marker.

ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
The following keywords work with
the list-style-type property:
• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none - removes the bullets

<html>
<head>
<title> DrSantosh Web Page</title>
<style>
ul {
list-style-type: circle;
}
ol {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h1> List of Components </h1>
<UL>
<LI> Computer Devices …</LI>
<LI> Computers …</LI>
<OL>
<LI> DELL …</LI>
<LI> TOSHIBA …</LI>
<LI> LENOVA …</LI>
<LI> ACER …</LI>
<LI> MAC …</LI>
</OL>
<LI> Prices …</LI>
</UL>
</body>
</html>

ul{
list-style-position: inside;
}
Positioning the List Item Markers
• The list-style-position property lets you set the position of the list on webpage.
• It accepts two values, inside & outside.
• The default value is outside.
Image as the List Item Marker
ul{
list-style-image: url('images/bullet.png');
}
• it is possible to use an image as a bullet marker on your webpage. This
can be done by using the list-style-image property.
• It can either set it to none, or you can provide a url to some image.

<!DOCTYPE html>
<html>
<head>
<style>
ul#circle {
list-style-image: url('examples/css/resources/circle.png');
}
</style>
</head>
<body>
<p>Red Circle List Marker:</p>
<ul id="circle">
<li>Game of Thrones</li>
<li>Breaking Bad</li>
<li>Sherlock</li>
</ul>
</body>
</html>

Ecercise1
CSS: Creating Navigation Bars

<ul id="navbar">
<li><a href="/tests">Tests</a></li>
<li><a href="/studyroom">Q & A
Forum</a></li>
<li><a href="/flashcards">Interview
QnA</a></li>
<li><a href="/library">Tutorials</a></li>
<li><a
href="/testimonials">Testimonials</a></li>
</ul>
#navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #EEEEEE;
}
ul#navbar li a {
display: block;
color: #000000;
font-weight:bold;
padding: 8px 16px;
text-decoration: none;
}
ul#navbar li a:hover {
background-color: orange;
color: white;
}
ul {
margin: 0;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000000;
font-weight:bold;
padding: 8px 16px;
}
li a:hover {
color: white;
}
Option 1
Option 2
Option 3
Option 4
Option 5

<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
margin: 0;
padding: 0;
width: 200px;
}
ul#navbar li a {
display: block;
color: #000000;
font-weight:bold;
padding: 8px 16px;
}
color: white;
}
</style>
</head>
<body>
<h3>This is a Vertical Navigation Bar</h3>
<hr/>
<ul id="navbar">
<li><a href="/studyroom">Q & A Forum</a></li>
<li><a href="/flashcards">Interview QnA</a></li>
<li><a href="/testimonials">Testimonials</a></li>
</ul>
</body>
</html>
Ecercise1: Vertical Navigation Bar

Horizontal Navigation Bar
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
margin: 0;
padding: 0;
overflow: hidden;
}
ul#navbar li {
float:left;
}
ul#navbar li a {
display: block;
color: #000000;
font-weight:bold;
padding: 8px 16px;
}
color: white;
}
</style>
</head>
<body>
<h3>This is a Horizontal Navigation Bar</h3>
<hr/>
<ul id="navbar">
<li><a href="/studyroom">Q & A Forum</a></li>
<li><a href="/flashcards">Interview QnA</a></li>
<li><a href="/testimonials">Testimonials</a></li>
</ul>
</body>
</html>
Option 1 Option 2 Option 3 Option 4 Option 5

CSS Styling HTML Tables
<table class="styled-table">
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dom</td>
<td>6000</td>
</tr>
<tr class="active-row">
<td>Melissa</td>
<td>5150</td>
</tr>

</tbody>
</table>
•.styled-table so we don't tamper with every <table> on the site
•.active-row which will be the "active" row - this class is used to highlight a specific row

Styling the table
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
•box-shadow to add a subtle transparent shadow around the table
•border-collapse to ensure there is no space between the cell borders
Styling the header .styled-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}

Moving onto the table cells
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
the table rows
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
It want to do 3 things:
• Add a bottom border to each row for separation
• Add a lighter background to every second row to help readability
• Add a dark border to the very last row to signify the end of the table

make the active row look different
.styled-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}

<html>
<head>
<style>
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body{
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
background: rgba( 71, 147, 227, 1);
}
h2{
text-align: center;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
padding: 30px 0;
}
/* Table Styles */
.table-wrapper{
margin: 10px 70px 70px;
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}
.fl-table {
border-radius: 5px;
font-size: 12px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;
}
.fl-table td, .fl-table th {
text-align: center;
padding: 8px;
}
.fl-table td {
border-right: 1px solid #f8f8f8;
font-size: 12px;
}
.fl-table thead th {
color: #ffffff;
background: #4FC3A1;
}
.fl-table thead th:nth-child(odd) {
color: #ffffff;
background: #324960;
}
.fl-table tr:nth-child(even) {
background: #F8F8F8;
}

/* Table Data Responsive */
@media (max-width: 767px) {
.fl-table {
display: block;
width: 100%;
}
.table-wrapper:before{
content: "Scroll horizontally >";
display: block;
text-align: right;
font-size: 11px;
color: white;
padding: 0 0 10px;
}
.fl-table thead, .fl-table tbody, .fl-table thead th {
display: block;
}
.fl-table thead th:last-child{
border-bottom: none;
}
.fl-table thead {
float: left;
}
.fl-table tbody {
width: auto;
position: relative;
overflow-x: auto;
}
.fl-table td, .fl-table th {
padding: 20px .625em .625em .625em;
height: 60px;
vertical-align: middle;
overflow-x: hidden;
overflow-y: auto;
width: 120px;
font-size: 13px;
text-overflow: ellipsis;
}
.fl-table thead th {
text-align: left;
border-bottom: 1px solid #f7f7f9;
}
.fl-table tbody tr {
display: table-cell;
}
.fl-table tbody tr:nth-child(odd) {
background: none;
}
.fl-table tr:nth-child(even) {
background: transparent;
}
.fl-table tr td:nth-child(odd) {
background: #F8F8F8;
border-right: 1px solid #E6E4E4;
}
.fl-table tr td:nth-child(even) {
border-right: 1px solid #E6E4E4;
}
.fl-table tbody td {
display: block;
text-align: center;
}
}
</style>
</head>

<body>
<h2>Student Database - Student details Table</h2>
<div class="table-wrapper">
<table class="fl-table">
<thead>
<tr>
<th>Student-Id</th>
<th>Student-Name</th>
<th>Program</th>
<th>Phone-No</th>
<th>Eamil-Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>Vikram</td>
<td>BCA</td>
<td>9898989898</td>
<td>vikram@gmail.com</td>
</tr>
<tr>
<td>102</td>
<td>Basker</td>
<td>MCA</td>
<td>7878989898</td>
<td>ba@gmail.com</td>
</tr>
<tr>
<td>103</td>
<td>Varun</td>
<td>BCA</td>
<td>9878989898</td>
<td>varun@gmail.com</td>
</tr>
<tr>
<td>104</td>
<td>Chanakya</td>
<td>B.Tech CSE</td>
<td>999989898</td>
<td>ch@gmail.com</td>
</tr>
<tr>
<td>105</td>
<td>Basker</td>
<td>BCA</td>
<td>564568989898</td>
<td>sk@gmail.com</td>
</tr>
<tr>
<td>106</td>
<td>Jyothi</td>
<td>MCA</td>
<td>5878989898</td>
<td>jyo@gmail.com</td>
</tr>
<tr>
<td>107</td>
<td>Chanu</td>
<td>B.Tech CSE</td>
<td>999989898</td>
<td>ch@gmail.com</td>
</tr>
<tr>
<td>108</td>
<td>Kumar</td>
<td>B.Tech CSE</td>
<td>999989898</td>
<td>ku@gmail.com</td>
</tr>
<tbody>
</table>
</div>
</body>

Table with frozen table header and left column
Exercise 3

<html>
<head>
<style>
/* default styling. Nothing to do with freexing
first row and column */
main {display: flex;}
main > * {border: 1px solid;}
table {border-collapse: collapse; font-family:
helvetica}
td, th {border: 1px solid;
padding: 10px;
min-width: 200px;
background: white;
text-align: left;
}
.table-container {
position: relative;
max-height: 300px;
width: 500px;
overflow: scroll;
}
thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
background: hsl(20, 50%, 70%);
}
thead th:first-child {
left: 0;
z-index: 3;
}
tfoot {
bottom: 0;
z-index: 2;
}
tfoot td {
position: sticky;
bottom: 0;
z-index: 2;
}

tfoot td:first-child {
z-index: 3;
}
tbody {
overflow: scroll;
height: 200px;
}
/* MAKE LEFT COLUMN FIXEZ */
tr > :first-child {
position: sticky;
left: 0;
}
/* don't do this */
tr > :first-child {
box-shadow: inset 0px 1px black;
}

</style>
</head>
<body>
<h2>Student Database - Student details Table</h2>
<div class="table-container">
<!--
<table class="fixed-table">
<thead>
<tr><th>Fixed Header</th></tr>
</thead>
<tbody>
<tr><td>Fixed Column</td></tr>
</tbody>
<tfoot>
<tr><td>Fixed Footer</td></tr>
</tfoot>
</table>

<div class="table-horizontal-container">
<table class="unfixed-table">
<thead>
<tr><th>Day /
Time</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Satuday
</th><th>Sunday-Holiday</th></tr>
</thead>
<tbody>
<tr><th>8AM-9AM</th><td>S:P0897/G:0C:PHD001 /R:LPU-LiveFor Guidance</td><td>S:P0897/G:0C:PHD001
/R:LPU-LiveFor Guidance</td><td></td><td>S:DE723/G:0C:CAP774 /R:38-403For Lecture</td><td></td><td>Column
seven</td><td>Column eight</td></tr>
<tr><th>9AM-10AM</th><td></td><td>S:DE723/G:0C:CAP774 /R:38-403For
Lecture</td><td></td><td>S:DE723/G:0C:CAP774 /R:38-403</td><td></td><td></td><td></td></tr>
<tr><td>10AM-11AM</td><td>S:DE704/G:1C:CAP777 /R: 38-710For Lecture</td><td>S:DE723/G:0C:CAP774
/R:38-403</td><td></td><td>S:DE723/G:0C:CAP774 /R:38-403For Lecture</td><td></td><td></td><td></td></tr>
<tr><td>11AM-12AM</td><td>S:P0897/G:0C:PHD001 /R:LPU-LiveFor
Guidance</td><td></td><td></td><td></td><td>S:DE723/G:0C:CAP774 /R:38-403</td><td>S:DE723/G:0C:CAP774
/R:38-403</td><td></td></tr>
<tr><td>12PM-1PM</td><td>S:DE723/G:0C:CAP774 /R:38-403For Lecture</td><td>S:DE723/G:0C:CAP774 /R:38-
403</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>1PM-2PM</td><td>S:DE723/G:0C:CAP774 /R:38-403For
Lecture</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>2PM-3PM</td><td></td><td>S:DE723/G:0C:CAP774 /R:38-
403</td><td></td><td></td><td>S:DE723/G:0C:CAP774 /R:38-403</td><td></td><td></td></tr>
<tr><td>3PM-4PM</td><td></td><td>S:P0897/G:0C:PHD001 /R:LPU-LiveFor Guidance</td><td>Column
four</td><td>Column firve</td><td></td><td></td><td>Column eight</td></tr>

<tr><td>4PM-5PM</td><td></td><td>Column three</td><td>Column four</td><td>S:DE723/G:0C:CAP774
/R:38-403</td><td>Column six</td><td></td><td></td></tr>
<tr><td>5PM-6PM</td><td>S:P0897/G:0C:PHD001 /R:LPU-LiveFor Guidance</td><td>Column
three</td><td>Column four</td><td>Column firve</td><td>Column six</td><td></td><td></td></tr>
<tr><td>6PM-7PM</td><td>S:DE723/G:0C:CAP774 /R:38-403For
Lecture</td><td></td><td>S:DE723/G:0C:CAP774 /R:38-403</td><td>Column firve</td><td>Column
six</td><td></td><td></td></tr>
<tr><td>7PM-8PM</td><td></td><td>S:DE723/G:0C:CAP774 /R:38-403For Lecture</td><td>Column
four</td><td>S:DE723/G:0C:CAP774 /R:38-403For Lecture</td><td>Column six</td><td></td><td></td></tr>
<tr><td>8PM-9PM</td><td>S:DE723/G:0C:CAP774 /R:38-403For Lecture</td><td>Column
three</td><td>S:DE723/G:0C:CAP774 /R:38-403</td><td>S:DE723/G:0C:CAP774 /R:38-403For
Lecture</td><td></td><td></td><td>t</td></tr>
<tr><td>9PM-10PM</td><td></td><td>S:DE723/G:0C:CAP774 /R:38-403For
Lecture</td><td>S:DE723/G:0C:CAP774 /R:38-403</td><td></td><td></td><td></td><td></td></tr>
<tr><td>10PM-11PM</td><td>S:DE723/G:0C:CAP774 /R:38-403For Lecture</td><td>S:DE723/G:0C:CAP774
/R:38-403For Lecture</td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
<tfoot>
<tr><td>Footer</td><td>Footer</td><td>Footer</td><td>Footer</td><td>Footer</td><td>Footer</td><th>Foo
ter</th><th>Footer</th></tr>
</tfoot>
</table>
</div>
</div>
</object>
</article>
</body>
</html>

Table – Sorting based on column
Exercise 3

<p>Sort Table Rows by Clicking on the Table Headers - Ascending and Descending (jQuery)</p>
<div class="container">
<div class="table">
<div class="table-header">
<div class="header__item"><a id="name" class="filter__link" href="#">Name</a></div>
<div class="header__item"><a id="wins" class="filter__link filter__link--number"
href="#">Wins</a></div>
<div class="header__item"><a id="draws" class="filter__link filter__link--number"
href="#">Draws</a></div>
<div class="header__item"><a id="losses" class="filter__link filter__link--number"
href="#">Losses</a></div>
<div class="header__item"><a id="total" class="filter__link filter__link--number"
href="#">Total</a></div>
</div>
<div class="table-content">
<div class="table-row">
<div class="table-data">Tom</div>
<div class="table-data">2</div>
</div>
<div class="table-data">Dick</div>
</div>
<div class="table-data">Harry</div>
</div>
</div>
</div>
</div>
HTML

CSS
(SCSS)
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
$base-spacing-unit: 24px;
$half-spacing-unit: $base-spacing-unit / 2;
$color-alpha: #1772FF;
$color-form-highlight: #EEEEEE;
*, *:before, *:after {
box-sizing:border-box;
}
body {
padding:$base-spacing-unit;
font-family:'Source Sans Pro', sans-serif;
margin:0;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
}
.container {
max-width: 1000px;
margin-right:auto;
margin-left:auto;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
.table {
width:100%;
border:1px solid $color-form-highlight;
}
.table-header {
display:flex;
width:100%;
background:#000;
padding:($half-spacing-unit * 1.5) 0;
}

.table-row {
display:flex;
width:100%;
padding:($half-spacing-unit * 1.5) 0;
&:nth-of-type(odd) {
background:$color-form-highlight;
}
}
.table-data, .header__item {
flex: 1 1 20%;
text-align:center;
}
.header__item {
text-transform:uppercase;
}
.filter__link {
color:white;
position:relative;
display:inline-block;
padding-left:$base-spacing-unit;
padding-right:$base-spacing-unit;
&::after {
content:'';
position:absolute;
right:-($half-spacing-unit * 1.5);
color:white;
font-size:$half-spacing-unit;
top: 50%;
transform: translateY(-50%);
}
&.desc::after {
content: '(desc)';
}
&.asc::after {
content: '(asc)';
}
}
CSS
(SCSS)

JQuery
var properties = [
'name',
'wins',
'draws',
'losses',
'total',
];
$.each( properties, function( i, val ) {
var orderClass = '';
$("#" + val).click(function(e){
e.preventDefault();
$('.filter__link.filter__link--active').not(this).removeClass('filter__link--active');
$(this).toggleClass('filter__link--active');
$('.filter__link').removeClass('asc desc');
if(orderClass == 'desc' || orderClass == '') {
$(this).addClass('asc');
orderClass = 'asc';
} else {
$(this).addClass('desc');
orderClass = 'desc';
}

6_CasCadingStylesSheetsCSS.ppt

Recommended

Recommended

More Related Content

Similar to 6_CasCadingStylesSheetsCSS.ppt

Similar to 6_CasCadingStylesSheetsCSS.ppt (20)

Recently uploaded

Recently uploaded (20)

6_CasCadingStylesSheetsCSS.ppt