Name of the School: School of Computer Science and
Engineering
Course Code: E2UC304C Course Name:Java & Java Script
DEPARTMENT OF COMPUTER SCIENCE
& ENGINEERING
Subject Name: Java Programming
Day: 25
Topics Covered: Introduction to Java Script,
Pop up boxes
1
Faculty Name: Programe Name: B.Tech (CSE,AI &ML)
Prerequisites, Objectives and Outcomes
Prerequisite of topic: Basic concepts related to java programming
Objective: To make students apply CSS in developing web pages.
Outcome : 1. Student will be able to know about the ways to add CSS
2. Students will be able to use CSS properties to enhance the quality of
HTML elements.
3. Students will be able to implement in practical applications.
2
The Power of CSS
HTML is structure / CSS is style
Use CSS to separate content from presentation
In the good ole days we would have done the following:
<h1>
<font color=“#3366ff” face=“Helvetica”>
Welcome to CSS
</font>
</h1>
3
What is CSS?
Allow users to apply typographic and design styles for
elements on a page
Done by using established HTML elements and
specifying a rule for how that element should be
displayed
Creates rules that specify how the content of an element
should appear
Once you have learned how to write a CSS rule, learning
CSS mostly involves learning the different properties you
can use
4
Advantages
Greater page layout and style controls
Size, color, line spacing, placement, margins, etc.
Separates style from structure in the HTML document
Easier site maintenance
Make style changes to many pages (entire site) at
once
5
Disadvantages
CSS not uniformly implemented in browsers.
Older browsers don't support. Newer browsers have
variances in display.
Different versions of CSS are implemented (CSS2 vs CSS3)
HTML5 became standard on October 28, 2014 (hence all the
reworking of lecture notes)
CSS3 still doesn’t have an ‘official’ date to be standard, but
most modern browsers are actually ‘ahead of the standards’
6
Ways to Define Styles
One or more rules
contained in an external style sheet (linked)
contained in an internal style sheet (embedded)
applied directly to a tag (inline)
7
Ways to Define Styles
Examples
Style sheet rule syntax
selector {
Property/value pairs property:
separated by value;
}
semicolon
h1 {
color: red;
}
8
External Style Sheets
One way we can implement CSS is through external (linked)
style sheets
With external style sheets we create a second document and
name it with a .css extension
This second file contains only the css expressions
Preferred method for employing CSS
External stylesheets allow for modifying style across multiple
HTML documents from a single location
9
External Style Sheets
Within every page that needs to use the external style
sheet, we add the following tag to the head section of
the document:
<link rel=“stylesheet” href=“stylesheetname.css”>
The advantage to external style sheets is that we can
create one (or several) css file(s) and our entire website
use it/them
10
External Style Sheet (style.css)
h1{ a{
color: red; text-decoration: none;
font-size: 36px; text-align: center;
} color: #AA00AA;
p{ font-size: 16px;
color: green;
font-weight: bold;
line-height: 1.5em;
font-family:
width: 50px;
arial;
}
}
11
External Style Sheet (index.htm)
<!DOCTYPE html>
<html lang=“en”>
<head>
<link rel=“stylesheet” href=“style.css”>
<title>Basic web page</title>
<meta charset=“utf-8”>
</head>
<body>
<h1>This would display bold, red, and font 36px</h1>
<p>This would display green and font family Arial</p>
</body>
</html>
12
Embedded Style Sheets
Embedded style sheets are defined in the head section of
the document.
<style>…</style>
Embedded style sheets are used to apply style to a single
web page
13
Embedded Style Sheets
<head>
<style>
h1{ color: red; font-size: 36px; }
p{color: green; font-family:arial;}
</style>
<title>Basic web page</title>
<meta charset=“UTF-8”>
</head>
14
Embedded Style Sheets
<head>
<title>Basic web page</title>
<meta charset=“UTF-8”>
<style>
h1{ color: red; font-size: 36px; }
p{color: green; font-family:arial;}
</style>
</head>
<body>
<h1>This would display bold, red, and font 36px</h1>
<p>This would display green and font family Arial</p>
</body>
15
Inline Style
Option three is declaring CSS inline
Inline allows us to add CSS to one specific tag within a
document.
<tag style=“property:value;
property:value”>…</tag>
<h1 style=“color:red; font-size:26px;”>Hello</h1>
<p style=“color:green;”>hello</p>
16
Order of Operation
So what happens if more than one style is applied to a tag?
The more specific rule is applied
So in order of highest priority to lowest priority, we
would have:
Inline style
Embedded style
Linked Style
Browser default
17
Order of Operation (example)
<head>
<title>Stylesheet Demo</title>
<style type="text/css">
h1 {color: green; font-size: 36px;}
em {color: blue;}
h2 {color: red; font-size: 36px;}
h2 {font-size: 24px;}
</style>
</head>
<body>
<h1><em>How does this line display and why?</em></h1>
<h2>How does this line display and why?</h2>
<h1 style=“color:red”>How does this line display and why?</h1>
</body>
How does this line display and why?
18
Order of Operation
So what happens if more than one style is applied to a tag
using different forms of CSS?
It is also important to note that the more recent the
definition the higher the priority (i.e., the rule that is closest
to the element in the HTML that it affects)
So let’s say in the below example, style.css has a rule that
changes all paragraphs to a background color of blue
19
Order of Operation
Paragraph
<head>
<link rel=“stylesheet” href=“style.css” />
<style>
p{background-color:green;}
</style>
</head>
________________________________________
<head> Paragraph
<style>
p{background-color:green;}
</style>
<link rel=“stylesheet” href=“style.css” />
</head>
20
Commenting
In CSS, we can apply comments to embedded and linked
CSS
To place a comment we use the syntax
/* COMMENT */
21
Commenting
For all .css files created, you must have the following
comment block:
/*
Name: Your Name
Course: CSCI 1710
Assignment: Lab x
Due Date: xx.xx.2017
Purpose: The purpose of this .css is to
style the page(s) in this lab
*/
22
CSS Text Properties
text-align: (left, right, center, justified) -- p{text-
align:center;}
text-indent: (pixels or percentage) -- p{text-indent: 5%;}
text-decoration: (none, overline, underline, line-through) --
p{text-decoration: underline;}
word-spacing: (pixels) -- p{word-spacing: 5px;}
letter-spacing: (pixels) -- p{letter-spacing: 5px;}
23
24
CSS Text Properties
line-height: (pixels, percentage, number) --
p{line-height: 2;} /* this is double space */
color: (name, hex, rgb, rgba) -- p{color: red;}
font-family: (specific,to,general) --
p{font-family:”Times New Roman”, Georgia, Serif;}
CSS Text Properties
font-size: (px, pt, em, or %) -- p{font-size: 10px;}
font-weight: (lighter, normal, bold, bolder, or value 100-900) --
p{font-weight:bold;}
font-style: (italic, oblique) -- p{font-style:italic;}
CSS Background
background-color: (name, hex, rgb, rgba) -- p{background-color:
green;}
background-image: url(imageLocation relative or abs)
background-repeat: (no-repeat, repeat-x, repeat-y, repeat)
background-size: (width and height in px or percent, or the word
cover)
28
CSS Background
Background-position: (left, right, center, top, bottom,
center)
Background-attachment: (fixed, scroll)
body{
background-image: url(bg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSS Colors
Colors
Option 1 - named colors
When working with colors, we have a few different options to
express the value of the color
One option is to use the named colors.
There are 17 standard colors
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, and yellow
There are 130 additional colors
BlanchedAlmond, ForestGreen, HoneyDew, WhiteSmoke,
RebeccaPurple
Colors
Option 2 is to signify the hexadecimal value that represents
the color.
The colors on the screen are comprised of some mixture
of Red, Green, and Blue (RGB)
Each color (R,G,B) can have a value from 0 (no color
applied) to 255 (full color intensity)
Colors
R G B
Red 255 0 0
Green 0 255 0
Blue 0 0 255
White 255 255 255
Black 0 0 0
Colors
Option 2 – hexadecimal
However, this gives us a decimal
version of the Reds, Greens, and Blues. We need to convert
decimal numbers (which are expressed currently in a base 10) to
hexadecimal numbers (which is expressed in a base 16).
Hexadecimal expresses single digits numbers 0-9, A, B, C, D, E, F.
These numbers would be equivalent to decimal numbers 0-15 (with
F being equal to 15)
To represent the values 0-255, two hexadecimal digits are needed
ColorsOption 2 – hexadecimal
To convert from decimal to hex, divide decimal
Scientific calculator
number by 16. Quotient (expressed in hex) is
left digit, remainder (expressed in hex) is right
Or, just use a
digit
17510 = 175/16 = 10 r 15 = AF16
21910 = 219/16 = 13 r 11 = DB16
To convert from hex to decimal, convert left digit
to decimal and multiply by 16, add to that the
right digit converted to decimal
BC16 = 11*16 +12 = 18810
AA16 = 10*16 + 10 = 17610
Colors
Option two – hexadecimal
Black #000000
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
BlanchedAlmond #FFEBCD
DeepSkyBlue #00BFFF
GreenYellow #ADFF2F
Colors
Option 3 would be to express the RGB values without using
hexadecimal values.
This would be accomplished by rgb(RED, GREEN, BLUE);
Example: color: rgb(255, 0, 0); /* This would be red */
Example: color: rgb(255, 255, 255); /* This would be
white */
Colors
Option 4 would be to express the RGBA values
Very similar to option three, however this allows us to
identify the opacity of the object by setting the Alpha
parameter. This ranges from 0.0 (fully transparent) to 1.0
(fully opaque)
This is supported in IE9+, Firefox 3+, Chrome, Safari,
Opera 10+
rgba(RED, GREEN, BLUE, ALPHA);
Example: color: rgba(255, 0, 0, 0.3); /* red with opacity */
Colors
So to change the font color of a paragraph to white we
could do the following:
p{ color: white; }
p{ color: #FFFFFF; }
p{ color: rgb(255,255,255); }
p{ color: rgba(255,255,255,1); }
References:
https://www.geeksforgeeks.org/
https://www.javatpoint.com/exception-handling-in-java
https://www.tutorialspoint.com/java/java_exceptions.htm
The complete reference, eleventh edition, available at:
https://gfgc.kar.nic.in/sirmv-science/GenericDocHandler/1
38-a2973dc6-c024-4d81-be6d-5c3344f232ce.pdf
40
Thank you
41
