Lecture16 ie321 dr_atifshahzad_css

DR ATIF SHAHZAD
Fundamentals of
Computer Systems
IE-321
LECTURE #16

RECAP
Logic
Logical variables
Conditional, Negation, Contrapositive,Biconditional
AND, OR,NOT,XOR
Logic gates
TruthTables
BooleanAlgebra
Examples
Q&A
MicrosoftVisio
Microsoft Project
Spreadsheet Concepts:
Using Microsoft Excel
Creating Charts in Microsoft Excel
Debugging Concepts Using Microsoft Excel
Presentation Concepts Using Microsoft PowerPoint
Image Concepts
Memory
Memory Cell
CPU
Register
Program Counter
Fetch-Execute Cycle
Q&A
File Management
Word Processing Basics Using MicrosoftWord
MicrosoftWord Layout and Graphics Features
Making and using compressed Files
WinZip, 7Zip
Notepad++
Wordpad
Adobe acrobat
Sumatra PDF
MathType
Database
Flat & Relational
Database
DBMS
Tables & Fields
Creating Tables in
Access
Design view and Data
Sheet View
Primary Key &
Foreign key
Relationships & ER
Diagram
Queries &Simple SQL
Cyber Security
Security Problems
Interception
Spoofing
Falsification
Repudiation
Security Technologies
Encryption
MAC
Data Model
Algorithm
Ingredients
Variables
Constructs
Pseudocode
Flowchart
Symbols
Flowcharting
examples
Q&A
What is
HTML?
Basic HTML
Document
Structure
Creating Your
First HTML
Paragraphs
Text
Formatting
Headings,
Lines,
Comments
Elements Attributes
Images Links Lists Tables
HTML Colors
Inline and
Block Elements
Forms

Fundamentals of
Computer Systems
IE321

CSS
9/27/2018
Dr.AtifShahzad
4

TheWeb Structure
9/27/2018
Dr.AtifShahzad
5
HTML:
Structure
CSS:
Presentation
JavaScript:
Behavior
PHP or similar: Backend
CMS: Content Management

Why CSS?
9/27/2018
Dr.AtifShahzad
6
CSS allows you to
apply specific styles to
specific HTML
elements.
Style
Content

CSS
Cascading
refers to the
way CSS applies
one style on top
of another.
Style Sheets
control the
look and feel of
web
documents.
9/27/2018
Dr.AtifShahzad
7
CSS and HTML work hand in hand:
- HTML sorts out the page structure.
- CSS defines how HTML elements are displayed.

9/27/2018
Dr.AtifShahzad
8
Inline style
a unique style is applied
to a single element.
•In order to use an inline style, add
the style attribute to the relevant
tag.
Internal
styles
defined within the
<style> element, inside
the head section of an
HTML page.
External
all styling rules are contained
in a single text file, which is
saved with the .css extension.
•This CSS file is then referenced in the
HTML using the <link> tag. The
<link> element goes inside the head
section.
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
<html>
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
<p>This is my second paragraph. </p>
</body>
</html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my third paragraph. </p>
</body>
p {
color:white;
}
Ways to Insert CSS Styles

CSS Styles
9/27/2018
Dr.AtifShahzad
9
Inline
style
Internal
styles
External
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
<html>
<head>
<style>
p {
color:white;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
</body>
</html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my third paragraph. </p>
</body>
p {
color:white;
}
example.css

CSS Style rules
9/27/2018
Dr.AtifShahzad
10
CSS is composed of style rules that the
browser interprets and then applies to the
corresponding elements in your document.

A style rule has three parts
9/27/2018
Dr.AtifShahzad
11
selector
property
value
For example, the headline
color can be defined as:
h1 { color: orange; }

Selector
9/27/2018
Dr.AtifShahzad
12
selector
property
value
Type selector
Id selector
Class selector

Type Selector
9/27/2018
Dr.AtifShahzad
13
targets element types on the page.
A CSS declaration always ends with a semicolon, and declaration groups are
surrounded by curly braces.
p {
color: red;
font-size:130%;
}
Type selector
Id selector
Class selector

id Selector
9/27/2018
Dr.AtifShahzad
14
to style an HTML element that has an id
attribute, regardless of their position in the
document tree.
#intro {
color: white;
background-color: gray;
}
<div id="intro">
<p>This paragraph is in the intro section.</p>
</div>
<p>This paragraph is not in the intro section.</p>
css
HTML
To select an element with a specific id, use a hash character, and then follow it
with the id of the element.
Type selector
Id selector
Class selector

