Lab3/styling.html at main · TehreemSaj/Lab3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!--
=========================================================
Name        : index.html
Assignment  : Lab 3 Exercise D
Author(s)   : Mahdi Ansari, William Arthur Philip Louis
Submission  : January 31, 2024
Description : Learning CSS.
Student Name(s): Tehreem Sajid, Zehra Zaidi
=========================================================
-->
<!DOCTYPE html>
<html>
<head>
    <title>CSS Advanced Demonstrations</title>
    <style>
        #margin-demo {
            margin: 30px;
            border: 2px solid black;
            display: inline-block;
        }

        .padding-demo {
            padding: 30px;
            border: 2px dashed red;
        }

        .container .nested-opacity {
            opacity: 0.2;
        }


        .inline-demo {
            display: inline-block;
            margin: 15px;
        }

        .block-demo {
            text-align: center;
        }

        /*
        Apply colors and float properties to the children of .block-demo.
        The first child should be red and stick to left side, the second blue and sit in the middle, and the third green and stick to right side.
        Here, you might need to look at the technique we used for the first and second children.
        */

        .block-demo > .inline-demo:first-child {
            float: left;
            color: red;

        }

        .block-demo > .inline-demo:nth-child(2) {
            display: inline-block;
            color: blue;
        }

        /* Add your css for the thrid child here. */

        .block-demo > .inline-demo:nth-child(3) {
            float: right;
            color: green;
        }

        .image-demo {
            width: 50%;
            border: 3px dotted green;
        }

        .hover-demo:hover {
            color: blue;
            cursor: grabbing;
        }
    </style>
</head>
<body style="border: 1px solid black;">

    <h2>CSS Margins with ID</h2>
    <div id="margin-demo"><span>This div must have a margin of 30px, and a solid black border of 2px.</span></div>

    <h2>CSS Padding</h2>
    <div class="padding-demo"><span>This div must have padding of 30px, and a dashed red border of 2px.</span></div>

    <h2>CSS Opacity with Nested Classes</h2>
    <div class="container">
        <div class="nested-opacity"><span>This text must have an opacity of 0.2.</span></div>
    </div>

    <h2>CSS Display Property</h2>
    <div class="block-demo">
        <div class="inline-demo"><span>I am red.</span></div>
        <div class="inline-demo"><span>I am blue.</span></div>
        <div class="inline-demo"><span>I am green.</span></div>
    </div>

    <h2>CSS Image Styling with Inline CSS</h2>
    <!-- Add a dotted green border of 3px inline. Which style will win the competition? -->
    <img class="image-demo" style="" src="images/example.svg" alt="Demo Image">

    <h2>CSS Hover Effects</h2>
    <div class="hover-demo"><span>Hover over me! My color will change to blue!</span></div>

</body>
</html>