Hello lovely bookworms! Who’s ready to learn CSS?
If you haven’t had the chance to check out the previous coding post: Take a look here!
Last time I shared a brief tutorial/tips on HTML code for taking your blog posts to the next level. Today, I’m going to focus on the styling part of the codes. But before we get into the “tutorial”, let’s go over some of the definitions:
CSS (Cascading Style Sheets): Are what defines how the html will be displayed on the screen, paper, other media. It’s the styling the element will have.
There are 3 ways CSS can be added to HTML but today we are going to focus on the one Gutenberg blocks allow for: Inline CSS.
Inline CSS is when you use the style attribute within an html element. For example:
CSS for Book Bloggers
Borders
Let’s touch back onto borders. On the last post, I showed you a handful of ways to style borders around text/images. Borders are possible with a couple of values:
Border: Adds a border to the element. In this value, you must specify how thick you want it to be. 1 pixel, 2, pixels, 3…etc.
Border-Style: Will control what type of border it will be. Solid, Dotted, Dashed, Doubled, Lined, Mixed, Inset, Ridged, or Groove.
Border and Border-Style are BOTH required in order for you to see the border.
Thick Border
<p style="Border: 3px; Border-Style: Solid;"> Thick Border </p>Border-Color: Will control what color the border will display as. You can use HEX-Code (color code) and in some cases, just the name of the color.
Thick Border
<p style="Border: 3px; Border-Style: Solid; Border-Color: #ae94ba;"> Thick Border </p>Padding | Float
The Padding property is used to generate space around the elements content. Padding can prove useful for little tip boxes or spacing out paragraphs.
The Float property is used for positioning and formatting content on a page. Float has the following rules:
- None – the element doesn’t float. This is default for all elements.
- Right – Places the element to the right of it’s container
- Left – Places the element to the left of it’s container
- Inherent – Has the element inherent the properties of the parent element (we don’t need this for wordpress inline css)
While WordPress Gutenberg blocks do all of this for you, sometimes I like to modify the default it sets.
Hey Listen! Im floating to the right!
<p style="padding: 10px;background-color:#d4c7db; width:250px; float: right; margin: 0 0 15px 15px; height:150px; text-align: center;">Hey Listen! Im floating to the right!</p>Hey Listen! Im floating to the left!
<p style="padding: 10px;background-color:#d4c7db; width:250px; float: left; margin: 0 0 15px 15px; height:150px; text-align: center;">Hey Listen! Im floating to the left!</p>Background Color
To ride off the code above, let’s talk about background colors.
Background colors can help you distinguish and highlight a paragraph from all the others. It can help you design the look of your posts.
If you are on WordPress, the customization module allows you to place custom css for your entire blog. You can add css to make your blog a color that isn’t available from the list of choices your template might bring.
For a blog post, however, it’s a little more difficult and we will go over that in another post.
Highlighting a paragraph:
This is an important paragraph!
<p style="background-color:#d4c7db">This is an important paragraph!</p>Changing the background color to an image:
<figure class="aligncenter"><img src="Insert url to image here" alt="" class="wp-image-1497" style="width:50%; Background-color: #d4c7db;" "=""></figure>Changing the background to your template:
body {
Background-color: #d4c7db;
}Level UP: Shapes
This one’s a little more difficult than the others as it would require you to know a little more CSS than the average beginner.
CSS is great for making shapes. Even though WordPress gives us limitations as far as inline CSS, we can still manipulate the background colors to be a shape.
You can use these to serve as page breaks blocks for your posts or even as heading decorations. If you’re real savvy, you can even add these as decorations all over your theme. Below I share some of the simpler shapes you can make with CSS.
Circle:
<p style="background-color:#d4c7db; width:250px; border-radius: 50%; height:250px; text-align: center;"></p>Trapezoid:
<p style="border-bottom: 50px solid #d4c7db; border-left: 25px solid transparent; border-right: 25px solid transparent; height: 0; width: 150px;"></p>Triangle:
<p style="width: 0; height: 0; border-top: 100px solid transparent; border-left: 200px solid #d4c7db; border-bottom: 100px solid transparent;"> </p>The 4 snippets above are just a few that work with wordpress and a very small tip of the iceberg with what you can do with CSS in general. W3Schools is a great beginner resource as is FreeCodeCamp.
Take note, that not all website providers will allow all CSS to work so play around with it! (just like HTML)
Once again, I hope this post proves helpful or gives you ideas on what you can use on your posts/website! If you love these kinds of post, please give it a like! And let me know in the comments below if you would like to see more of these!
Thank you so much for reading <3
XOXOXO,
Jeimy