class Selector
9/27/2018
Dr.AtifShahzad
15
both paragraphs having the class "first" will
be affected by the CSS:
.first {font-size: 200%;}
<div>
<p class="first">This is a paragraph</p>
<p>This is the second paragraph. </p>
</div>
<p class="first">This is not in the intro section</p
>
<p>The second paragraph is not in the intro section
. </p>
css
HTML
To select elements with a specific class, use a period character, followed by the
name of the class.
Type selector
Id selector
Class selector

Comparison of Selector
9/27/2018
Dr.AtifShahzad
16
Type
selector
targets
element
types on
the page.
Id selector
IDs can
only be
applied
once per
page
Class
selector
classes can
be used as
many times
on a page
as needed
Type selector
Id selector
Class selector

Descendent Selector
9/27/2018
Dr.AtifShahzad
17
used to select elements that are
descendants of another element.When
selecting levels, you can select as many
levels deep as you need to.
#intro .first em {
color: pink;
}
<div id="intro">
<p class="first">This is a <em> paragraph.</em
></p>
<p>This is the second paragraph. </p>
</div>
<p class="first">This is not in the intro section.</
p>
<p>The second paragraph is not in the intro section
. </p>

CSS Comments
/* Your comment goes here */
9/27/2018
Dr.AtifShahzad
18
/*This is a Comment */

Basis CSS Syntax
A CSS file
• consists of one or more rules
Each rule
• starts with a selector that specifies an HTML element(s)
and then
applies style
properties
• to them a selector of * selects all elements
A selector
• of * selects all elements
9/27/2018
Dr.AtifShahzad
19

CSS properties for Color
9/27/2018
Dr.AtifShahzad
20

CSS properties for Color
9/27/2018
Dr.AtifShahzad
21
Color
names
aqua, black, blue, fuchsia,
gray, green, lime, maroon,
navy, olive,purple, red,
silver, teal, white (white),
yellow
RGB codes
red, green, and blue values
from 0 (none) to 255
(full)
Hex codes
RGB values in base-16
from 00 (0, none) to FF
(255, full)

Inheritance
Inheritance refers to the way properties
flow through the page.
A child element will usually take on the characteristics of
the parent element unless otherwise defined.
9/27/2018
Dr.AtifShahzad
22
<html>
<head>
<style>
body {
color: green;
font-family:Arial;
}
</style>
</head>
<body>
<p>
This is a text inside the paragraph.
</p>
</body>
</html>
HTML
Since the
paragraph tag
(child element)
is inside the
body tag
(parent
element), it
takes on any
styles assigned
to the body tag.

Question
9/27/2018
Dr.AtifShahzad
23
What color does the paragraph have?
<style>
body {color: green; }
.mydiv {color: red; }
</style>
<body>
<div class="mydiv">
<p>Some text</p>
</div>
</body>
HTML

The font-family Property
The font-family property specifies the font
for an element.
There are two types of font family names:
9/27/2018
Dr.AtifShahzad
24
- font
family:
a specific font family
(likeTimes New
Roman orArial)
- generic
family:
a group of font families
with a similar look (like
Serif or Monospace)

9/27/2018
Dr.AtifShahzad
25
font family
a specific font family
(likeTimes New
Roman orArial)
generic
family
a group of font families
with a similar look (like
Serif or Monospace)

9/27/2018
Dr.AtifShahzad
26
<p class="serif">
This is a paragraph shown in serif font.
</p>
<p class="sansserif">
This is a paragraph shown in sans-serif font.
</p>
<p class="monospace">
This is a paragraph shown in monospace font.
</p>
<p class="cursive">
This is a paragraph shown in cursive font.
</p>
<p class="fantasy">
This is a paragraph shown in fantasy font.
</p>
HTML
p.serif {
font-family: "Times New Roman",Times, serif;
}
p.sansserif {
font-family: Helvetica,Arial, sans-serif;
}
p.monospace {
font-family: "Courier New", Courier, monospace;
}
p.cursive {
font-family: Florence, cursive;
}
p.fantasy {
font-family: Blippo, fantasy;
}
CSS

Lecture16 ie321 dr_atifshahzad_css

9/27/2018
Dr.AtifShahzad
28
NEVER hesitate to
contact should you
have any question
Dr.Atif Shahzad

Lecture16 ie321 dr_atifshahzad_css

Recommended

More Related Content

Similar to Lecture16 ie321 dr_atifshahzad_css (20)

More from Atif Shahzad (20)

Recently uploaded (20)

Lecture16 ie321 dr_atifshahzad_css