Css week11 2019 2020 for g10 by eng.osama ghandour

Agenda
1- Warm up revision about CSS 10 min
2- ppt teacher demonstrate about CSS 15m
3- Video about CSS Selectors 5min
4- Practical work Students divided in pairs and use
notepad or Atom , explorer to create very simple web
page using CSS30m
7- Questions and answers as pretest about CSS 5 min
8-Refelection 5 min
9- Home work 5 min
CSS

LO CS.1.06 - Identify
and explain the
addition of a style to
web site by using
cascading style sheets
(CSS).
Lesson plan
CSS

Warm Up
Listen to this video
Offline
On line
CSS

Essential Question
How could you
create a web site
using HTML - CSS?

Essential Question
How can we add a
style (inline, internal
and external) to a
web site?

• Using on line resources for
html5 code , CSS code , etc
…
• Ex : w3school , sololearn
6
CSS

HTML template
<!DOCTYPE html>
<html lang="en">
<head>
<title>STEM Education</title>
<meta charset="utf-8">
<link rel="stylesheet“ href="example.css">
</head>
<body> hdgjadhgakf</body>
</html>
CSS

Check your email to Solve the
Online auto answered
quiz 15 min after
school the quiz will be
closed in 10:00pm
after
tomorrow
CSS

1.CSS term. 2. Style
attribute / Style element.
3. Inline styles / Multiple
styles. 4. CSS syntax
(Selector - Rules).
9
CSS
Warm up revision

Open your previous web page
11
CSS

Question ??
How to create a form
inside a web page
12
CSS

To send the form to e.mail
instead of database
14
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
<form action ="mailto:you@yourwebsite.com">
<form action="mailto:you@yourwebsite.com">
CSS

CSS Syntax
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: selector, property,
and value.
For example, the headline color can be defined
as:
h1 { color: orange; }

Styles' locations
Inline --- inside any tag in Body
Internal styles --- inside style tag in Head
External --- CSS file inside link tag in Head
16
CSS
Style sheet or style element — not both!

Inline CSS
17
CSS
<p style="color:white;
background-color:gray;">
This is an example of inline
styling.
</p>

internal styles : are defined within
the <style> element, inside
the head section of an HTML page.
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head> 18
CSS

<head>
<link rel="stylesheet"
href="example.css">
</head>
19
CSSExternal CSS
With this method, all styling rules are contained in
a single text file, which is saved with
the .css extension

Be Efficient
20
Time consuming
- Inline styling
- Embedded (internal) style sheets
Quicker and easier
- External style sheets

Each element / selector has the
following:
22
CSS

Types of selectors
Offline On line
Offline On line
CSS

Types of selectors
24
CSS
1- Element selector

Types of selectors
25
CSS
2- class selector Multiple elements

Types of selectors
28
CSS
2- id selector limited to one element

Types of selectors
29
CSS
2- id selector limited to one element

Types of selectors
30
CSS
Selector may be a
combination like :

Grouping styles
31
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
output
This h2 uses the above styles.
• A style can select multiple elements separated by
commas
• The individual elements can also have their own styles
CS380

CSS comments /*…*/
32
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
• CSS (like HTML) is usually not commented as
rigorously as programming languages such as Java
• The // single-line comment style is NOT supported in
CSS
• The  HTML comment style is also NOT
supported in CSS
CS380

• The HTML:<p class="first">
Border width of this paragraph is set to 2px.
</p>
<p class="second">
</p>
The CSS:
• p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-width: 5px;
}Try It Yourself 33

