WORDPRESS 21 Post Formatting

Today I will tell you how to format all the elements of the post, for this you only need the style.css file. Open it in the editor and get started.

Step 1

Get rid of most margins and paddings - enter the following code above body {} in style.css :

• Please note we set the margin: 0; instead of margin: 0 0 0 0; . When all parameters are the same, put one number. Same for padding .
• Save the file. Refresh your browser. Don't worry, now you can add margins and paddings exactly where you want them to appear, and not where browsers place them by default.

By the way, I usually say, put this or that, above or below this or that. Know that this is optional. You can paste the code where you need it. I just cite as an example my own way of organizing code.

Step 2

Give the H1 style a heading, insert these lines under the body {} :

• font-family: Georgia, Sans-serif; changes the font of the H1 heading from Arial (got to him from the body) to Georgia. If Georgia is not installed on the system, the browser will display Sans-serif;
• font-size: 24px; Well, everything is clear without explanation. Note, however, that when you set the font size to 12px inside body {} , the H1 and H2 tags do not follow this change. The fact is that the header tags have their own rules. To make changes to them, you need to set individual parameters for their styling.
• padding: 0 0 10px; means 10-pixel bottom padding. This will add a gap between the blog title and its description. Save, refresh browsers, here is the result:

Step 3

Paste the following code under #container {} (save the changes and update the browsers after entering each block of code to see the changes step by step):

You have added 10-pixel padding at the top and bottom of each DIV with the post class.

.post h2 is not a general rule. It is aimed specifically at the H2 subtitles inside the post DIV. This does not affect the H2 subheadings in the sidebar. This is called style inheritance .

We have increased the line spacing inside the post block.

Step 4

Insert these lines under a: hover {} :

10-pixel upper indent for each paragraph tag.

Step 5

Paste under .entry {} :

Remember the paragraph tag with the postmetadata class? Styling a separate paragraph tag and a DIV is almost the same. You can assign a frame (border), padding (margin and padding) and background (background) to any of the tags.

To the postmetadata paragraph tag you have added a gray frame and a 10-px upper indent to it.

border-top means only the top of the frame. border-left means only the left side of the frame, etc. Only border , without -top , -right , -bottom or -left means a frame on all sides. For example, border: 1px solid #ccc; This means that you have applied a gray color and a width of 1 pixel to all four sides of the frame.

Step 6

Paste this code under p.postmetadata {} :

Test case: for DIV, a navigation that includes the Next page and Previous page links , we just:

• added 10 pixel upper indent
• changed its font size to 14 pixels
• highlighted bold
• increased line spacing to 18 pixels

That's all for today. If something is not clear or I have poorly explained - write in the comments.