You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
CSS is about styles. To apply styles you always have to follow this steps:
6
+
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
8
-
1. Read the HTML and pick what element do you want to decorate or apply styles to.
9
-
2. Programatically select the element you want to style using CSS Selectors.
10
-
3. Write the styling that you want by using CSS rules.
9
+
```HTML
10
+
<ahref="google.com"style="color: red; font-size: 14px;">Go to google</a>
11
+
```
11
12
12
-
That is it! The rest is just semantics! 😁
13
+
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.
13
15
14
-
Look at this example:
16
+
To apply styles you always have to follow thеse steps:
15
17
16
-
```HTML
17
-
<style>
18
-
a {
19
-
/* change this style to yellow */
20
-
color: pink;
21
-
}
22
-
</style>
23
-
<ahref="https://google.com"target="_blank">Click me to open google.com</a>
24
-
```
18
+
1. Read the HTML and pick what element you want to decorate to apply CSS to it.
19
+
2. Apply the style with the `style` attribute as above.
20
+
21
+
That is it! The rest is just semantics! 😁
25
22
26
-
We have an HTML anchor `<a>` that takes people to google.com when clicked.
27
-
We use CSS to tell (selected) all the anchor tags and make then pink.
28
23
29
24
## 📝 Instructions
30
25
31
-
Paste this code on your website to see the results.
26
+
1. Within the `index.html` file, create the basic structure of an html page with the appropriate `<html>`, `<head>` and `<body>` tags.
27
+
2. Inside of the body of the page, create an `<h1>` tag that reads "HELLO WORLD!!!".
28
+
1. Set an inline style to change the text color of the tag to `color: orangered` and give it a solid red border of 1px.
29
+
32
30
33
-
##💻 Preview
31
+
### 💡 Hint:
34
32
35
-
It should look like this:
33
+
- A convenient way to import the basic html structure of your web page is to just type an exclamation mark `!` and select the emmet option that will pop up in Gitpod.
34
+
- Read how to apply borders here: https://www.w3schools.com/css/css_border_shorthand.asp
35
+
- For this exercise, do NOT use `styles.css` file or `<style>` tag.
36
36
37
-
Inline styles are a very bad idea unless you have no other choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because you may need to use them at some point.
0 commit comments