Cascading Style Sheets
• Properties of an element cascade together
in this order:
– browser's default styles
– external style sheet files (in a <link> tag)
– internal style sheets (inside a <style> tag in
the page's header)
– inline style (the style attribute of the HTML
element)
CS380 34

35
How CSS Works — Matching
• Every XHTML document represents a document
tree
• The browser uses the tree to determine which rules
apply
• What about inheritance? And conflicts?

Inheriting styles
37
body { font-family: sans-serif; background-color: yellow;
}
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
CSS
This is a heading
• A bulleted list output
• when multiple styles apply to an element, they are
inherited
• a more tightly matching rule can override a more
general inherited rule
A styled paragraph. Previous slides are available on the website.
CS380

Styles that conflict
38
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS
This paragraph uses the first style above.
output
• when two styles set conflicting values for the same
property, the latter style takes precedence
This heading uses both styles above.
CS380

CSS Syntax
Offline On line
Offline On line
CSS

CSS Selectors - Tag, ID,
Class, Attribute
Offline On line
Offline On line
CSS

What we learn today
1-Selectors (Type - Class
and ID).
2. External CCS file.
3. Boxes (Content –
Padding – Border - Margin)
43
CSS

CSS properties for fonts
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
CS380 44
Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#fo

CSS properties for text
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
word-spacing,
letter-spacing
gaps between the various portions of
the text
text-indent
indents the first letter of each
paragraph
CS380 45
Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#te

Boxes (Content – Padding
– Border - Margin)
Offline On line
Offline On line
CSS

Boxes (Content – Padding – Border - Margin)
47

48

49

52
CSS

53
CSS

• The HTML:<p class="first">
</p>
<p class="second">
</p>
The CSS:
• p.first {
padding: 10px;
border-width: 2px;
}
p.second {
padding: 10px;
border-width: 5px;
}Try It Yourself 54

2. Change the layout of a web
page.
55
CSS

3. Access Developer Tools in
your browser.
56
CSS

6. Linking stylesheets.
57
CSS

7. CSS property for setting an
element.
58
CSS

59
Learn and practice through on line web sites
http://www.w3schools.com/tags/tag_div.asp
http://www.quackit.com/html_5/tags/html_div_tag.cfm
https://www.sololearn.com/Course/HTML/
https://www.freecodecamp.org
CSS

Sumarry
60
1.CSS term. 2. Style
attribute / Style element.
3. Inline styles / Multiple
styles. 4. CSS syntax
(Selector - Rules).
CSS

Prepare for next week
according to student’s law
Gn=Wn % Ng
5. Selectors (Type - Class
and ID). 6. External CCS file.
7. Boxes (Content –
Padding – Border - Margin).61
CSS

Reflection
• What is your goal to accomplish in
next week End Using HTML and CSS?
CSS

Home work (s. proj.) 1
• Create /design a web page using
HTML/CSS to show a project /hoppy /skill
of your favorites following the bellow
rubric .
63
CSS

rubaric
64
CSS
Blue
Design a profficinal web page which contains CSS
Elements such as 1- Selectors (Type - Class and ID).
2. External CCS file.3. Boxes (Content – Padding –
Border - Margin)
Green
Design a normal web page which contains CSS
Elements suchas 1- Selectors (Type - Class and ID).
2. External CCS file.3. Boxes (Content – Padding –
Border - Margin).
Yellow missing two points of green level.
Read a web page haven't includding any CSS elemnets .

Resources
• https://www.youtube.com/watch?v=Rtww83GH
0BU
• Other materials:
https://www.sololearn.com/Course/CSS/
https://www.w3schools.com/css/default.asp
http://www.quackit.com/html_5/tags/html_div_ta
g.cfm
https://www.sololearn.com/Course/css/
65
CSS

66
Learn and practice through on line web sites
https://www.thewebevolved.com
https://www.123test.com/
https://www.wscubetech.com/
https://www.w3schools.com/php/php_quiz.asp
https://www.guru99.com
https://codescracker.com/exam/review.php
https://www.arealme.com/left-right-brain/en/
https://www.javatpoint.com/c-quiz
https://www.proprofs.com/
https://www.geeksforgeeks.org/
https://www.tutorialspoint.com
https://www.sololearn.com/Course/HTML
http://www.littlewebhut.com/
CSS

Thanks
Engineer and educator/ Osama G. Geris
CSS

https://twitter.com/osamageris
https://www.linkedin.com/in/osamaghandour/
https://www.youtube.com/user/osmgg2
https://www.facebook.com/osama.g.geris
CSS

Css week11 2019 2020 for g10 by eng.osama ghandour

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Css week11 2019 2020 for g10 by eng.osama ghandour

Similar to Css week11 2019 2020 for g10 by eng.osama ghandour (20)

More from Osama Ghandour Geris

More from Osama Ghandour Geris (20)

Recently uploaded

Recently uploaded (20)

Css week11 2019 2020 for g10 by eng.osama ghandour