WORDPRESS 18 Style.css and CSS introduction

The best way to learn CSS — like so much else — is to start practicing right away. Unlike XHTML and PHP, you do not need to work with the central template files. Also, there is no basic concept to understand. Just try it! Favorite trial and error also works here.

Before you begin, there should already be some information in your style.css file. Let's find out right now what it means.

• The first line is the name of the topic; it speaks for itself.
• The second line is the location of the page of your topic or the place where it is always available. If you are creating a theme for yourself, not for public use, forget about it.
• The third line is the topic description.
• The fourth is the version number, which is important, especially when you release updated versions of your theme for public use.
• The fifth and sixth lines are respectively the name of the author and his home page.
• The signs / * and * / are placed so that information about your topic does not affect the rest of the page. This is a CSS comment. When you enter CSS code to style your web page, you may need to add comments in one place or another to avoid confusion. But you do not want these comments to affect the code? To do this, you must use the characters / * and * / to make comments invisible to the browser.

Here is the processed information about the topic:

Step 1 :

At this stage, you need all the browsers that you want your theme to display correctly: Mozilla Firefox , Internet Explorer (ideally versions 6, 7 and 8), Opera , Google Chrome and Safari - all to test the theme under them. Different browsers sometimes perceive CSS differently. It is best to test the theme in as many operating systems and browsers as possible. If you are as lazy as I am - test the theme only in Firefox :-)

Step 2 :

Open the style.css file in the editor and paste the following code there:

As with XHTML or PHP, add padding to organize code:

Save the style.css file, refresh the browsers to see the changes (remember that you work with several browsers).

Consider that body {} is a tag, and everything between curly braces is attributes and values, as in XHTML. { - this is open. } Is to close. Inside curly brackets { and }, a colon means the beginning of a value , and a semicolon - the end (I use terms from XHTML and PHP "tag", "attribute", "value" for CSS, so that it is easier for you; in fact, PHP and CSS uses different terms, for example: parameters, selector and property).

Before proceeding, I will explain why you used the body selector {} - because you are working on styling the base part of the web page - with the < body> tag . You do not stylize the <header> tag, because there is nothing to stylize. All that is displayed on the web page is in the structure of the < body> and </ body> tags.

Later you will work on the DIV style of the block with the ID “header” and each block for which you will need to specify your own style, which is the most common one.

Let's take a closer look at our code :

margin: 0; - cancellation of the default indentation inside the body tag. If you want the indents to be present, or even make them bigger, change 0 to a larger value: 10px, 13px, 20px, etc. PX is abbreviated pixel. When the field is "0", you do not need to put px after zero.

In the image below, red is the default indent applied to the body tag:

After changing the indent to margin: 0; indents will disappear.

font- family: Verdana, Helvetica, Georgia, Sans- serif; - indicates which font to use to display the item. The fonts that follow after the first, in this case Verdana , are alternative. If the visitors of your page do not have the Verdana font installed on their system, the browser will search for the font Helvetica , then Georgia , then Sans- serif . You can find a list of installed fonts in the system fonts folder of your operating system;

font- size: 12 px; - font size, here everything speaks for itself. Increase or decrease to see changes;

text- align: left; - aligns your text to the left, change it to align to “right” or “justify” to see the changes;

vertical- align: top; - Checks whether everything starts from the top of the page. If you change this item to align to the middle or bottom edge, the contents will go down;

background: # ffffff; means white background. The color has its own code in HTML. For example, #ffffff is a white code. # 000000 is the black code.

color: # 000000; means the text will be black.

In our course, we will learn the basics of CSS at a sufficient level so that you can create a simple WordPress theme. If you want to go further and learn more about CSS, you can do it yourself, outside of our course, this tutorial or this tutorial will help you learn it.