Css week11 2020 2021 for g10 by eng.osama ghandour
1. 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
2. LO CS.1.06 - Identify
and explain the
addition of a style to
web site by using
cascading style sheets
(CSS).
Lesson plan
CSS
14. 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
15. 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; }
16. 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!
18. 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
31. 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
32. 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
33. • The HTML:<p class="first">
Border width of this paragraph is set to 2px.
</p>
<p class="second">
Border width of this paragraph is set to 5px.
</p>
The CSS:
• p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}Try It Yourself 33
34. 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. 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?
37. 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
38. 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
43. What we learn today
1-Selectors (Type - Class
and ID).
2. External CCS file.
3. Boxes (Content –
Padding – Border - Margin)
43
CSS
44. 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
45. 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
46. Boxes (Content – Padding
– Border - Margin)
Listen to this video
Offline On line
CSS
53. • The HTML:<p class="first">
Border width of this paragraph is set to 2px.
</p>
<p class="second">
Border width of this paragraph is set to 5px.
</p>
The CSS:
• p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}Try It Yourself 53
54. 2. Change the layout of a web
page.
54
CSS
Listen to this video
Offline
On line
CSS Auto Adjusting Stretch Fit Web Site
Layout Tutorial HTML5 Template
55. 2. Change the layout of a web
page.
55
CSS
Listen to this video
Offline
On line
Window Size Responsive CSS Layout
Stylesheet Change JavaScript Tutorial
56. 3. Access Developer Tools in
your browser.
56
CSS
Listen to this video
Offline
On line
14 Firefox Developer Tools You Might Not
Know About
57. 3. Access Developer Tools in
your browser.
57
CSS
Listen to this video
Offline
On line
Debugging JavaScript - Chrome DevTools
101
60. 60
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
62. 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).62
CSS
63. Reflection
• What is your goal to accomplish in
next week End Using HTML and CSS?
CSS
64. 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 .
64
CSS
65. rubaric
65
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 .
67. 67
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