G5_C3
Introduction to CSS
***NOTE FOR ILLUSTRATOR***
Image of CSS written on computer screen and dodo standing next to it
CLASS STRUCTURE
FOR PREPARATION & REFERENCE
|
Activity No: |
Slide No. |
Topic | Time |
|---|---|---|---|
| 1 | 4 | Ice Breaker activity | 2 |
| 2 | 5-7 | Warm up quiz | 4 |
| 3 | 9-13 | Introduction to CSS | 12 |
| 4 | 14 | Way of adding CSS | 14 |
| 5 | 15-24 | Teacher Activity1-3 | 5 |
| 6 | 26-32 | Student Activity 1 -2 | 3 |
| 7 | 34 | Wrap Up Quiz | |
| 8 | 35-36 | Student Additional Activity |
TA : Teacher Activity
SA : Student Activity
SAA : Student Additional ActivityΩ
Topic
Slide
No.
|
Slide No. |
Topic |
|---|---|
| 2 | Class Structure |
| 3 | Class Prerequisites |
| 16-17 | TA Code solution |
| 19 | TA Code solution |
| 21-23 | TA Code solution |
| 36 | SAA |
PRE REQUISITES
FOR TEACHER
-
Computer with internet connection
-
Latest browser installed
-
Projector to present screen
FOR STUDENTS
-
Computer with internet connection
-
Latest browser installed
Which is your favorite sport and why?
How many heading tags does HTML have?
A. 2 tags
B. 5 tags
C. 5 tags
D. 6 tags
Warm-Up Quiz
Where did we create the changecolor() function?
B. style.css
A. script.js
C. index.html
Let's move ahead.
Excellent!
Hi, My name is Daisy
***note for Illustrator ***
GIF1 Daisy waving hand
GIF2 of a teacher giving instructions to the class
In the talk bubble "Create an About Me on your notebook"
Students: Ok MA'AM
Hi, My name is Daisy
***For Illustrator reference***
GIF1 Daisy at home on her study table.
Camera shift on her notebook she writes "About herself"
About Me
Hi, My name is Daisy. I study in 5th class.
I love to write and and draw.
In My free time I play outdoor games.
***For Ilustrator reference***
GIF 1:
Think Bubble: Let me use colors to beautify my page.
About Me
Hi, My name is Daisy. I study in 5th class.
I love to write and paint.
I love to code and I am a Ninja Coder
***For Ilustrator reference***
About Me page has a color and About me written with Crayon color and some flowers are made on it
***For Ilustrator reference***
GIF 2:
Teacher praising her for her work.
Hi, My name is Daisy
***For Ilustrator reference***
Image 1 and 2 before after of About Me page.
GIF2- Gmail page without CSS and with CSS
About Me
Hi, My name is Daisy. I study in 5th class.
I love to write and draw.
In My free time, I play outdoor games.
About Me
Hi, My name is Daisy. I study in 5th class.
I love to write and paint.
I love to code and I am a Ninja Coder
CSS (Cascading Style Sheets) is used to format the layout of the webpage
Color
Font
Text Size
Background
Some Changes CSS can do
Image Size
***For Illustrator reference***
Add GIFs of all changes
GIF1- background of a website changes
GIF2-
Color of the text changes
GIF3-
Font size Changes
GIF4-
Text size changes
GIF5-
Images size changes in a website
Ways of Adding CSS to HTML
Inline
Internal
External
***For Ilustrator reference***
GIF1-
Shows how Inline is added
GIF2-
Shows how Internal is added
GIF3-
Shows how External is added
Activity
TA STEPS
1. Click on the Link
2. Click on Fork
TA STEPS
Revise the code concepts from the previous class
<body>
<h1>All About Me</h1>
<img src="girl.jpg">
<p>Hey, my name is <i>Ria Sharma.</i> I am 10 years old.<br>
I am in Grade 5 and I study in City public school.
I am a <b>Junior Developer</b>.
I love to code and create websites!</p>
<h2>My Hobbies</h2>
<p>I like to draw and play outdoor games. </p>
<h3>My Favourite Foods</h3>
<p>I love to eat chinese cuisine. </p>
</body>1st way: Inline CSS
1. An inline CSS defines the "style" attribute of a single HTML element
2. Add "style" element to "<h1>" and "<p>" tags and run the project
Inline Solution
1st way: Inline CSS
2nd way: Internal CSS
1. An internal CSS defines the "<style>" attribute of a single HTML page.
2. Define "<style>" tag inside "<head>" tag as mentioned in the image
2nd way: Internal CSS
***For Ilustrator reference***
Add GIF of working of code
3rd way: External CSS
1. An external CSS defines the "style" attribute of many HTML pages
2. To use an external style sheet, add a link to it in the "<head>" section of the HTML page:
Specifies the location of linked documents
Specifies the relation b/w current document & linked document
Specifies the media type of linked document
3rd way: External CSS
3. In the "Files" section, go to the "style.css" file.
3rd way: External CSS
External Solution
4. Add the changes you want to do.
Changes the background color of the page
Aligns the texts
Changes the color of h1 tags to blue
Changes the color of all the paragraphs to red
Add extra notes for the teacher
As explained in the next slide
3rd way: External CSS
***For Illustrator reference***
same GIF student highlighting multiple paragraphs on the book by flipping pages.
Text
Student Activity
1. Search for bit.ly/activityc3
2. Click on Fork
Text
Student Activity
Output
Input
Before
After
Text
Student Activity
Output
Input
Before
After
Student Activity
Search for bit.ly/activityc3a in a new tab and click on
Hint: Link external CSS and press Run
External CSS
Run and check output
Wrap-Up Quiz
How many ways are there to add CSS?
A. 2 ways
B. 3 ways
C. 1 way
D. 4 ways
Inline CSS
Internal CSS
External CSS
Wrap Up Quiz
Which type of CSS is shown in the image?
A. Internal CSS
B. Inline CSS
C. External CSS
This is an example of "Internal CSS" as you can see "<style>" tag is added in "index.html" file.
Additional Challenge 1
TO DO: Add a button and change the alignment of the text.
Additional Challenge Link:
index.html
Additional Challenge 1 Code
TO DO: Add a button and change the alignment of the text.
Additional Challenge 2
TO DO: In the same code, change the background color of the screen to powderblue by implementing "internal css"
Hint:
Implement the changes in "index.html" page
Additional Challenge 2 Code
TO DO: In the same code, change the background color of the screen to powderblue by implementing "internal css"
| Activity Number | Activity Name | Links |
|---|---|---|
| Teacher Activity | All About Me | https://replit.com/@AkshitSharma8/G5C3TATemplate |
| Teacher Activity 1 Solution | All About Me(Inline CSS) | https://replit.com/@AkshitSharma8/G5C3TAInlineSolution |
| Teacher Activity 2 Solution | All about Me(Internal CSS) | https://replit.com/@AkshitSharma8/G5C3TAInternalSolution#index.html |
| Teacher Activity 3 Solution | All about Me(External CSS) | https://replit.com/@AkshitSharma8/G5C3TAExternalSolution#index.html |
| Student Activity 1 | All About Me | https://replit.com/@AkshitSharma8/G5C3SATemplate |
| Student Activity 2 | All About Me(using External CSS) | https://replit.com/@AkshitSharma8/G5C3SAExternalTemplate#index.html |
LINKS
Grade 5 Session 3
By Akshit Sharma
