WebDevelopment/style.css at master · wilkinsonjack1993/WebDevelopment · 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
131
132
133
/* Specificity: */
/*  - which ever element (h1 etc) style is last in css wins */
/*  - class attribues win over element styles */
/*  - id attributes win over class attributes */
/*  - in line style attributes win over id attributes. */
/* http://cssspecificity.com/ for more info*/
/* can hard override with !important */

html {
	font-family: "Times New Roman", serif; /*second one is a fallback */
}

nav, header, footer {
	display: block;
}

h3, h4, h5, h6 {
	color: chartreuse;
	text-align: center;
	text-shadow: 1px 1px 5px black;
	line-height: 1rem;
	font-family: sans-serif;
	text-decoration: underline;
	letter-spacing: 10px;
	word-spacing: 30px;
	text-transform: uppercase;

}

img {
	max-width: 100%;
	height: auto;
	opacity: 1;
	display: block;
	margin: auto;
}

.borderImg {
	border-radius: 10px;
	width: 500px;
	height:400px;
	border: 2px solid #ddd;
	padding: 5px;
}

.row {
	display: flex;
	width: 100%
}

/* makes sure after a row element, the content is reset */
.row::after {
	display: block;
	clear:both;
	content:"";
}

.col-1 {width 8.33%}
.col-2 {width 16.66%}
.col-3 {width 25%}
.col-4 {width 33.33%}
.col-5 {width 41.66%}
.col-6 {width 50%}
.col-7 {width 58.33%}
.col-8 {width 66.66%}
.col-9 {width 75%}
.col-10 {width 83.33%}
.col-11{width 91.66%}
.col-12 {width 100%}

/* grabs every single element and sizes it to the element its in */
* {
	box-sizing: border-box;
}

[class*="col-"] {
	border:2px solid red;
	padding:15px;
	float: left;
}

p {
	color: green;
}

body {
	background: red;
    background: linear-gradient(to left, red, yellow);
	line-height: 1;
	margin:0;
}


.square {
	width: 100px;
	height: 100px;
	background-color: blue;
	margin: auto;
	box-shadow 5px 3px 5px black;
}

#circle {
	color:darkred;
	font-size: 40px;
}

/* properties apply to all nested levels within list */
ul li {
	color:green;
	font-size: 20px
}

/* Color only applies to first level of list */
ul > li {
	color:yellow;
}

/* navbar */
nav {
	width: 100%;
	margin=0;
}

nav ul {
	background-color: #eee;
	overflow: hidden;
	margin:0;
	padding: 0;
}

nav ul li {
	list-style: none;
}