how to customize website HTML and CSS for Wordpress

CSS and HTML for WordPress to Customize Your Website or Blog

Have you ever wanted to modify an element of your website and have not known how to do it?

Currently, to create websites there are builders that facilitate the creation of content, and that for many, facilitate work and life, as they save us time.

But what if you learn the language of the websites yourself? Do you know that there would be nothing to resist you when creating your page?

The latest trends in web design every day are more visual and difficult to code, but it never hurts to learn languages in case some element resists us with visual constructors.

In this very complete article, you will learn everything you need to know about CSS codes, CSS colors, and HTML for WordPress. You will also find very useful WordPress TRICKS that will help you personalize and make a unique design of your website or blog.

What is HTML and What is It For?

HTML code is a tag language that serves to model our web pages.

It is like a document to which you can label and organize and manage the content.

A web page at its level is nothing more than a plain text document, which can be sent from one computer to other thanks to the WWW protocol.

So, if it is a text-only document, why do web pages have that design with their tables, lists, images, etc.?

This is thanks to the HTML language with which we can modify parts of this document.

An example of this would be that, when we write the text <b> hello </b>, we really want it to be hello in bold.

This “replacement” job is done by the browser, which knows how to replace any code because there is a standard called HTML.

HTML web codes have evolved over the years to reach HTML5, which is much more versatile and clean than previous versions, as well as allowing greater adaptation to different screen sizes, resolutions, etc.

The HTML to insert an h3 title would be:

<h3> Soy un título </h3>

But this code could be customized as follows, adding a blue color:

<h3 style=»color:#569FE8> Soy un título </h3> 

Now, if we want to customize each title, we should include the same label to all, so we would end up repeating the same millions of times unless we want each label to have a different style.

You may also be interested:

50 Best WordPress Plugins in 2020
What is WordPress get_option function?

HTML Code Structure

The basic structure of this language by which our pages are composed begins with a head, which is the header of the page, where the most technical information our browser will need.

This section will be followed by a body, where we will add the content of the entire page (images, texts, forms, etc.).

Estructura del código HTML

What is CSS and What is It For?

Once we understand the HTML code, we have another question, what is the CSS code?

CSS code is a language that arises to organize and facilitate the task of HTML code.

The CSS will define the presentation or appearance of the HTML text document.

This language has evolved until reaching CSS3, which allows us to add to our content very original transitions and animations to the elements of our website.

CSS Code Structure

The CSS structure will consist of the HTML selector or element that we want to customize, followed by the property and the value in square brackets.

Estructura del código HTML

For example, we will choose the HTML element of the h3 title, to which we will add a white color. The structure will therefore be as follows:

As I said before, the HTML to insert an h3 title would be:

<h3> Soy un título </h3>

Now we would add a CSS to customize it, with the structure that I just explained so that the same title is repeated throughout the web with the same appearance.

h3 {
color:#569FE8;
font-size: 25px;
font-weight: bold;
}

What will happen now is that all the titles of our page with an HTML h3 title tag will have the same blue color, with the same size and font style.

TIP: When we have a very long CSS style sheet, we can lose track. Add comments between / * and * / to specify with text what we do in each line of code.

Let’s see an example of this tip.

h3 {
color:#569FE8;/*El título h3 será de color azul*/
}

As I told you, I have included a description that we have added a color, without affecting the h3 code.

What is The Difference Between CSS and HTML?

It is not a simple task to know what HTML and CSS mean if you have not used any of them, so I will show you the difference between them.

When you proceed to create your web page, you use an HTML language to define the contents and assign what type of element will be in each section of the page.

That is when, once this structure of elements is already created, the CSS acts to define what the web page will look like.

Therefore, the HTML gives the structure or position of the elements and the CSS applies the styles.

Many people confuse these languages, and sometimes it is not easy to see the difference between them if you do not understand the subject well.

For this reason, I will explain it to you with an example.

In HTML you add a title with a title label with color to your design.

But now, if we add 20 exactly the same titles, changing the text, we would have the same label for the 20 titles, leaving a fairly long document.

