Skip to content

Commit a7227b0

Browse files
committed
Added to ex 01.1 - extra explanation and tasks - students practice color, font-size, padding, to make text look closer to the sample image
1 parent 849fd02 commit a7227b0

File tree

3 files changed

+16
-5
lines changed

3 files changed

+16
-5
lines changed

exercises/01-Hello-World/README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ tutorial: "https://www.youtube.com/watch?v=rbtHLA813pU"
44
# `01` Hello World in CSS
55

66
CSS is about adding styles to our HTML elements.
7-
The most basic way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this:
7+
8+
The most **basic** way to apply a style to an HTML element is to use the html `style` attribute within the tag. This is called "inline styles" and works like this:
89

910
```HTML
1011
<a href="google.com" style="color: red; font-size: 14px;">Go to google</a>
1112
```
1213

1314
This will set the text color of the link above to red, and the font size to 14 pixels.
14-
In contemporary web design this way of applying styles is discouraged, because it is not efficient - you have to apply styles tag by tag. But you will run into examples of it and need to be familiar with it.
15+
16+
In contemporary web design this way of applying styles is **discouraged**, because it is not efficient - you have to apply styles tag by tag. But you will run into examples of it and need to be familiar with it.
1517

1618
To apply styles you always have to follow thеse steps:
1719

exercises/01.1-The-Style-Tag/README.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ tutorial: "https://www.youtube.com/watch?v=C5sOchuD2d4"
44

55
# `01.1` The Style Tag
66

7-
If you want to add styles into a website by writing CSS you have to always add it within a `<style>` tag.
7+
A more efficient approach to adding styles into your webpages is by writing your CSS in a `<style>` tag, within the head section of your HTML code.
8+
89
You can have as many style tags as you want but it is recomended to have only one at the beginning of your website code.
10+
911
```HTML
1012
<style>
1113
/* the website CSS Styles go here */
@@ -14,7 +16,14 @@ You can have as many style tags as you want but it is recomended to have only on
1416

1517
## 📝 Instructions
1618

17-
Add a `<style>` tag into your website and using CSS select all `<p>` tags to turn their text into blue color.
19+
- Add a `<style>` tag into your website
20+
- Using CSS properties select all `<p>` tags to turn their text color to blue.
21+
- Make tthe font size 36px.
22+
- Give the p tag padding of 40px.
23+
24+
### 💡 Hint
25+
26+
Remember that you will need the complete html structure of the page, because the `style` tags need to go inside of the `head` tags.
1827

1928
## 💻 Preview
2029

exercises/01.1-The-Style-Tag/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- add a style tag and select the p tag and make it color blue -->
1+
<!-- Remember you can only add a style tag within the head tags of your web page -->
22
<p>
33
Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
44
around them. Having children learn coding at a young age prepares them for the future. Coding helps children with communication, creativity,

0 commit comments

Comments
 (0)