1 Minute HTML tutorial - id and class with
24
1 Minute HTML id and class with <style>
-
Upload
rimaoka -
Category
Technology
-
view
238 -
download
1
Transcript of 1 Minute HTML tutorial - id and class with
![Page 1: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/1.jpg)
1 Minute HTML
id and class with <style>
![Page 2: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/2.jpg)
using id and class,
you can style elements
![Page 3: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/3.jpg)
![Page 4: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/4.jpg)
both is <h1> …
![Page 5: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/5.jpg)
… but you can style
only the one you select
![Page 6: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/6.jpg)
Let’s see how
id works
![Page 7: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/7.jpg)
![Page 8: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/8.jpg)
![Page 9: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/9.jpg)
id is an attribute
![Page 10: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/10.jpg)
Then you define
style for the id
![Page 11: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/11.jpg)
style for an id
starts with “#”
![Page 12: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/12.jpg)
![Page 13: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/13.jpg)
Only the one with the id
has the style
![Page 14: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/14.jpg)
![Page 15: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/15.jpg)
Let’s see how
to use a class
![Page 16: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/16.jpg)
![Page 17: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/17.jpg)
Multiple elements
with the same class
![Page 18: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/18.jpg)
Multiple elements can have
the same “class”, but….
![Page 19: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/19.jpg)
only a single element can
have the same ”id”
![Page 20: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/20.jpg)
Then you define style
for the class
![Page 21: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/21.jpg)
style for a class starts with “.”
![Page 22: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/22.jpg)
style for a class starts with “.”
(style for an id started with #)
![Page 23: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/23.jpg)
![Page 24: 1 Minute HTML tutorial - id and class with](https://reader034.fdocuments.us/reader034/viewer/2022042723/587d6fc81a28ab32318b78c5/html5/thumbnails/24.jpg)
Only the elements with the class
get the style applied