/
11 HTML CSS.html
151 lines (100 loc) · 2.69 KB
/
11 HTML CSS.html
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!-- Cascading Style Sheets; desribes how elements are displayed on screen, paper, or other media; can control layout of multiple web pages at once; added in 3 ways - inline, internal, external -->
<h1 style="color: white;"><u>The Bougie Hippy</u></h1>
<!-- Inline CSS - applies a unique style to a single HTML elements; uses the style attribute of an HTML element -->
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: silver;}
</style>
</head>
<body>
<h1>*Fashion:</h1>
<p style="color: silver;">My honest take on all things fashion.</p>
</body>
</html>
<!-- Internal CSS - defines a style for a single HTML page; defined in the <head> section of an HTML page, within a <style> element -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>*Lifestyle:</h1>
<p style="color: silver;">Enjoy these awesome lifestyle hacks.</p>
</body>
</html>
<!-- External CSS - defines the style for many HTML pages; external style sheets allow you to change the look of an entire site by changing one file; add a link in the <head> section of the HTML page -->
<!-- "styles.css"
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: silver;
}
-->
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%
}
p {
color: white;
font-family: courier;
font-size: 160%
}
</style>
</head>
<body>
<h1>*Music:</h1>
<p style="color: silver;">A personalized look at my music playlists.</p>
</body>
</html>
<!-- CSS Fonts; color - text color, font family - font type, font size - text size -->
<!-- CSS Border
p {
border: 1px solid white
}
-->
<!-- CSS Padding - space between text and border
p {
border: 1px solid silver;
padding: 30px;
}
-->
<!-- CSS Margin - space outside the border
p {
border: 1px solid powderblue;
margin: 50px;
}
-->
<p id="p01">I am different</p>
<!-- The id Attribute - specific style for one special element -->
<!-- defines style for the element's specific id
#p01 {
color: blue;
}
-->
<p class="error">I am different</p>
<!--The class Attribute - defines style for special types of elements-->
<!-- defines style for the element's specific specific class
p.error {
color: red;
}
-->
<!-- External References - references external style sheets with a full URL or a path relative to the current web page -->
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
<!--uses a full URL -->
<link rel="stylesheet" href="/html/styles.css">
<!-- links a sheet located in the html folder on current web site -->
<link rel="stylesheet" href="styles.css">
<!-- links a sheet located in the same folder as the current page -->