Web-Dev/select.css at master · Prithivi-Raj/Web-Dev · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/* 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;


}

h1:hover {
	color: blue;
}


/* Make all <h2> elements orange */
h2{
	color: orange;
}


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

li{
	color: blue;
}


/*Change the background on every paragraph to be yellow*/

p{
	background: yellow;
}


/*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;
}


/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/

#special{
	border: 2px solid blue;
}


/*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: grey;
}


/* 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:20px;
}


/*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:checked{
	margin-left: 50px;
}

label{
	text-transform: uppercase;
}

/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/
#special:first-letter {
    color: green;
    font-size: 100px;
}


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


/*Make the <h1> element's color change to blue when hovered over */


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