When you start to learn web development, it's always hard to find a basis. In web development, it's easy at all - everything moves from HTML and CSS.

When you want to create sites using the WordPress Platform, for starters, you need basic knowledge of terms from HTML, which we will take as a default to know. Next, in order to stylize your WP site, you need to learn the basics of CSS styles, which are the following.

1. BASIC CONSTRUCTION

Formatting is the first thing you need to learn when moving into CSS waters, and there are two ways.
When HTML is the first language to learn, when creating WordPress sites, it is usually easiest to learn the CSS syntax in the same way as in HTML. The basic CSS structure looks like this:

This structure is sufficient when you do not apply too many styles to the elements on the site, but when you get a little better acquaintance with CSS, things will surely get a little complicated when there is a need for more elements.

For this reason, it will be easier for you to organize things like this:

An example of an image consists of the basic CSS elements: class, ID, selector, property, and value. Properties and values together make a declaration. You've probably wondered where to write all these things in WP files.

Specifically, when you install WordPress, you need each file that ends in .css. Among them, style.css is the main, and most of it changes color, fonts, basic images, as well as the layout of elements within the theme.
When you make changes to a file named custom.css, they are usually applied to the entire topic and change its existing styles.

When you install the theme’s plugin, you will also see their CSS files that you can also stylize and customize.

2. SIMPLE SELECTORS AND PROPERTIES

The basic selectors are, for example, h1, h2, h3 for titles and sub-headings, p is for the text of a passage, and properties are, for example, font-family and background-color.

You can also see all the changes you make without creating your own WP blog. For example, on the w3schools website you can try out all the changes in the code, find a lot of information on CSS, and many useful examples - just click the Try it yourself button and test in the new tab that opens.

Be sure to keep pages about HTML and CSS colors. It will be useful to you.

3. REMEMBER THE BOX MODEL

Although nowadays you can easily get rid of everything, remembering this model will be very useful to you. The basic layout of elements in CSS is shown in the so-called the box model, in which the following elements are displayed: content, padding, border, and margin.

4. LEARNING FROM EXPERIENCE

Since learning through experience is the best way to identify and remember well, it would not be bad to try to modify some basic themes, such as White Spektrum, Simpler, Founder or Elucidate, which are all free and can be downloaded through the wp site. Through them, you will learn exactly how some small changes can be reflected on the entire theme and sometimes have unwanted consequences.

5. CHANGE THE WIDTH AND HEIGHT OF CONTENT

When you install one of the above themes, you can start playing with the arrangement - by changing the width and length of the space in which you place the content or the selector. This, in fact, leads us to the next step: positioning the zones and changing their layout in themes.

6. POSITIONING

Now that we've found easier things, we need to get a little complicated. Positioning and float properties are just some of the things that you need to learn if you want to make a good layout of elements.

Define where to find (header, footer, sidebar, main content area) with the help of CSS grid system.

7. ADVANCED CSS

Further, for more advanced CSS knowledge, you need to learn the following:

    - What are pseudo-classes
    - complex selectors
    - CSS3 animations
    - responsive design (CSS3 media queries)
    - transformation
    - at-rules
    - gradients.

With the help of all these elements, the theme you are designing will finally start to get the desired look, where you can still practice new skills.

8. COPY SOME SITES

Another exercise that can be of great benefit to you is copying. Do not use literally copy + paste, but encoding from scratch using CSS styles. Using the above themes, try to search for a site that you like (do not be too complicated, still you are a beginner).

You can also try BlankSlate, HTML5Blank, and Underscores, or try HTML Reset WordPress Theme on GitHub.

9. PREPROCESSORS

Using preprocessors like Sass and Less allows you to better organize CSS styles and make changes in them in a much easier way. The preprocessors are used to purify CSS and easier tracking, and the most useful is Sass (Syntactically Awesome Style Sheets), which is "a real scripting language with expressions, functions, variables, conditional logic, and loops."

10. FRAMEWORKS

Lastly, in order to create dynamic websites that are fast and functional, you will need to know how to use the frameworks. For example, Twitter Bootstrap is one of the most popular examples of good environments (it is responsive and uses Sass and Less syntax, and will be easy to use).

Follow me on Twitter – @SrdjanKali.