6 css week12 2020 2021 for g10

Agenda
1- Warm up revision about CSS 10 min
2- ppt teacher demonstrate about CSS 15m
3- 3 Videos about layout and Developer Tools each of
5min
4- Practical work Students divided in pairs and use
notepad or Atom , explorer to create very simple web
page using CSS15m
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

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?

Warm up revision
1-Selectors (Type - Class
and ID).
2. External CCS file.
3. Boxes (Content –
Padding – Border - Margin)
5
CSS

Open your previous web page
6
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; }

Inline CSS
8
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> 9
CSS

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

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

Grouping styles
12
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 /*…*/
13
/* 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

Inheriting styles
15
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
16
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 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 17
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 18
Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#te

Boxes (Content – Padding
– Border - Margin)
Listen to this video
Offline On line
Offline On line
CSS

Boxes (Content – Padding – Border - Margin)
20

What we learn today
1.Change the layout of a
web page.
2. Access Developer
Tools in your browser
22
CSS

2. Change the layout of a web
page.
23
CSS
Offline
On line
CSS Auto Adjusting Stretch Fit Web Site
Layout Tutorial HTML5 Template

page.
24
CSS
Offline
On line
Window Size Responsive CSS Layout
Stylesheet Change JavaScript Tutorial

page.
25
CSS

page.
26
CSS

page.
27
CSS

page.
28
CSS
www.w3schools.com
https://www.w3schools.com/html
/html_layout.asp

page.
29
CSS

page.
30
CSS
https://www.w3schools.com/bootstrap/boot
strap_get_started.asp
Bootstrap

31
CSS• Bootstrap. Advantages of Bootstrap:
• Easy to use: Anybody with just basic
knowledge of HTML and CSS can start using
Bootstrap
• Responsive features: Bootstrap's responsive
CSS adjusts to phones, tablets, and desktops
• Mobile-first approach: In Bootstrap 3, mobile-
first styles are part of the core framework
• Browser compatibility: Bootstrap is
compatible with all modern browsers (Chrome,
Firefox, Internet Explorer, Edge, Safari, and
Opera)

page.
32
CSS
• Downloading Bootstrap
• If you want to download and host
Bootstrap yourself, go
to getbootstrap.com, and follow
the instructions there.

33
CSS<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/boots
trap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min
.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstra
p.min.js"></script>
</head>

page.
34
CSS
•Flexbox is a new layout mode in
CSS3.
• Use of flexbox ensures that elements
behave predictably when the page layout
must accommodate different screen sizes
and different display
devices. Disadvantages: Does not work
in IE10 and earlier.
• https://www.w3schools.com/css/tryit.asp?fi
lename=trycss3_flexbox_flex-
wrap_nowrap8

2. Change the layout of a web page.
35
CSS
CSS Layout - float and clear
*The CSS float property specifies
how an element should float.
*The CSS clear property specifies
what elements can float beside
the cleared element and on which side.

3. Access Developer Tools in
your browser.
36
CSS
Offline
On line
14 Firefox Developer Tools You Might Not
Know About

your browser.
37
CSS
Offline
On line
Debugging JavaScript - Chrome DevTools
101

your browser.
38
CSS

your browser.
39
CSS

your browser.
40
CSS

your browser.
• In google chroume press
F12
• Ctrl+shift +C
41
CSS

42
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
43
1.Change the layout of a
web page.
2. Access Developer
Tools in your browser
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).44
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 .
46
CSS

rubaric
47
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=Rtww83GH0BU
• Other materials:
https://www.sololearn.com/Course/CSS/
https://www.w3schools.com/css/default.asp
http://www.quackit.com/html_5/tags/html_div_tag.cfm
https://www.sololearn.com/Course/css/
• https://www.youtube.com/watch?v=x7s_Cko99ZA
• https://www.youtube.com/watch?v=ZKy0kIZB9y4
• https://www.youtube.com/watch?v=S36N8RGdY2U
• https://www.youtube.com/watch?v=H0XScE08hy8
48
CSS

49
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

6 css week12 2020 2021 for g10

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 6 css week12 2020 2021 for g10

Similar to 6 css week12 2020 2021 for g10 (20)

More from Osama Ghandour Geris

More from Osama Ghandour Geris (20)

Recently uploaded

Recently uploaded (20)

6 css week12 2020 2021 for g10

Editor's Notes