G5_C3
Introduction to CSS
Topic
TA : Teacher Activity
SA : Student Activity
SAA : Student Additional Activity
FOR PREPARATION & REFERENCE
|
Slide No. |
Topic |
|---|---|
| 2 | Class Structure |
| 3 | Class Prerequisites |
| 12-20 | TA Code solution |
| 41-43 | SAA Code Solution |
| 44 | Activity Links |
CLASS STRUCTURE
|
Activity No: |
Slide No. |
Topic | Time |
|---|---|---|---|
| 1 | 4 | 2min | |
| 2 | 5-7 | 4 min | |
| 3 | 9 | 4 min | |
| 4 | 10-11 | 8 min | |
| 5 | 12-22 | 10min | |
| 6 | 23-31 | 5 min | |
| 7 | 32-34 | 2 min | |
| 8 | 39-42 | - |
PRE REQUISITES
FOR TEACHER
1. Computer with internet connection.
2. The latest browser installed.
3. Projector to present screen.
4. Repl.it login credentials.
FOR STUDENTS
1. Computer with internet connection.
2. The latest browser installed.
3. Repl.it login credentials.
What is your favourite sport and why?
3
Q.1
Which among the following header tags have the biggest font size?
<h2>
1
<h1>
3
2
<h6>
"h1" tag gas the largest font size followed by the "h2" tag.
"h6" has the smallest font size.
Q.2
Where did we create "changecolor()" function
3
style.css
1
index.html
2
script.js
3
Yes, the "<b>" tag is used to bold the words present in a paragraph.
***note for Illustrator ***
GIF1 Daisy waving hand
In the talk bubble "Create an About Me on your notebook"
Students: Ok MA'AM
Create an About Me on your notebook
Ok MA'AM
Ok MA'AM
Ok MA'AM
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 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 paint.
I love to code and I am a Ninja Coder
***For Ilustrator reference***
GIF 1:
Think Bubble: Let me use colors to beautify my page.
***For Ilustrator reference***
GIF 2:
Teacher praising her for her work.
***For Ilustrator reference***
About Me page has a color and About me written with Crayon color and some flowers are made on it
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
***For Ilustrator reference***
Image 1 and 2 before after of About Me page.
GIF2- Gmail page without CSS and with CSS
***For Illustrator reference***
Add GIFs of all changes
GIF1- background of a website changes
GIF2-
Color of the text changes
GIF3-
Font size Changes
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
GIF4-
Text size changes
GIF5-
Images size changes in a website
***For Illustrator reference***
Add GIFs of all changes
GIF1- background of a website changes
GIF2-
Color of the text changes
GIF3-
Font size Changes
Ways of adding CSS to HTML
Inline
Internal
External
Activity
FOR TEACHER REFERENCE
TO DO: Revise the concepts from the previous class
Code Reference for TA 1
<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>FOR TEACHER REFERENCE
1st way: Inline CSS
FOR TEACHER REFERENCE
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
1st way: Inline CSS
FOR TEACHER REFERENCE
2nd way: Internal CSS
FOR TEACHER REFERENCE
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 TEACHER REFERENCE
3rd way: External CSS
FOR TEACHER REFERENCE
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
FOR TEACHER REFERENCE
3. In the "Files" section, go to the "style.css" file.
3rd way: External CSS
FOR TEACHER REFERENCE
3. Add the changes you want to do.
3rd way: External CSS
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
3rd way: External CSS
FOR TEACHER REFERENCE
1. Search for bit.ly/activityc3
2. Click on Fork
Student Activity
STEP 1: Change the first "<p>" tag's color to red and "<h1>" tag's color to darkblue
Input
Output
Before
After
Student Activity
STEP 2: Change the color of all the "<p>" tags to red.
Input
Output
Before
After
Student Activity
Student Activity
External CSS
1. Search for bit.ly/activityc3a in a new tab and click on fork
2. Link the "style.css" file to "index.html" and press Run
Hint:
Student Activity
Run and check the output
How many ways are there to add CSS?
2 ways
3 ways
4 ways
WRAP-UP QUIZ!
Q.01
C
A
B
B
Inline CSS, Internal CSS, External CSS
WRAP-UP QUIZ!
Q.02
A
C
B
Inline CSS
External CSS
Inline CSS
C
Which type of CSS is shown in the image?
This is an example of "Internal CSS" as you can see "<style>" tag is added in "index.html" file.
RECAP
TO DO: Add a button and chage the alignment of the text.
ADDITIONAL ACTIVITY 1
TO DO: Add a button and change the alignment of the text.
ADDITIONAL ACTIVITY 1 CODE
TO DO: In the same code, change the background color of the screen to powerblue by implementing "Internal CSS"
Hint:
Implement the changes in "index.html" page
ADDITIONAL ACTIVITY 2
ADDITIONAL ACTIVITY 2
TO DO: In the same code, change the background color of the screen to powerblue by implementing "Internal CSS"
| ACTIVITY NAME | LINK | |
|---|---|---|
| Teacher Activity 1 | All About Me Page | |
|
Teacher Activity 1 Solution |
All About Me Page | |
| Student Activity 1 | All About Me Page | |
| Additional Activity 1 | All About Me Page | |
| Additional Activity 1 Solution |
All About Me Page | |
| Additional Activity 1 | All About Me Page | |
| AA2- Solution |
ACTIVITY LINKS
Grade 5 Session 3_Template
By Akshit Sharma
