Article CSS
Last updated
Was this helpful?
Last updated
Was this helpful?
So, now let's take a look at our article and see if we can make it look like this.
A common naming convention, if the project has a single stylesheet file, is to name it styles.css. This isn't a requirement, and most likely on larger projects, there will be multiple stylesheets that would be named to align with the area of the website that it is styling. If you are going to have multiple stylesheets, it is also common to create a folder to store them like the images and videos folders. For this exercise, create a folder called css, and add a single stylesheet styles.css file. Then add a <link> element to reference the styles.css file.
If you compare the two screen captures below, you'll notice that the final version has the content inset from the edges of the web browser.
How can we achieve this in our article?
To set the font-family we want to use for our article we should set it on the body element. The topic page below goes over how fonts are set. For this article, let's set the font to use a free one provided by Google, called "Poppins".
Let's also change the default font size, which is 16px, to 18px.
Now, the font is using the Poppins font. You can tell that it no longer has the serif typography.
Next, we want to add some space between each of the jellyfish sections. Typically we use margins for this, instead of padding. Let's add a 60px margin at the bottom of each of these sections. You can now see the nice spacing between the end of the Orange Jelly section and the start of the Yellow Jelly section.
Let's start with the profile picture up in the title section. That's typically called an avatar, when it's small round profile photo. Ours isn't currently small and round, so let's work on that.
First, we need to make it the correct size. Let's add a class with the value "avatar", so we can add some styles.
set its width and height to 30px
make the image round.
Change the font-size to 32px
We want to make a couple of modifications to the sub-title.
change the font size to 24px
remove the top margin on the sub-title and the bottom margin on the h1, so that there is less space between the h1 and the sub-title.
set the font size to 32px
set the text color to the hex value "#e7131a"
remove the margin on the top of the h1 to reduce the space between the heading and the topic link.
We want to get each of these individual elements to line up horizontally on the same line and adjust the text color and font weight a bit.
the address element is a block element by default. change it to be inline so that it does not return to the next line.
set the text color for the address to be the same color as the topic-link.
set the font size to be 11px for both the address and the time elements
set the font weight to be 600 for both the address and the time elements
adjust the avatar styles to make it center vertically and add a margin on the right of 5px.
First, change the color of the links to the same red as the topic-link .
Next, we want to add some borders to make it look like this.
For each of these examples, I am just showing the specific style related to the properties I am discussing. For example, when I show the body element CSS rule for the font, I omitted the margin property. That way the code samples can just focus on the relevant CSS properties. But the final CSS file needs to contain all of the combined properties.
First, I'm going to add a class="jelly" to each of the detail sections. Then I'm going to create a CSS rule for that class to add a margin of 60px to the bottom of each section.
Make sure your article is looking close to this.
Check-in your changes and push them to GitHub (which will automatically update the Netifly site)
git commit -am"finished sections"
git push
Submit your assignment by just entering your Netifly url.
