Css week10 2019 2020 for g10 by eng.osama ghandour

Agenda
1- Warm up revision about HTML 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 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
5
CSS

HTML template
<!DOCTYPE html>
<html lang="en">
<head>
<title>STEM Education</title>
<meta charset="utf-8">
</head>
<body> hdgjadhgakf</body>
</html>
CSS

Favorite Sites
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="UTF-8">
<style> </style> // for header and article and img
<script> </script>
</head>
<body>
<h1> content: header, article for each site </h1>
</body>
</html>
CSS

Practical work Students
divided in groups and use
notepad , , online resources
to create very simple
portfolio or school web
page 30 min
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

Warm up revision
11
1.HTML Forms).
2. Multimedia (sound,
music, videos, movies, and
animations)
3 . Make validation.
CSS

14
Core Attributes
Id
Title
Class
Style
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
CSS

15
The class Attribute
The class attribute is used to associate an
element with a style sheet, and specifies the
class of element. You will learn more about the
use of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you
can avoid it.
The value of the attribute may also be a space-
separated list of class names. For example:
class="className1 className2 className3"
CSS

19
Page Redirection
You can use <meta> tag to redirect your
page to any other webpage. You can also
specify a duration if you want to redirect
the page after a certain number of
seconds.
Example
Following is an example of redirecting
current page to another page after 5
seconds. If you want to redirect page
immediately then do not specify content
attribute.
Web addressCSS

20
<head>
<title>Meta Tags Example</title>
<meta name="keywords"
content="HTML, Meta Tags, Metadata" />
<meta name="description"
content="Learning about Meta Tags." />
<meta http-equiv="refresh" content="5;
url=http://www.tutorialspoint.com" />
</head>
Web address
CSS

21
<head>
</head>
Web address
CSS

23
<head>
</head>
Web address
CSS

Open your previous web page
26
CSS

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

To send the form to e.mail
instead of database
29
<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

Differences Between Get and
Post - Web Development
30

Differences Between Get
and Post - Web
Development
Offline
On line
CSS

Validation : tray it on line such
as in w3schools
32
CSS

Form validation in
html5 without using
Java Script
Offline
On line
CSS

Summary video
Offline
On line
CSS

35
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

The code for Audio and Video
38
CSS

What we learn today
1.CSS term. 2. Style
attribute / Style element.
3. Inline styles / Multiple
styles. 4. CSS syntax
(Selector - Rules).
39
CSS

• CSS Introduction
• What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are
to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control
the layout of multiple web pages all at
once
• External stylesheets are stored in CSS
files 40
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; }

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

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

Inline CSS
44
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> 45
CSS

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

Attaching a CSS file <link>
• A page can link to multiple style sheet files
– In case of a conflict (two sheets define a style for the same
HTML element), the latter sheet's properties will be used
47
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
CS380

Guy-Vincent Jourdan :: CSI 3140
:: based on Jeffrey C. Jackson’s
Style Sheet Languages
• Cascading Style Sheets (CSS)
– Applies to (X)HTML as well as XML
documents in general
– Focus of this chapter
• Extensible Stylesheet Language (XSL)
– Often used to transform one XML document
to another form, but can also add style
– XSL Transformations covered in later chapter

CSS Introduction
• A styled HTML document
produced by the style sheet style1.css:

CSS Introduction
link element associates style sheet with doc.

CSS Introduction
type attribute specifies style language used

CSS Introduction
href attribute provides style sheet URL

CSS Introduction
title attribute provides style sheet name

CSS Introduction
Alternative, user selectable style sheets
can be specified

CSS Introduction

CSS Introduction
• A styled HTML document
produced by the style sheet style2.css:

CSS Introduction
Note that alternate, user selectable style is
not widely supported: firefox 3 and IE 8 do,
but IE 6, IE 7 and Chrome don’t.

CSS Introduction
• Single document can be displayed on
multiple media platforms by tailoring style
sheets:
This document will be printed differently
than it is displayed.

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

Each element / selector has the
following:
61
CSS

Types of selectors
Offline On line
Offline On line
CSS

Types of selectors
64
CSS
1- Element selector

Types of selectors
65
CSS
2- class selector Multiple elements

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

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

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

Grouping styles
71
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 /*…*/
72
/* 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 73

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 74

75
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
77
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
78
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

Basic CSS rule syntax
• A CSS file consists of one or more rules
• Each rule starts with a selector
• A selector specifies an HTML element(s) and then
applies style properties to them
– a selector of * selects all elements
85
selector {
property: value;
property: value;
...
property: value;
} CSS
p {
font-family: sans-serif;
color: red;
} CSS

Each element / selector has the
following:
86
CSS

CSS Syntax
• Parts of a style rule (or statement)

CSS Syntax:
Selector Strings
• Single element type:
• Multiple element types:
• All element types:
• Specific elements by id:

CSS Syntax:
Selector Strings

CSS Syntax:
Selector Strings
• Elements belonging to a style class:
– Referencing a style class in HTML:
• Elements of a certain type and class:
class selector: begins with a period .

CSS Syntax:
Selector Strings
this span belongs to three style classes

CSS Syntax:
Selector Strings
this rule applies only to span’s belonging to class special

CSS Syntax:
Selector Strings
• Source anchor elements:
• Element types that are descendents:pseudo-classes

CSS Syntax:
Selector Strings
• Element types that are descendants:
rule applies to li element that is

CSS Syntax:
Selector Strings
part of the content of an ol element

CSS Syntax:
Selector Strings
part of the content of an ol element
that is part of the content of a ul element

CSS Syntax
• Style rules covered thus far follow ruleset
syntax
• At-rule is a second type of rule
– Reads style rules from specified URL
– Must appear at beginning of style sheet
URL relative to style sheet URL

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 102
Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#fo

CSS properties for text
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 103
Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#te

CSS properties for text
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 104
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)
106

107

108

110
CSS

111
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 112

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

3. Access Developer Tools in
your browser.
114
CSS

6. Linking stylesheets.
115
CSS

7. CSS property for setting an
element.
116
CSS

117
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
118
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).119
CSS

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

Home work (s. proj.) 1
create individually a very simple
web page about one of your hopes
or favorites you should include 5
sentences ,1 picture , 1 video , 1
audio , 1 link , forum and 1 CSS in
an index.htm and include it and the
picture in folder named with your
name and class .
Note your project will be evaluated
for semester garding
121
CSS

Home work (s. proj.) 2
search and find away to
communicate what you achieved
from your home work 1 such as to
upload the pages you designed to
google site .
122
CSS

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/
123
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 week10 2019 2020 for g10 by eng.osama ghandour

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Css week10 2019 2020 for g10 by eng.osama ghandour

Semelhante a Css week10 2019 2020 for g10 by eng.osama ghandour (20)

Mais de Osama Ghandour Geris

Mais de Osama Ghandour Geris (20)

Último

Último (20)

Css week10 2019 2020 for g10 by eng.osama ghandour