<h3 style = » color: # 569FE8> I am the first title </h3>
<h3 style = » color: # 569FE8> I am the second title </h3>
<h3 style = » color: # 569FE8> I am the third title </h3>

The CSS will allow you to have no duplication of code , and for the same title h3 have a single structure, and not the same repeated 20 times.

The less the code is duplicated, the more efficient and cleaner it will be.

So it would be summarized in the following CSS:

h3 {
color:#569FE8;
}

With this code, all titles that have the <h3> tag will have that same color.

As I just taught you, HTML defines the content and CSS allows its organization, structure and definition.

Basic Characteristics and Properties of Each Element

Before going to see the basic elements of the structure of web design, I will show you how the basic properties of the borders (border), padding and margins (margin) would be composed.

Limites de los elementos HTML y CSS

As you see in the image, the margin would be the most out of the content, that is, the surrounding space. However, padding is about the space between the content and the border.

These will consist of the top (bottom), the bottom (bottom) and the sides (right and left).

How to Modify Web Page With CSS & HTML?

So that you understand HTML and CSS a bit better, I will explain some of its elements, and I will also give you examples so that you can put them into practice when creating your website.

Padding and Margin in CSS and HTML

The Padding property sets the width of the area in which the item is included.

For the h3 of the example, we can add width to the top, left, right and below as follows:

h3 {
padding-top: 100px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 70px;
}

Now, this can be summarized and grouped as follows:

h3 {
padding: 100px 40px 10px 70px;
}

As I have already told you, the margin will be the surrounding space, and it will be used in the same way as padding, but changing the word to margin. Let’s see an example:

