Web_Dev_Code/selectors.css at master · Madhav-Jindal/Web_Dev_Code · 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
105
/* Style the HTML elements according to the following instructions.
DO NOT ALTER THE EXISTING HTML TO DO THIS.  WRITE ONLY CSS!

/* Give the <body> element a background of #bdc3c7*/
body{
    background: #bdc3c7;
}


/* Make the <h1> element #9b59b6*/
h1{
    color: #9b59b6;
    font-family: Roboto;
}

/* Make all <h2> elements orange */
h2{
    color:orange;
    font-family: Roboto;
}

/* Make all <li> elements blue(pick your own hexadecimal blue)*/

li{
    color:#3355ff;
    font-family: Roboto;
}
/*Change the background on every paragraph to be yellow*/
p{
    background: yellow;
    font-family: Raleway;
    font-size: xx-small;
}

/*Make all inputs have a 3px red border*/
input{
    border:3px solid red;
}

/* Give everything with the class 'hello' a white background*/
.hello{
    background: white;
    font-family: Roboto;
}

/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
#special{
    border:2px solid cornflowerblue;
}

/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
div p{
    font-size: 25px;
}

/*Make only inputs with type 'text' have a gray background*/
input[type="text"]{
    background: gray;
}

/* Give both <p>'s inside the 3rd <div> a pink background*/
div:nth-of-type(3) p{
    background: pink;
}

/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
div:nth-of-type(3) p:nth-of-type(2){
    border: 5px solid white;
}
/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/

div:nth-of-type(3) em{
    color:white;
    font-size: 25px;
}

/*BONUS CHALLENGES*/
/*You may need to research some other selectors and properties*/

/*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/
input[type="checkbox"][checked]{
    margin-left: 50px;
}


/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/
label{
    font-variant-caps: all-small-caps;
}

/*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/
#special::first-letter{
    color: green;
    font-size: 100;
}

/*Make the <h1> element's color change to blue when hovered over */
h1:hover{
    color: blue;
}

/*Make the <a> element's that have been visited gray */
a:visited{
    color: gray;
}