1
Web Designing
CSS
BY:
Abid jameel
2
What is CSS ?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
CSS can control many elements of our web pages:
colors, fonts, alignment, borders, backgrounds,
spacing, margins, and much more.
An HTML file links to a CSS file , and when the web
browser displays the page, it references the CSS file(s)
to determine how to display the content.
3
Styles Solved a Big Problem!!
HTML was never planned to contain tags for formatting a
document.
HTML was planned to define the content of a document, like
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Development of large web sites, where fonts and color
information were added to every single page, became a long
and expensive process.
To solve this problem, the World Wide Web Consortium
(W3C) created CSS.
Styles are normally saved in external .css files. External
style sheets enable you to change the appearance and
layout of all the pages in a Web site, just by editing one
single file!
4
CSS Syntax
A CSS rule set consists of a selector and a
declaration block:
The selector points to the HTML element you want
to style.
The declaration block contains one or more
declarations separated by semicolons.
Each declaration includes a property name and a
value, separated by a colon.
5
First Style in CSS
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
6
CSS Comments
/* This is a single-line comment */
text-align: center;
/* This is
a multi-line
comment */
CSS Color
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
7
CSS Selectors
o The element Selector
p{
text-align: center;
color: red;
}
o The id Selector
#para1 {
text-align: center;
color: red;
}
o The class Selector
.center {
text-align: center;
color: red;
}
Classes limit to one type of Element
h1.classname
{
font-size:30px;
}
o Grouping Selectors
h1, h2, p {
text-align: center;
color: red;
}
8
What is the difference between ID and class?
IDs and classes function the same way – they
can both provide the same styling functionality
to an HTML element, however…
IDs are unique; each element can only have one
ID, and that ID can only be on the page once.
Classes are not unique; an element can have
multiple classes, and multiple elements can have
the same class.
9
Three Ways to Insert CSS
External style sheet
Make a file and rename it with .css and now link to html page by
adding the below code in head portion
<link rel="stylesheet" type="text/css" href="mystyle.css">
Internal Style Sheet
<style type=“text/css”>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}
</style>
Inline Styles
<p style="color:red;margin-left:20px;">paragraph.</p>
Priority
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
10
CSS Text
Text Color
color: blue;
Text Alignment
text-align: center;
Text Decoration
text-decoration: overline;
line-through, underline, none
Text Transformation
text-transform: uppercase;
Lowercase, capitalize
Text Indentation :The text-indent property specifies the
amount of indentation (empty space) should be left before
lines of text in a block
p { text-indent: 50px; }
11
CSS Text
letter-spacing:
letter-spacing: 2px;
line-height: The line-height property is used to specify the space
between lines
line-height: 90%;
text-shadow:
text-shadow: h-shadow v-shadow
blur color
text-shadow: 2px 2px 4px #ff0000;
word-spacing:
word-spacing: 30px;
12
CSS Font
Font Family
font-family: "Times New Roman";
Font Style
font-style: normal;
Font Size
font-size: 40px;
font-style
font-style: italic;
font-weight
font-weight: bold;
100-900
400 (normal) and 900 (bold)
13
CSS Links
Text Decoration
text-decoration: none;
Background Color
background-color: #B2FF99;
Practice
Change color, background, size, face on
hover
14
CSS Tables
The look of an HTML table can be greatly
improved with CSS:
Let’s dive into code to make great stylish
tables in css
Responsive tables in css
Just add the below code into before table tag.
<div style="overflow-x:auto;">
And write after the table tag </div>
15
16
Box Model
According to the box model concept, every
element on a page is a rectangular box and
may have width, height, padding, borders, and
margins.
The image below illustrates the box model:
17
Margin
div {
background-color: hotpink;
width: 300px;
height: 300px;
}
The margin properties set the size of the white
space outside the border.
margin-top, margin-right ,margin-bottom, margin-left.
You can use the margin:auto attribute to split the
width left and right automatically .
Margin-shorthand (set all margin in one line)
margin: 80px 150px 100px 80px;
top right bottom left
If the margin property has one value:
margin: 25px;
all four margins are 25px
18
Padding
Padding is used in CSS to add space around
content inside the div.
You can add padding to every side like:
padding-top , padding-right , padding-bottom, padding-
left.
Example:
p{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
All sides padding in one line/shorthand padding:
p{
padding: 50px 30px 50px 80px;
}
19
Border
border-style: div{
background-color:
Dotted Maroon;
width: 400px;
Dashed height: 400px;
Double border-style: dotted;
Solid Border-color: red;
Border-width:5px;
Groove
}
Ridge
Inset Border shorthand
Outset property
div{
border-color border: 5px solid
red;
Border-width }
border-radius Border-radius: 8px;
20
CSS Form
Styling Input Fields
width
input[type=text].
Padded Inputs
Use the padding property to add space inside the text
field.
Bordered Inputs
Use the border property to change the border size and
color, and use the border-radius property to add
rounded corners:
border: 2px solid red;
border-radius: 4px;
21
Form Attributes
border-bottom
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
Colored Inputs
Focused Inputs
input[type=text]:focus {
background-color: lightblue;
}
Input with icon/image
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
22
Animated Search Input
input[type=text] {
background-image: url('searchicon.png; ');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Web Designing
CSS3
24
Effects
linear-gradient
CSS3 gradients let you display smooth transitions between
two or more specified colors.
background: linear-gradient(to direction, start-color ,
last-color2)
Transparency
rgba(r,g,b,a) background: rgba(255,0,0,0.3)
Opacity
Linear Gradient - Transparency
background: linear-gradient(to right,
rgba(255,0,0,0.2), rgba(255,0,0,1));
25
Radial Gradient
A radial gradient is defined by its center.
To create a radial gradient you must also define at
least two color stops.
background:radial-gradient(red,pink, green);
By default, shape is ellipse, size is farthest-corner, and
position is center.
background: radial-gradient(red 5%, yellow 15%, green
60%);
Set Shape
The shape parameter defines the shape. It can take the
value circle or ellipse. The default value is ellipse.
background: radial-gradient(circle, red, yellow, green);
Box-shadow
box-shadow: 5px 5px 10px 2px black;
26
CSS Transforms
CSS3 transforms allow you to translate, rotate,
scale, and skew elements.
A transformation is an effect that lets an element
change shape, size and position.
CSS3 supports 2D and 3D transformations.
CSS3 2D Transforms
translate()
rotate()
scale()
skewX()
skewY()
matrix()
27
The translate() Method
.div1 img { X Y
transform: translate(200px,50px);
}
The rotate() method
div img{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /*
Safari,chrome */
transform: rotate(20deg);
}
The skewX() Method/ skewY Method()
transform: skewX(20deg);
The skew() Method
transform: skew(20deg, 10deg);
28
CSS Transitions
CSS3 transitions allows you to change
property values smoothly (from one value to
another), over a given duration.
.div1 img{
width:200px;
height: 200px;
transition: width 1s,height 1s;
}
.div1 img: hover{
width: 400px;
height: 400px;
29
Specify the curve speed of the transition
The transition-timing-function property specifies the speed
curve of the transition effect.
The transition-timing-function property can have the
following values:
ease - specifies a transition effect with a slow start, then
fast, then end slowly (this is default)
linear - specifies a transition effect with the same speed
from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start
and end.
#div1 {transition-timing-function: linear;}
30
Transition + Transformation
.Div img {
width: 100px;
height: 100px;
background: green;
transition: width 2s, height 2s, transform 2s;
}
.Div img:hover {
width: 400px;
height: 400px;
transform: rotate(180deg);
}
31
Vendor Prefixed
-moz-
Mozilla Firefox
-webkit-
Google Chrome, Apple Safari, Opera
-ms-
Microsoft Internet Explorer
32
Animations
To use CSS3 animation, you must first specify some
keyframes for the animation.
Keyframes hold what styles the element will have at
certain times.
Animation
Animation: keyframeName Time;
@keyframes Name {
from {properties}
to {Properties}
}
33
Animation Example
.effect1 img
{
animation:spinning 2s infinite;
border-radius:50%;
}
@keyframes spinning
{
from
{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
34
Animate.css (library)
Download this library from:
https://daneden.github.io/animate.css/
Place the below code in head tag.
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
Use the libray classes like
<div class=“test_div animated hinge">
<h2>Welcome to The Mentors Pakistan</h2>
</div>
35
36
Web Programming
JAVASCRIPT
BY:
Abid jameel
(M.S Computer Science)
Introduction
JavaScript is a high level programming language.
JavaScript is one of the three core technologies of World Wide Web content production and
the majority of websites employ it, and all modern Web browsers support it without the
need for plug-ins.
Programmers also use JavaScript in video-game development, mobile applications, and in
server-side network programming with run-time environments such as Node.js.
By definition, JavaScript is a client-side scripting language. This means the web browser
will be running the script. The opposite of client-side is server-side, which occurs in a
language like PHP. PHP scripts are run by the web hosting server.
JavaScript is not compiled but translated. The JavaScript Translator (embedded in
browser) is responsible to translate the JavaScript code.
It was invented by Brendan Eich, co-founder of the Mozilla project, the Mozilla
Foundation, and the Mozilla Corporation
Why Study JavaScript?
JavaScript is one of the 3 languages all web
developers must learn:
1. HTML to define the content of web
pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of
web pages
What JavaScript can do for you ?
JavaScript is used to create interactive websites. It is mainly
used for:
Client-side validation
Dynamic drop-down menus
Displaying date and time
Displaying popup windows and dialog boxes (like alert dialog box,
confirm dialog box and prompt dialog box)
Displaying clocks etc.
A sign-up form can check if your user name is available when you enter
it, preventing you from having to endure a frustrating reload of the
page.
A search box can give you suggested results while you type.
information that changes constantly can be loaded periodically without
the need for user interaction, for example sports match results or stock
market tickers.
You can use JavaScript to animate elements on a page — for example to
show and hide information, or highlight specific sections of a page.
Basic Setup
To insert a JavaScript into an HTML page, use the <script> tag.
The <script> and </script> tells where the JavaScript starts
and ends.
The lines between <script> and </script> contain the
JavaScript code.
You can place the <script> tags anywhere within you web
page, but it is normally kept within the <head> tags.
Placing scripts at the bottom of the <body> element improves
the display speed, because script compilation slows down the
display.
Case Sensitivity: JavaScript is a case-sensitive language. So
the identifiers Time and TIME will convey different meanings
in JavaScript.
External JavaScripts
Scripts can also be placed in external files.
External scripts are practical when the same
code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the
script file in the source (src) attribute of the
<script> tag:
<script src="myScript.js"></script>
First Code
<!DOCTYPE html>
<html>
<head>
<title>js</title>
</head>
<body>
<script>
alert("this is me");
</script>
</body>
</html>
Javascript outputs
JavaScript can "display" data in different ways:
Writing into an alert box, using window.alert().
Writing into the HTML output
using document.write().
Writing into an HTML element, using innerHTML.
Writing into the browser console, using console.log().
window.alert():
<script>
window.alert(50+ 5);
</script>
document.write()
For testing purposes, it is convenient to use document.write().
document.write(55 + 5);
<button type="button" onclick="document.write(5 5+ 6)">Try it</button>
Using innerHTML
• To access an HTML element, JavaScript can use
the document.getElementById(id) method.
• The id attribute defines the HTML element.
The innerHTML property defines the HTML
content
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 5+ 6;
</script>
console.log()
you can use the console.log() method to display
data.
Activate the browser console with F12, and select
"Console" in the menu
console.log(555 + 44);
46
Web Programming
JAVASCRIPT
BY:
Abid jameel
(M.S Computer Science)
47
JavaScript Comments
Comments are used to make code more
readable.
Single Line Comments:
Single line comments start with //.
Multi-line Comments:
Multi-line comments start with /* and
end with */
48
JavaScript Variables
Variable is a memory location which store value.
variable is "container" for storing information:
JavaScript uses the var keyword to define variables,
and an equal sign to assign values to
variables/identifiers.
var x;
var x = 10;
Document.write(x);
<h1 id="demo"></h1>
<script>
var x = 55;
var y = 10;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
49
JavaScript Data Types
JavaScript variables can hold numbers like
100, and text values like “Engineer".
JavaScript can handle many types of data, but
for now, just think of numbers and strings.
Strings are written inside double or single
quotes.
Numbers are written without quotes.
var points = 3.14;
var person = “Coder";
You can write many variables in one line separated by
coma.
var person = “shaad khan", university= “Abasyn",
semester= 8;
50
JavaScript Operators
Arithmetic Operators
var x = 5;
var y = 2;
var z = x + y;
51
Assignment Operators
x=5;
Y = 10;
x+ = y => x=5+10
52
String Operators
txt1 = “Muhammad";
txt2 = “Rehan";
result = txt1 + " " + txt2;
The + operator can also be used to concatenate strings.
JavaScript Comparison and Logical
Operators
53
JavaScript Arrays
<script>
var cars = [“Suzuki",“4 seater",“Red"];
document.getElementById("demo").innerHTML =
cars[0];
</script>
JavaScript Objects:
JavaScript objects are written with curly
braces.
54
var car= {
name: “Flat",
model : “500",
weight : “850kg”,
color : “white”
};
<script>
document.getElementById("demo").innerHTML =
Car.name + " " + car.model + " “ + car.weight + “ ”
+ car.color ;
</script>
55
JavaScript Popup Boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert Box:
window.alert(“hello I’m alert");
Confirm Box:
window.confirm(“Are u sure want to delete ?");
<h1 id="demo1"></h1>
<button type="button" onclick=“firstFunction()">Try it</button>
<br><br>
<script>
function firstFunction(){
var x;
if (confirm("Are u sure to delete ?") == true)
{
x="you deleted the record";
}
else
{
x= "you canceled the operation";
}
document.getElementById('demo1').innerHTML = x;
}
</script>
56
Prompt Box
window.prompt(“I am prompt","defaultText");
<h1 id="demo1"></h1>
<button type="button" onclick=" firstFunction()">Try it</button>
<script>
function firstFunction()
{
var name = prompt("Please enter your name","Iltaf Hussain");
if (name != null)
{
document.getElementById('demo1').innerHTML=
"Dear " + name + "! calm down and do practice ";
}
}
</script>
NOTE: \n is used for new line in a pop up box
57
58
59