h3 {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

In summary it would be the following:

h3 {
margin: 100px 40px 10px 70px;
}

CSS and HTML Colors

First of all, we must know what color palette for the website we are going to use, and be clear about the CSS and HTML color codes to make changes to the template.

Color: First of all, and as you have seen before, to include the color of the CSS text to a title, we would simply add the following property:

h3 {
color:#569FE8;
}

Background-color: This property adds a color background to our element, and would be added as follows:

h3 {
background-color:#569FE8;
}

Full CSS Color List

colores css

What are your favorite CSS colors?

CSS and HTML Backgrounds

Background-image: With this function, we can insert a background image on our web page.

Once we have the image uploaded in the media folder, it would simply insert the URL after the code.

Background-repeat: We can repeat or not repeat the background that we have included in the element depending on the value we assign.

Background-Attachment: Includes the effects that the background has, that is, if we want it to be fixed (fixed) and not scroll with the content, or if on the contrary, we want it to go down with the rest of the elements (scroll).

Background-Position: When we cover an image in some WordPress constructors (among other CMS) it may not be completely centered, so the position will allow us to align it to the left (left), right (right) or center (center ).

An example of funds for our website would be the following:

body {
background-image: url (http://cdn2.marketingandweb.es/wp-content/uploads/2017/09/Marketing-and-Web-Miguel-2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment: center;
}

Customize the Borders With CSS and HTML

With this property we can put borders to our elements and also customize them.

It is a very useful property especially for customizing buttons with CSS.

But how do we customize them? We will do it with these values:

Border-width, that is the width of the border. We can make it thinner and thicker depending on our design.

Border-color. This function will change the color of the border. But beware, the text that composes it will follow the original color.

Border-style is the style we want it to have: dotted, solid, embossed.

I will explain the types of borders that you can apply.

  • Solid: Add a single straight line.Añadir bordes en HTML
  • Dotted: Edge of points separated by spaces.
  • Dashed: The effect is similar to the previous one, but instead of points it would be an edge with separate lines.
  • Double: Double edge, are two straight lines together and separated between them.
  • Groove: Produces a sunken edge effect.
  • Ridge: It is a type of edge that stands out, like a 3D effect.
  • Inset: As you see in the image, it creates a sunken edge effect.
  • Outset: It is an edge that stands out, creates a 3D effect.
  • None: No border type will be displayed.

Customize Texts and Fonts with CSS and HTML

When we have a text on our website, we often do not like the shape of the paragraph, the fonts, the sizes or anything else that may affect the design of the page.

That is why HTML and CSS allow us to make certain changes in our words so that they have a more aesthetic appearance.

Let’s see some of these modifications:

Font-family: With this property, we can select the type of font our text will have.

The advantage is that, if in our code we add two types of sources in a row, we will indicate an alternative source to the initial one, in case some user does not have that source in their device, the second one will appear by default.

Font-style: In addition to choosing the type of font, we can choose the versions of the letters and set italics in CSS, bold, oblique, etc.

Font-weight: This is the weight of the fonts. To understand it better, it’s about the thickness of the letters. They can be thin, medium, thick; depending on the value we assign, which will be between 100 and 900.

Cambiar peso de las fuentes en CSS

Font-Size: We will define its size in pixels or percentage depending on the need we have in our web design.

If what we want is to change the font size in HTML and not in CSS, we will use the <Font Size> tag for example:

<h3><Font Size=3> Soy un título </Font></h3>

Unlike in CSS, it would be as follows:

h3 {
Font-size: 25px;
}

Line-Height : CSS line spacing is the spacing between one sentence and another within the same paragraph. It can be defined in percentage (100% is the normal spacing) or in “em”. This will be used for our HTML spacing.

Text-align: If we want our text to be aligned to the left or right, we must indicate it with this property.

Text-decoration: We can decorate our text with lines around (underlines, lines above …). Some of its values are as follows:

  • Underline the text. The underline in CSS is usually seen mostly in links.
  • Overline. Includes a bar above the text.
  • Line-through. Cross out the text.

Text-transform: When we have a very long lowercase text and we want to pass it to uppercase, or vice versa, we start rewriting it, but there is a very simple way to do this automatically, and it is with the following values:

  • Uppercase
  • Lowercase
  • Capitalization: First word is uppercase.

!important:

Many times the template comes with some customizations by default, and, however much we try to change them, both instructions collide.

When we add this term, we will give priority to our instruction.

Here is an example of how we would include some of these elements for our example title:

h3 {

color:#569FE8!important; /*Color azul en la fuente, por encima de otras instrucciones */
Font-family: Arial, Verdana; /*Por defecto la tipografía será Arial, a no ser que no la tengamos instalada, que será Verdana */
Font-size: 25px; /*Tamaño del texto */
Font-style: Normal; /*Estilo normal */
Font-weight: 400; /*Indicamos el peso de las letras */
Text-align: right; /*Alineado a la derecha */
Text-decoration: Overline; /*Barra sobre el texto */
Text-transform: Uppercase; /*El texto sería en mayúsculas */
}

Basic HTML Style Tags for Texts

<h1> </h1>: We assign the text the role it will have on the page (h1, h2, h3 …), in this case it would be the main title.

<b> </b> or <strong> </strong>: With these HTML tags we include the bold in the text.

<i> </i>: HTML tag to add italics to the text.

<p> </p>: By means of a label we indicate that it is a paragraph.

That is, if we do not include this label in a text, it will be all in the same paragraph together.

If we distribute it in paragraphs, it will be organized in the way we indicate it.

<br>: With the BR tag, we will get a line break or what is also known as a break.

I have explained some of the basic elements of the web and some of its properties, but there are others such as adding text indentation ( text-indent ) or character spacing ( letter-spacing ), among others.

Create HTML Listings

The language allows us to create different listings to sort our articles or sections of text on the web pages.

List by Points in HTML

With the <ul> tag we will create a list by points like the following:

Checklist: <ul>
<li> Keyword analysis </li>
<li> Write the article </li>
<li> WordPress layout <li>
</ul>

Each point will be preceded by the <li> “list” tag to structure our UL tag.

List by Numbers in HTML

With the <ol> tag we will create a numbered list like the following:

Checklist:<ol>
<li> Análisis de palabras clave </li>
<li> Escribir el artículo </li>
<li> Maquetación en WordPress <li>
</ol>

Like the previous one, it must be preceded by the <li> tag to organize the points of our list.

Other Elements of a Web Page

HTML Links

To many, it has happened to us that a link has been sent to us by default in blue and with the typical Word underline.

I will teach you how to change this manually.

Links are specified with the HTML <a> </a> tag along with the href attribute to specify the link’s destination URL.

<a href=»https://marketingandweb.es«>Marketing and Web</a>

And if we now decide to customize the link, we have options to do so:

  • a:link – Este será el estilo por defecto del enlace cuando aún no se ha clicado sobre él, ni se ha visitado nunca. Es decir, el estilo por defecto.
  • a:visited – Aquí aplicaremos el estilo del enlace visitado. ¿Recuerdas el típico color morado de Google? Pues lo mismo para nuestra web.
  • a:hover – Cuando pasamos el ratón por encima de un enlace, suele cambiar de Definiremos qué color que tendrá.
  • a:active – Cuando clicamos con el ratón hasta soltar, este link tendrá un estilo, que, aunque se suele ver poco, podemos definirlo.

TIP: To hide the underline that comes with the link by default, we will use the line a: link {text-decoration: none; }

Now we will only have to define the link styles as follows:

a:link { 
color: #black;
background-color: #efefef;
}
a:visited {
color:#569FE8;
background-color: #efefef;
}

As you can see, I have added a black color to the link, and when a blue tone has been visited. I have put a gray background color with CSS.

Also, if we want this link to open in a new tab, we will use the target = “_ blank” in the HTML tag.

<a href=”https://marketingandweb.estarget=”_blank>Marketing and Web</a>

<img> Images

We can insert images on our website as follows, specifying the URL to display, the alternative text, and the width and height of the image.

Do not forget before inserting your images, optimize them and retouch them with some programs to edit free or paid photos.

The HTML code to insert an image would be as follows:

<img src=” http://cdn2.marketingandweb.es/wp-content/uploads/2017/09/Marketing-and-Web-Miguel-2.jpgalt=”DSM Valencia” Width=”500” Height=”550>

[clickToTweet tweet = »Do not forget to put the ALT attribute to your images, you will benefit the SEO positioning of your website.» quote = »Do not forget to put the ALT attribute to your images, you will benefit the SEO positioning of your website.» ]

HTML Tables

With the HTML language we can also insert tables using the <table> tag, indicating each row between <tr> and each column in <td>.

For example:

<table><tr>
<td> Fecha </td>
<td> Título del post </td>
<td> Hora de publicación </td>
</tr>
<tr>
<td> 30 Junio </td>
<td> Optimiza tu posicionamiento orgánico </td>
<td> 10:00h </td>
</tr>
</table>

Applying CSS to tables would be through styles. We would select our table and modify the colors, borders, texts, etc.

How to Edit HTML in WordPress?

We can insert HTML code into the WordPress page through the widgets, blog entries and the pages themselves.

Add HTML in WordPress Widgets

WordPress allows us to include Widgets in our sidebars, upper or lower; and for that, we go to Appearance and Widgets.

If we want to include in our Sidebar custom HTML code, we will drag the widget to the Sidebar itself.

Modificar los Widgets de WordPress con HTML

Here we can add the shortcodes of the plugins we want or our own code.

Add HTML in WordPress Blog Entries

The way to modify the HTML in the WordPress blog would be through the HTML tab that follows the Text or Visual.

Editar código HTML en WordPress

Here we would add all the specifications that our post entry would have to make it up and make it look like we have it in our head.

Add HTML in WordPress pages

As in blog posts, in the same tab, we would add our HTML code to our pages.

But here we have another option that will depend on the builder.

We can also add a shortcode by dragging the element called “shortcode” or “HTML” (depending on the constructor you use on your website) in our design in a very simple way.

How to Modify the WordPress Template with CSS?

Many times we understand the theory, but we block ourselves when we have to modify some style, and we don’t know where to go.

The CSS style sheet (style.CSS) is a file that connects and affects the HTML of our website. That is, it is a sheet that is oriented to style our HTML document and that we will use to give a personalized design to the web.

But where to edit this WordPress CSS style sheet?

We have several options to go to this style sheet and modify it to our liking.

Option 1: Through our FTP, in the folder of your theme you will have the file Style.CSS where you can add the styles that you want for your web design.

Option 2: If you do not want to get into your FTP, from WordPress itself in the “Appearance” tab, “Editor”, you can modify the folders of your template.

Option 3: If you are one of those who do not like to touch your FTP or internal folders, in WordPress itself you go to “Appearance” and “Customize”, and the customizations of your web page will open.

Once opened, we go to “additional CSS”. Here you can add your custom code, where in addition, the editor itself will inform you of the errors that have the code you add (if you have the latest version of WordPress installed).

Option 4: There are many WordPress themes that allow you to add custom CSS from your own options through the Custom Code or Custom Code.

Even so, I’m going to teach you how to do it with Option 3, from the additional CSS.

How to Inspect the Elements of a Web Page?

Now comes the big question, do I have to create each code without knowing what will come out on my screen once I have saved it?

No, we have a very practical way and I love to see and create codes at all times. This is the item inspector.

But beware, the item inspector does not have all browsers, we will access through Google Chrome.

When we are on our website, we press the right button of our mouse or touchpad and a drop-down opens where we click on Inspect.

Once we press, our console will open to see the code of the website.

Still, you will think, and now what? What do I do with so much strange code?

Well, now you will discover the inspector of elements.

Modificar theme WordPress a CSS

If you look to the left of our panel we have an arrow that will help you a lot and, from now on, you will consult a lot.

When selecting it, click on the element we want to modify. In my case, as I have been talking about titles, I will take the h2.

As you can see, the text has already been selected, and its customization appears on the right.

Now let’s change it.

If we go down, in the options of the styles (Styles, in the column on the right) we will see everything that forms the h2 text.

When I get to the .h2 class, I will have its size, color, and other elements.

Well, to highlight our modification, we will add a colored background.

Modificar plantilla de WordPress con CSS

As you see on the right, on the .h2 I have written “background-color: # 569FE8”, and it shows me the web as it would be with this background.

But now, do you think this blue background would already be established? Do not.

If I refresh the page, the h2’s features will be as before, since this is just for testing and does not act on the code of the page.

Now, if I want to leave this background established on my website, what I will do is paste the new customization in my style sheet or in my Custom Code.

I will show you how.

First of all, we open the additional CSS in the WordPress customizer.

Once we have it open, we copy the code that we have modified in the console, being as follows:

CSS personalizado de WordPress

Have you noticed that I’ve only taken the .h2 and not everything in the square brackets?

In fact, it would not be necessary to paste all the features again, since these are already established in the template, and the font size and line will not be changed.

By clicking on Publish, we will have our fund changed on the website.

TIP: When selecting with the arrow an element we will have it assigned with a class ( class = “name”; ) this class will be the element that you must modify by adding a period in front (.name) and its properties.

Classes in CSS can be defined, and serve to identify tags and add properties.

The advantage of this is that we can create new classes to attributes, and customize them as we want.

What seemed more complicated than it really is?

What I have done has been a minimal change, but with your console, your element inspector and your search capability, you can customize the design of your website as you wish.

In the end, you end up taking so much taste, that you become a touch-up obsessed (I tell you from experience)

The Media Queries: Edit the CSS for mobile.

What if I just want to modify these elements in mobile format?

I’m going to show you a trick so that, from your computer, you can see how your website looks on the different mobile devices.

We will open the element inspector again, and select the Responsive button (the mobile screen symbol next to the magic arrow that I have taught you before).

Here we can see the different devices on which our website is displayed.

In this case, if we want to modify the h2 only for mobile phones, we will click again with the arrow our h2 and we will put the background again.

Editar CSS web para móvil

We look for the corresponding class or element that we want to modify and apply the fund.

But this time, if you look, we have an @media only screen and (max-width: 1000px).

We will return to our additional CSS of the customizer and add the modified code along with the media query, being as follows:

@media only screen and (max-width: 1000px) {
.home h2
{
background-color:#569FE8;
}
}

We would already have the blue background only for mobile !

Create your HTML code in Word [Trick]

[clickToTweet tweet = »Did you know that you can create a text in Word and convert it to HTML format by pressing a single button?» quote = »Did you know that you can create a text in Word and transfer it to HTML format by pressing a single button?» ]

If you did not know, I will explain how to do it in case one day it is of great help.

First of all, we create our text in Word.

Once we have created it, with its colors, bold, and all the customization we want, we will ” Save As ” and select the ” Web Pages ” option.

We will already have our file in the web format.

What I do now is open it in Google Chrome and select ” View source code of the page “.

Once it opens, I go directly to the ” Div” tag of the page that has been generated (without looking at the head), where I will have the HTML created.

You just have to copy it and paste it on our website!

I have to tell you that this is a way to save us work, but it is always preferable to do it from our own CMS or web so that the code is as clean as possible, without the influence of Microsoft Word itself.

Customize your Website with CSS [Trick]

How to Create a 404 Error Page [+ Real Examples]

When a new visitor enters our website and finds “PAGE NOT FOUND”, he will probably leave it and will not visit it again.

So how can we solve this? Customizing the 404 error.

But we have read this many times and we think it is very good to customize 404, but we do not know how to do it.

We have several ways to create this page and be able to retain the user who arrives on the web even if he has not entered the page he expected.

Therefore, I will explain the different options of creating the 404 pages in WordPress.

Customize 404 error with CSS in an original way

We can notify the user in a creative way that what they are looking for is not on that page, using funny CSS effects for 404 error.

Customize 404 error using a WordPress Plugin

404 Page is a very simple plugin to make your 404 pages.

You simply create a new page with your constructor with the elements you want to include, and in the plugin, you choose which page you will choose to appear when the error comes out.

Customize 404 error through .htaccess

Once we have made our page with the constructor, we will have to go to our .htaccess file and establish that 404 errors will be redirected to the page we have designed new.

It would be best to make a new page, where you include calls to action.

For a blog, a good 404 error would be to include the latest articles that have been written, a button to follow you in Feedly, along with subscription boxes or ebook downloads.

For an e-commerce or services page, the ideal would be to include a series of products, along with calls to action as discounts for subscribing to the Newsletter.

I am going to show you several examples of other bloggers who use these 404 error techniques so that you can get ideas when it comes to customizing the error page of your website:

Blogpocket

Ejemplo de error 404 Blogpocket

Ignacio Santiago

Ejemplo de error 404 Ignacio Santiago

Jesus Legs

Ejemplo de error 404 Jesus Pernas

Luis M. Villanueva

Ejemplo de error 404 Luis M Villanueva

Rafa Sospedra

Ejemplo de error 404 Rafa Sospedra

Rubén Alonso

Ejemplo de error 404 Ruben Alonso

Vilma Nuñez

Ejemplo error 404 de Vilma Núñez

Customize Blog Categories with CSS

Has it ever happened to you that you have entered a blog and you love the way the categories are distributed and customized?

The categories of a blog help you structure the articles on your website so that the themes are easily accessible to the user who arrives at your blog.

These categories are a way of organizing the content of your entries and have a very important role since they can improve or worsen SEO positioning.

If you create content periodically, and each article links it to its corresponding category, it is updated when creating new content, which is very important for positioning.

If the categories of your blog are striking, the reader who is reading your articles may visit a topic that interests you and start reading more articles, thus decreasing the bounce rate, increasing the page views, increasing the time spent in the web page, etc.

But if you have a blog, you will know that WordPress only allows you to put a name, a small description without customization and a slug to the category, without being able to customize them in a simple way.

Well, we have different options for customization.

One of them would be through a plugin such as Visual Term Description Editor or CategoryTinyMCE, which will add a WordPress editor to the category description box so you can customize the descriptions visually.

But I will teach you how to make these categories more striking manually with CSS to improve the user experience of your readers and the SEO of your website.

We can customize the categories by changing the background color of the sidebar so that it looks visual and according to our website.

Editar categorías en CSS

And how do we get this?

With the element inspector and the arrow that I have explained to you before, we go to the categories section, and a class = “ cat-item or a similar name will appear within the class, depending on the template.

We take the text inside the quotes ( cat-item ) and go to our custom CSS.

Once we are there, we add a period to the text we have copied, leaving it as follows: .cat-item

Now it’s just a matter of adding custom brackets.

.cat-item {
height:20px;
background-color:#569FE8;
text-align:center;
font-size:1.2em;
margin-top: 8px!important;
color:#ffffff;
}
.cat-item:hover{
background-color:#ffffff;
color: #ffffff!important;
}

We will have our color categories!

But what if we want to make each category of color so that it attracts more attention from the user?

Well, we would repeat the previous steps, but instead of selecting all the categories, we would point with the arrow one by one, and we will copy the names from within the class.

Normally these categories are associated with some numbers. In my case they will be .cat-item-81, .cat-item-82 and .cat-item-83.

The changes will be with the following style:

Personalizar colores categorías en CSS

And we just have to add the following code, changing the names and numbers, with the color we want to include in each category:

.cat-item-81 {
height:20px;
background-color:#438EEF;
text-align:center;
font-size:1.2em;
margin-top: 8px!important;
color:#fff;
}
.cat-item:hover {
background-color:#fff;
color: #fff !important;
}
.cat-item-82 {
height:20px;
background-color:#58c2d8;
text-align:center;
font-size:1.2em;
margin-top: 8px!important;
color:#fff;
}
.cat-item:hover{
background-color:#fff;
color: #fff!important;
}
.cat-item-83 {
height:20px;
background-color:#F3D662;
text-align:center;
font-size:1.2em;
margin-top: 8px!important;
color:#fff;
}
.cat-item:hover{
background-color:#fff;
color: #fff!important;
}

Hide a Web Page Element with CSS

Many times in our design we have elements that we do not like or do not want to appear, and we do not know how to remove them.

When we design the website with a constructor, it is easy to make an element disappear, but when designing a blog with which we do not use the constructor, there are elements that we do not want to appear, such as the date, comments, comments likes the post, etc.

With the display property we can hide an element on our website.

To accomplish this, we would have to go to the item inspector and search with the arrow for the item we want to remove.

Once we have it, we look for the name assigned within the class and add the property display: none; as follows:

.post_comments {
display:none;
}

What I have done here is that on my main page of the blog, the number of comments that each article has will not appear, so it will only be the date.

It seemed more complicated than it is, right?

Featured Item in The Menu With CSS

Have you entered any web page and have you seen that its services or some other menu item stand out above the others?

Surely yes.

Personalizar el menú con CSS

This technique is very useful to draw the user’s attention to that page of our website above the others.

Remember to use this technique with a previous strategy to guide the user to that page and thus achieve your goals.

I will explain how to highlight a menu item to code.

As on the previous occasions, the class attribute assigned to each menu item must be identified with the item inspector.

Once we have located the element, where it gives us spaces, we replace it with points as follows:

menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-468  .menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-468

Once we have it, it will be a matter of adding a colored background and a radius to create our element as follows:

.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-468 {
background-color: #5197D6;
border-radius: 100px;
}

Remember to replace the name of the menu item with that of your page.

Insert HTML icons

In the articles, we read we are accustomed to seeing icons to distribute the points or in the middle of the text.

Through this page of icons we look for the one that interests us to include, and we copy and paste the code in the HTML of the entry or page of our WordPress.

<i class=»fa fa-check«></i>  
<i class=”fa fa-smile-o></i>  
<i class=»fa fa-arrow-right«> </i>   

Should I learn HTML and CSS?

The HTML code for the web and the CSS code are not something simple first. But once you take the trick, the rest comes alone.

It is true that today we do not need to know code to make the design of our website, but it is worth knowing where to go in the case of wanting to modify an element and that our builder does not allow us to edit.

In addition, the extensions make our job much easier when we start editing our theme.

My advice is, if you want to modify something and do it from the custom code, do not be afraid to try new things, WordPress itself will notify you of the errors that are included in the code included.

This is how you really learn, trying. And yes, I’ve screwed up too many times.
In addition, knowledge is power, you never know when we might need to know this kind of thing.

Do you dare to modify the code of your website?

Do you know of any technique or trick with interesting HTML and CSS?

If you liked the articles, you can share it with a friend.

Did you like this post? Share your thoughts via comments!

Leave a Comment

Your email address will not be published. Required fields are marked *

css.php Scroll to Top