Add Background Colors, Gradients and Text Color to Stylesheet.
Background Color
- background-color: white; is added to the body.
- background-color: #4682b4; (Steelblue) is added to the .navbar.
- After making the entire body white, I styled the .navbar to be steelblue and the article section to have a white background. I styled the header and footer with gradients. Steelblue(#4682b4), light steelblue(#b0c4de) and white are the new colors I have changed to for the background. The old colors were black, purple and #841584(The shade of purple I used in the gradients).
Gradients
background-image: linear-gradient(#4682b4, white); is a gradient and was added to the header. background-image: linear-gradient(white, #4682b4); is a gradient and was added to the footer.
- Gradients are 2 or more colors that merge. You can find a complete page on gradients at W3 Schools. W3 schools is a great resource. They are who tells the browser makers how the code is suppose to work. The header gradient has the steelblue on top and the footer has the steelblue on the bottom. You can put any color you want in those.
- Also, In case the users browser does not support gradients, include a alternate background-color like I did below. Put background- color before the gradient.
Color
- color:white; makes text white and was added to the .navbar.
- color:black; makes text black and was added to the article section, header and footer.
- I went ahead styled the font colors while I was doing background colors. Background and fonts have to contrast correctly especially in the sun on a mobile device. Black and white have the most contrast.
You need to add the text in bold text to your style sheet just like it is below.
body {
background-color: white;
}
#wrapper {
}
header {
background-color:#b0c4de;
background-image: linear-gradient(#4682b4, white);
color: black;
}
h1 {
}
h2 {
}
.navbar {
background-color: #4682b4;
color: white;
}
article {
background-color:white;
color:black;
}
h3 {
}
h4 {
}
.paraone {
}
footer {
background-color:#b0c4de;
background-image: linear-gradient(white, #4682b4);
color:black;
}
To see what it looks like so far Click Here(opens a new window)