-
Notifications
You must be signed in to change notification settings - Fork 5
/
style.css
89 lines (69 loc) · 3.42 KB
/
style.css
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
/*
Hi! Welcome to style.css. CSS stands for cascading style sheet - we recommend http://www.w3schools.com/css/ for the nitty gritty of CSS syntax. But basically, what you should know is:
- Which part of a web page the css is referring to is specified by either ids or classes in the .html file. For instance, a div with id="signup" will be styled by the element #signup below. # means ID, and . means class in .css files.
- Elements inside of other elements inherit their style, unless the .css file specifies otherwise. For instance, if you have the html: <div id="outside">Hello <div id="inside">world!</div></div>, and 'Hello' is specified in css (#outside) as being in bold font, 'world!' will also be bold unless you add a #inside element to your css.
- Fun style elements to play with that won't mess with the structure of the page include color, font, and background. When playing with colors, you can consult http://hexcolor.com/. Colors can be specified by name ("black", "white") or hexadecimal notation (#000000, #FFFFFF).
*/
/* Imports the font that is used on this page. */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
/* This section sets the defaults for the page, but you may never see changes here if they are overwritten by the div elements below. */
html, body {
margin: 0; /* Margin is the amount of space between the border of an element, and the elements outside it. */
padding: 0; /* Padding is the amount of space between the border of an element, and the elements inside it. */
}
body{
font: 130%/1.3 TrebuchetMS,Arial,sans-serif; /* Default fonts */
text-align: left; /* Alignment of the text */
color: black; /* Main text color */
background: grey; /* Main text background color */
padding-bottom: 20px; /* You can set padding or margin for one side of an element at a time */
}
a { /* A stands for link, so this section is setting the default characteristics of links. */
color: #C41E3A;
text-decoration: none;
}
h1 { /* This styles the header at the top of the page */
font: bold 2.1em 'Source Sans Pro',Arial, Sans-Serif;
text-align: left;
color: white;
}
h2 { /* This styles the headers within the page */
font: bold 1.1em 'Source Sans Pro',Arial, Sans-Serif;
padding: 0;
margin: 0;
}
/* This section alters the appearance of all divs with the class "section", which is all of the divs in our html file. We can use it to specify style elements that we want to be the same accross divs. */
div.section {
padding: 1em;
margin-bottom: 0;
text-align: justify;
}
/* If we want the divs with ids plan and more to look the same, we can put them together */
#plan, #more {
background:#00B080;
color: red;
font: 'Source Sans Pro',Arial, Sans-Serif;
background-image: none; /* replace none with url('image-url') to set a background image */
}
/* You can alter the links within a div with the following syntax */
#plan a {
color: #C41E3A;
}
/* This alters the appearance of the div with id="signup". */
#poem {
height: 110px;
background: purple;
text-align: center;
}
/* This alters the appearance of the div with id="whoweare" */
#whoweare {
background: white;
color: black;
}
/* This alters the appearance of the div with id="minileft", the div containing the images */
.minileft {
float: left;
height: 100%;
margin-bottom:1.5em;
margin-right: 1em;
}