# CSS Selectors & CSS Override & CSS Multiple Classes

WARNING

Please prepare one folder for this Workshop

# project structure

+-- index.html
+-- style.css

1
2

# Basic CSS Selectors

style.css

.my-style{
    color: red;
}

p{
    color: violet;
}

a{
    color: #4efced;
}

1
2
3
4
5
6
7
8
9
10
11

# CSS Override

index.html

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p class="my-style">HelloWorld</p>
    </body>

</html>

1
2
3
4
5
6
7
8
9

index.html

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p class="my-style" style="color: yellow;">HelloWorld</p>
    </body>

</html>

1
2
3
4
5
6
7
8
9

# CSS Multiple Classes

...
    <div class="container textcenter">
        ...
    </div>
...

1
2
3
4
5

.container {
    background-image: url("https://images.unsplash.com/photo-1562874724-b33411b38141?ixlib=rb-1.2.1&auto=format&fit=crop&w=2801&q=80");
    height: 100%;
    background-position: center;
    background-size: cover;
}

.textcenter {
    text-align: center;
}

1
2
3
4
5
6
7
8
9
10

# Workshop

# Simple Profile (Continues)

Preview Full HTML

# project structure

+-- index.html
+-- style1.css

1
2

index.html

<html>

<head>
    <title>Simple Profile</title>
    <link rel="stylesheet" href="style1.css">
</head>

<body>

    <div class="container textcenter">
        <h1 style="color: aliceblue">Hello My Name is Raknatee </h1>
        <p>Nice to meet you</p>
        <p style="color: yellow">:D</p>

        <a href="https://www.facebook.com/raknatee.chokluechai?ref=bookmarks">
                This is my Facebook
        </a>

        <img src="profile.jpg" style="width: 100px">
    </div>

</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

style1.css

.container {
    background-image: url("https://images.unsplash.com/photo-1562874724-b33411b38141?ixlib=rb-1.2.1&auto=format&fit=crop&w=2801&q=80");
    height: 100%;
    background-position: center;
    background-size: cover;
}

.textcenter {
    text-align: center;
}

body {
    margin: 0;
}

p {
    color: violet;
}

a {
    color: #4efced;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21