Designing Your Blog with HTML and CSS
January 15, 2018
Hey guys!
This is going to be quite a long and detailed post on some of my favorite go-to easy CSS designs that could be easily implemented on your page so buckle up.
So on my previous post, HTML Made Easy, I had briefly discussed about the four essentials or rather necessary elements in HTML and on this post you will be able to actually see that it is indeed the building blocks of a webpage. We will be tackling a bit of CSS (Cascading Style Sheet) here and I will do my best to explain them in an easy to understand lingo so that you can follow.
Courtesy of my go-to site whenever I forget or want to go back on a certain topic, I have gathered three CSS designs that are easy to manipulate and understand even for those bloggers that are inexperience when it comes to coding.
I have provided pictures for you to see how and what it's going to look like so that you can be guided visually.
1. CSS Box Model
CSS Box Model refers to a box that wraps around an HTML element as you can see on the picture below on the left side.
Because of my previous post, you may be more familiar with this arrangement:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<head>
<body>
</body>
</html>
But now that we're going to be manipulating an HTML element, we have added the <style> </style> element for us to put our CSS codes in. This element would go between the <head> </head>, so it is going to look something like this:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
</style>
</head>
<body>
</body>
</html>
Now that we have that covered let's talk about what we are going to put in between those <style> </style> element for our CSS Box Model to work.
div{
background-color: #40a977;
width: 300px;
border: 7px;
padding: 10px;
margin: 25px;
}
- background-color → Whatever value you put in this property, may it be #40a977 (green), blue, red, etc., this is what the background color of your box is going to be.
- width → This is the width of your box. The longer (500px and up) the width, the longer your box is going to be horizontally.
- border → This goes around your box or rather the padding of your box. The thicker it is (10px and up) the more visible it is going to be.
- padding → This is the space between your text and the border.
- margin → This is the area around the CSS Box Model.
- div → This is the selector. We will be using this on an HTML element that we want to style.
Now that that is out of the way, let's move on to our final step which is incorporating that CSS code into our HTML.
Under the <body> </body> we will write <div> </div>, and in between those tags is where our text will go.
And that's it, you have your CSS Box Model!
2. CSS Outline
CSS Outline is a line that is drawn around our <p> </p> or paragraph. There are ten types of this but here I'm only going to show you three of my personal favorites which are the dashed outline, groove outline, and outset outline.
Here is the list of the remaining types of outline:
- dotted
- solid
- double
- ridge
- inset
- none
- hidden
This is fairly simple to make because the CSS code is just the same except for a few parts. Just add the following between your <style> </style> element:
p.outline type{
outline-style: outline type;
}
You just need to change the outline type to whatever outline type you wish for it to be.
Now for our HTML it's as simple as the CSS one you just have to change a few parts as well. Between the <body> </body> tags add the following:
<p class="outline type" align="center/right/left"> your text goes in between this tags </p>
You can align your text on the center, right, or left.
And that's it, you have an outline!
3. CSS Font-Variant
"The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text." -w3school
p.small{
font-variant: small-caps;
}
<p class= "small"> your text goes in between this tags </p>
3 comments
This was so informative, definitely going to take some tips!
ReplyDeleteThank you so much! Glad you like it :)
DeleteThank you again for all the knowledge you distribute,Good post. I was very interested in the article, it's quite inspiring I should admit. I like visiting you site since I always come across interesting articles like this one.Great Job, I greatly appreciate that.Do Keep sharing! Regards,
ReplyDeleteBullet Journal Extension