Creating my blog

Today I wanted to create a blog so I could share my experience with others, so I started working on i.

The top bar

I started by creating the top bar by creating a div and a link to my blog in it

<div> <a href="https://blog.charr.cc">Charles's Blog</a> </div>

then added a class to the div and made its background color yellow and set its padding

.nav { <!-- make the color yellow --> background-color: rgb(236, 199, 64); <!-- add the padding --> padding: 10px; padding-left: 50px; }

and because I chose to make the title link to my blog, I had to set the link look like a header. So I made it change all of the links in the class turn into a header like this:

.nav a { <!-- make the font big and bold --> font-size: xx-large; font-weight: 600; <!-- change the color of the text --> color: white; <!-- remove the underline from the text --> text-decoration: none; }

Simply after that, the top bar looks nice enough!

The content

I could just skip this step and be lazy, but it would look too unpleasing to the eyes so I added some padding to make it not touch the top bar, left border, and bottom

.content { <!-- This makes the items in the content div go left 25 pixels--> padding-left: 25px; <!-- This makes the items in the content div not touch the top bar --> margin-top: 25px; <!-- and finally, this makes the items in the content div not touch the bottom --> margin-bottom: 75px; }

Dividers

So to be honest, I got a little bit distracted and made dividers before more important stuff like text and titles, but I ended up liking how it looks and feels in the page. For the divider, I wanted it to have rounded edges on the left and cross over to the other side. So I first added the rounded edges like this:

.content .divider { border-top-left-radius: 2.5px; border-bottom-left-radius: 2.5px; }

then I made the width of the divider fill all of the horizontal space and set a fixed height of 5 pixels

.content .divider { width: 100%; height: 5px; }

and after that I added the background color for it

.content .divider { background-color: rgb(40, 40, 40); }

Headers

I didn't really have to do anything with the headers, but I still wanted it to be a little bit more to the left so I implemented it

<!-- I told it to apply the style all of the headers in the content div --> .content h1, h2, h3, h4, h5, h6 { margin-left: 25px; }

The text

For the text, I wanted it to be a very dark gray and to be a bit more to the left than the headers like this:

.content p { <!-- The very dark gray --> color: rgb(40, 40, 40); <!-- This makes it 25 pixels more to the left than the headers --> margin-left: 50px; <!-- I added this to make the text not touch the right border --> margin-right: 10px; }

The code blocks

I needed to show code in my blogs so I must add code blocks to it. I went for the complicated route and used an element that ignores parsing have the text inside. Then the element's class makes it monospaced

.content .code { font-family: monospace; }

It was still not enough, so I made it have a background color with rounded edges only on the left like the dividers we made

.content .code { background-color: rgb(240, 240, 240); border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

But there was still a problem, the text does not wrap and will continue to overflow the page. So I messed around and found this property

.content .code { overflow-wrap: break-word; }

Links

For links, I made it have a dark yellow color and no underline like this

.content a { color: rgb(164, 132, 18); text-decoration: none; }

Conclusion

After all of that, I was pretty much done with the basic features for my blog. I enjoyed my practice with css and I hope I will make it more responsive to different width and heights later