Adding Style
Reading
Adding styling
Now that we have the basic structure of our page, we can start to apply styling to the page. The goal here is to turn the plain page with the browser's default style into something that looks much more like our original mockup.
HTML is the skeleton, CSS is the skin
To use an analogy, our HTML is like the skeleton of our body. It provides the foundation but does not make us look like who we are. For that, we need CSS to apply the style to this skeleton.
Return of the blank page problem
When starting to style a page, we find that we may have the same question about how to get started. Here we suggest again starting at the top of the page and moving down through the content.
As we are moving down through the page, we may not make every element perfect but perhaps iterate through the page several times. Starting with broad styles such as margins and padding, and then refining our style with features such as box shadows and colors.
Starting with the font and main background and text colors
Noticing there is a specific font choice for the page, we can incorporate that at the start of our CSS file.
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Lato:wght@400;700&display=swap');
We also notice that the background color of our page is not the default bright white but a more muted version. We also notice that the text color is not a solid black but a slightly lighter shade.
To apply our font choice and colors across all elements, we will add this to our
body
style:
font-family: 'Lato', sans-serif;background-color: #eee5e9;color: #2b303a;
Normalizing things
We noticed that even with our plain HTML that the browser carries some styling
of elements. Paragraphs have a default margin, h1
through h6
have varying
font sizes. You may also notice that different browsers have slight variations
in these styles.
To work around these variations, developers have shared some CSS
files that
normalize the styles between browsers. These settings are shared for us to
use. The project we will use to normalize CSS between browsers has this to say:
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
To use this we add this line to the beginning of our CSS file:
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
Styling the header and footer
The header and footer have their own background color, text color, and slight
padding. Since we used the header
and footer
elements to enclose these we
can apply this CSS.
header,footer {background-color: #2b303a;color: #eee5e9;padding: 0.5rem;}
We also turn the navigation elements in the header into links. Since we don't
yet have a destination for these links, we'll use the placeholder #
, which
will refer to the current page.
<li><a href="#">Home</a></li><li><a href="#">Our Animals</a></li><li><a href="#">Blog</a></li><li><a href="#">About</a></li>
Main section indent
We notice on the mockup that the part of the page that isn't the header or the footer is slightly indented.
To achieve this, let's wrap this part of the page in a <main>
tag. That is,
our body
will only have three child elements, header
, main
, and footer
,
with all the other content contained within.
Once we do this, we can apply some minor styling to the main
element.
main {padding: 0.5rem;}
Lord Vader Former Handle Anakin -- or Lord Voldemort Fears Hogwarts Alumni
Looking at the details of the page, we want to style the links of the page. We
will apply pseudo-selector styling to the <a>
elements of the page. That is
we, will format the attributes of these links:
- Link
- Visited
- Focused
- Hover
- Active
CSS order is important, we will ensure that we define them in this order. Thus the mnemonic above helps us to remember all of the pseudo-selectors and their proper order.
Here we add text-decoration
and color
to indicate visual styling and colors
for links. We also define a slightly different style for links in the header.
a:link,a:visited {text-decoration: none;color: #d64933;}a:focus,a:hover {text-decoration: underline;}header a:link,header a:visited {color: #92dce5;}
Lists
We are using lists in a few places and need to remove the standard styling queues the browser provides. We also notice that the text in the header is always in uppercase, and we can apply a text transformation to ensure that this is always true.
ul {padding: 0;list-style: none;}header li {text-transform: uppercase;}
Headers
Looking at the various headers in the application, we notice that they apply a slightly different font choice and weight. They also lack the margin the default browser is applying.
h1,h2,h3,h4,h5,h6 {font-family: 'Calistoga', serif;font-weight: 400;margin: 0;}
Styling the blog article
The blog articles contain specific styling, so we can apply those.
article {background-color: #ffffffdd;border-radius: 0.25rem;padding: 0.5rem;margin: 0.5rem auto;box-shadow: 2px 2px 0.5rem #7c7c7c;}article h3 {margin: 0 auto 0.5rem;}article p {font-size: 0.75rem;margin: 0.5rem 0 0 0;}
Formatting the content in the footer
Let's apply some styling to the labels in the footer.
label {display: block;text-transform: uppercase;font-weight: bold;font-size: 0.75rem;letter-spacing: 0.05rem;color: #7c7c7c;}
By making the labels into display: block
, we allow them to fill the line they
are on. We transform them into uppercase, apply a bold weight, make the text
slightly smaller, increase the letter spacing, and give them a slightly
different text color.
Next, let's format the inputs in the form.
input {color: #2b303a;width: 100%;border-radius: 0.25rem;border: none;padding: 0.5rem;}
Here we make the text inside the input box take on a specific color, make the inputs take up 100% of their parent's width, add some border-radius to the input themselves, remove the border, and apply some inner padding to give the text some visual separation.
However, when we do this, we also format the form button. We can reapply the normal button style by adding:
input[type='submit'] {width: auto;}
We can also format the button items for "Sign up" and "Donation" with the following:
input[type='submit'],button {font-family: 'Calistoga', serif;background-color: #d64933;color: #eee5e9;border: none;padding: 0.25rem 0.5rem;border-radius: 0.25rem;}
This applies a different font, sets the background and text color, removes the borders, applies padding, and some border-radius.
To apply the style to the heart in our text, we will wrap it in a
<span class="hearts">
and then apply this style:
.hearts {color: #d64933;text-shadow: 0 0 0.5rem #d64933;font-size: 1.2rem;}
Styling images
Noticing the featured images have a border and shadow, we would like to style them.
To do so, we'll change this markup:
<img src="http://placekitten.com/640/480" alt="An Animal" /><img src="http://placekitten.com/640/480" alt="An Animal" />
to this:
<div class="feature"><figure><img src="http://placekitten.com/640/480" alt="An Animal" /></figure><figure><img src="http://placekitten.com/640/480" alt="An Animal" /></figure></div>
We add the <div>
to add the feature
class to this section of the page. This
allows us to style the contents specifically. We then wrap each of the <img>
with a parent <figure>
, which we will use to apply the padding and the
box-shadow.
figure {margin: 0;}.feature figure {margin: 0.5rem auto;padding: 0.5rem;background-color: #fffffd;border-radius: 0.25rem;box-shadow: 2px 2px 0.5rem #7c7c7c;}figure img {width: 100%;}
Better, but not yet perfect
While the page is much better with an application of CSS, it is not yet exactly
what we want. Next, we will look at adjusting the general layout of the page and
certain elements within. To do this, we will be using CSS flexbox
and CSS
grid
techniques.
We should also remember that better but not yet perfect
is a good goal to work
towards when dealing with CSS. Often we will feel like poor Peter Griffin in
this image:
If we seek to incrementally improve our CSS, apply updates without adding extraneous markup, and review each change, we can add style to our pages without losing our patience.