Basics of CSS to modify a WordPress theme

We wrote tricks to modify the WordPress themes, create pressed text effect, highlight texts and more tricks using CSS. From the responses, it seemed to us, we need to clarify the basics of CSS first. So, today, just a primer on CSS using which, you will be able to perform most of the modifications in WordPress themes you need.

 

Set the property

CSS is a language that allows you to format the content on a site. It can handle the layout and then aesthetics. For that, use properties and values. For example, this property can make text bold:

font-weight : bold ;

font-weight is bold from the property value.

You can find a list of most of the CSS properties for text in this post.

Assigning a style

To assign a style to a tag, it can be done in two ways. By declaring the name of the tag or by using an id or a class (the id is unique, unlike the class). For example:

< span id = "grass" > TEXT < / span >

To put this in bold text, the id will be:

#grass {font-weight : bold ;}

If we go directly by the tag must be replaced by the # tag name. If  grass was a class, we would have to use the attribute this way: class = “bold” and had to use a period instead of the hash like this:

.grass

 

Inserting CSS

 

There are three ways to insert CSS code. Directly in the tag with the style attribute:

< span style = "font-weight:bold" > Context < / span >

With the style tag and type attribute to be placed between the head tags:

< style type = "text/css" >span{font-weight:bold;}< / style >

The latter method, the most used is to create an external style sheet with the extension <span style="background-color: #e9eef3; font-color: #000000 font-size; font-family: Arial,Tahoma,Verdana; text-shadow: #fff 1px 1px;">.css</span>, containing all the properties to be inserted by placing this line of code between the head tags:

&lt; link href = "style.css" rel = "stylesheet" type = "text/css" media = "all" / &gt;

In this case, the style sheet is named <span style="background-color: #e9eef3; font-color: #000000 font-size; font-family: Arial,Tahoma,Verdana; text-shadow: #fff 1px 1px;">style.css</span>.

 

To summarize

 

• CSS allows you to manage the layout of a website.
• We need to use properties and values.
• To assign a style, you can use the tag name, an id or class.
• Most platforms (like WordPress) put the CSS in external style sheet.