When you work with web pages, there is a huge difference between knowing how to handle only tools like WordPress or Joomla that make your job easier because they abstract you from the technologies underlying web pages or having knowledge, even just basic, of these technologies that are, Basically HTML and CSS .
Believe me, there is simply no color when it comes to the ceiling of your possibilities. For this reason, whether you are a blogger or any other person who works on the web, I strongly recommend that you learn the fundamentals of these two technologies, which, moreover, are not difficult to understand.
In a previous post it was the turn of a basic HTML tutorial and today it is the post about Cascading Style Sheets or CSS (Cascading Style Sheets in English). If HTML is the language with which the contents of a page are built, CSS style sheets are the language used to work on the design of any current web.
If you don’t know HTML yet, I strongly recommend that you read the HTML tutorial first, as there is little point in learning CSS without knowing at least some HTML.
Learning CSS is easy if you think about it right
Even with a tool like WordPress (which frankly I recommend as the best option to create a “normal” website today) where in principle it is assumed that the thousands and thousands of design templates (WordPress themes) that WordPress enjoys would make unnecessary any knowledge of CSS, there will be no color between knowing or not knowing a little CSS.
Simply having basic knowledge of CSS like the ones you can acquire in this post and not being limited to the configuration options of the template on duty will take you to another level in what you will be able to do with your website.
In the case of WordPress, for example, knowing a bit of HTML and CSS means that the template no longer sets the ceiling for what you can do with your WordPress-based blog or website. Even with very simple free themes and a little imagination and skill, you can achieve results that will surprise you, and a lot.
Although a sheet with CSS rules of a large and complex website, such as this very blog, can certainly be a bit intimidating when you see it the first few times, but do not be scared : the basics of CSS are very easy to learn. and they will give you a lot of play .
It’s just that it’s a very large and very powerful specification, so a professional CSS layout can be a really sophisticated thing. But I assure you that in 99% of the cases with a medium-basic level you will manage more than enough and reaching this level of knowledge, I insist, is not very complicated if you make a little effort.
How do cascading style sheets work?
CSS style sheets are a set of rules listed in a .css file that describe how the different HTML elements on a page should look.
The interesting thing about this is that they work with a philosophy of patterns or templates , that is, it is not necessary to specify each of the elements, but rather rules such as these two can be defined:
- “Level 1 and 2 titles must be black and have a font size of 16 and 14 pixels, respectively.”
- “The text of the paragraphs are aligned to the left, have a font size of 12 pixels and a dark gray color.”
By way of comparison, if you’ve mastered styling in Microsoft Word , you’ll find that this is very similar to the concept of styling in Word, although CSS is infinitely more powerful than Word in all its capabilities.
Let’s see a concrete example of how the previous rules would be expressed in the CSS language:
The key concepts in CSS style sheets
This very simple example of CSS rules already serves us perfectly to talk about the key concepts that must be clear in all this.
Rules, selectors and properties
In the previous example we have a total of 3 rules , each one is made up of a selector that indicates to which HTML elements the rule applies, which is the text that precedes the opening and closing braces of the rule. In the first rule, the selector is “h1, h2”, in the second “h2” and in the third “p”.
Each rule is itself made up of properties that specify what exactly will be done with the HTML elements it applies to.
The selector of the first rule, for example, indicates that this rule refers to the HTML elements <h1> and <h2> and that the color black (“color” property) and a font size of 16 pixels will be applied to them. to the text (“font-size” property).
There are hundreds of properties of which I will then highlight the ones that, in my experience, have seemed to me the most frequently used and most useful. As for selectors, the examples have been trivial since they just refer to HTML elements, but there are much more sophisticated ways to design selectors.
Two elements have been nested in the first rule to indicate that this rule only refers to links (<a> tag in HTML) within text paragraphs (<p> tag in HTML) and that an underline will be applied to these links. . That is, this rule does not apply to <a> elements that are not inside a paragraph (<p>).
In the second rule, something similar has been specified, but playing with an element and a class attribute (see these concepts in the HTML tutorial). That is, this rule will apply to paragraphs that contain a “class” attribute with the value “text-izq” such as this one:
Notice that in the “text-left” rule it starts with a period. It is the way of specifying in the CSS language that “left-text” refers to a class attribute.
I’m not going to delve deeper here since this post is not intended to be a complete CSS course. However, with this alone you have a certain game and I think you can see the philosophy of how selectors work and what they are intended to do. To delve into the topic of selectors, I recommend this reference on basic selectors and this one on advanced ones.
The Cascade: Inheritance, Overriding, and Style Conflicts
The name of “cascading” style sheets is not accidental, it expresses that the styles that they specify with rules can be inherited in a hierarchical way.
Here we are saying that the <body> tag, which is the one that wraps the content of any web design page, has an “Arial” font. This would not make much sense if it weren’t for the fact that, thanks to the rules’ ability to inherit, by default any child element such as a title or a paragraph will “inherit” that style, unless you specify otherwise, for example, in this rule:
In this last rule, the principle of “specificity” applies. In principle, there would be a conflict between the general <body> rule and what the <p> rule says, but it is easily resolved since the more specific rule applies and referring to a paragraph is more specific than referring to “ child elements that can within <body>”.
Likewise, a rule with a selector “pa” (link within a paragraph) would take precedence over a rule with a selector “a” that refers to a plain link.
Again, knowing this, you’ll be fine in 99% of cases. But the truth is that the issue of the precedence of the rules among themselves has a certain fabric, if you want to know more about it, take a look at this reference.
A practical example
Now that I think you are already seeing how this works, I propose a small practical exercise to play with your new knowledge: modify the design of this blog by changing one of its CSS rules, specifically the color of the post titles. And don’t worry: the change will only affect the page in your browser, my blog will not be damaged ?
To do this, I suggest you use the code inspection tool that comes with the current versions of the FireFox , Chrome and Internet Explorer browsers . With them you can see and manipulate the code of a web page both at the HTML level and at the CSS level in a really comfortable and intuitive way.
In any of these browsers, the tool is activated with F-12, in the example I used Firefox, which is the one I like the most, although I also use Chrome a lot.
To make it easier for you to follow what follows, I am leaving you with a video-tutorial of this tool. The user interface has changed slightly with respect to the version used in the video, but you will be able to get a perfectly good idea:
The exercise that I propose is to change the color of the titles <h1> of the posts in this blog.
To do this, we need to find the CSS rule(s) that determine(s) the aesthetics of these titles . Thanks to these tools this is as simple as performing the following 4 steps that you can see in the screenshot below:
- Activate the item picker with the icon the arrow points to in step 1.
- Once activated, you can hover your mouse over the item to examine . In Firefox I particularly like how it highlights them. You can also see how the table indicates that the selector used in the HTML is “h1.entry-title”, that is, the rules for <h1> tags and the “entry-title” class apply. We then look at these concepts a little more slowly.
- Within the HTML code tree, the exact HTML element that you selected earlier with the mouse has been identified. Notice how it matches the CSS rules.
- On the right side are listed all the rules that match the <h1> element and the “entry-title” class that correspond to the selected HTML element. WordPress blogs usually have many CSS rules from different files, so you will see several rules appear. The important thing is that the order of priority is from top to bottom.
Take a calm look at the following screenshot now and see how these four steps are reflected in it. Try to play them on your computer. If you use Chrome or Internet Explorer it will cost you a little more because their user interfaces vary somewhat, but the process and results are identical.
Basic properties you should know
Now that you know the basic philosophy and you also know a great tool to experiment with CSS such as browser code inspection tools, simply testing interesting properties, you will be able to do a lot of things, so I will leave you a list of what I find the most useful properties.
I only attach a very brief description to each one, the detailed description is found in their respective links.
My advice is: play around with the following properties and different selectors to see what happens. The simpler the better at first. Now, don’t stay forever in the “mess”, if you want to learn CSS properly, you have to do it with a bit of order, so I recommend that, after a phase of playing and experimenting, you learn it in one go. more structured way with the material that I provide at the end of the post.
1. Basic layout
- width : Width of an element.
- height : The height of an element.
- vertical-align : Vertical alignment within an element.
- margin : Space that is added between the element and its neighbors. You can differentiate by side (up, down, left, right).
- padding : Inner padding that is added on the edges of the element. Unlike margin, it counts towards the size of the element.
- float : Moves the element as far as possible to the indicated side. This property is used inCSS float positioning . Positioning in CSS is not trivial and it is worth studying how it works before using this property.
2. Fonts and text
- font-family: Font
- font-size :
- font-weight: Peso (normal, negrita, …)
- font-style : Style (normal, cursive, …)
- text-decoration : “Decorations” such as underline, strikethrough, etc.
- text-align : Text alignment (left, right, etc.)
- text-transform : Display text in uppercase, lowercase, or the first letter of each word in uppercase.
3. Color and backgrounds
- color : Color of the element. It can be specified in different formats as predefined words (red, green, etc.) RGB or as a hexadecimal value.
- background-color : Background color of the element.
- background-image : This allows you to specify a background image.
- background-repeat : This allows you to use an image as a mosaic in different modalities.
- box-shadow : Create a shadow effect for an element.
- list-style-image : Use the specified image as the bullet for the list.
- list-style-type : Different bullet styles and numbering styles for list items.
- border : Adds a border to an element and sets some properties (weight, line style, etc.)
- border-color: Color del borde.
- border-style : Different styles for the border (solid, dots, etc.)
- border-radius : Allows you to create rounded corners for an element.
Bind CSS styles to HTML pages
You already know how to create CSS rules, but how do you apply them to an HTML page?
For this you basically have 3 options:
You also might be interested in How to Create WordPress Blog
1. Inline CSS Style Sheets
The first option is to use the “style” attribute on an HTML element as you can see here:
In this case, there is no selector since there is no element to select, it is what it is. Therefore, the properties to be applied to the element in question are simply specified. These types of rules have the highest priority of all rules.
It is strongly recommended to avoid this way of linking CSS styles since, since they have to be applied to each element individually, they imply a crazy effort and maintenance.
However, there are very specific use cases where they are practical. For example, in a simple WordPress widget that allows you to directly configure certain CSS properties from its configuration interface, it may be a good option to implement these properties with this technique.
2. Internal CSS Style Sheets
The second option is to write the rules inside a <style> element inside this tag, which, in turn, would be inside the <head> element of the HTML page.
Obviously the disadvantage is that in this case the rules are only visible for the specific page in which they have been declared and cannot be used for other pages.
3. External CSS Style Sheets
The last option is the most used and consists of creating one or several files with the extension “.css” in which the CSS rules are declared.
The way to link these rules to an HTML page is to reference the .css file from that page. In this way you can create a global file for an entire website and use it on all the pages you want.
In this case, the declaration is also included inside the <head> element and looks like this:
Here we must also take into account that in the case of using several files, the order of inclusion marks precedence in the reverse order. In the case of a conflict due to having different rules with the same selector in several files, the rules of the following files overwrite the previous ones.
Customize CSS in blogs: WordPress and Blogger
As the vast majority of the readers of this post are bloggers, a small reference to the CSS theme in blogs is mandatory. I will only make a few brief notes since in due course I will dedicate a specific post to how to customize blogs using CSS.
CSS and Blogger
If you have a blog on Blogger, you’re in luck because one of the strongest points of this free platform is that it allows you to work directly with HTML and CSS to customize your templates. Therefore, in Blogger you have it easy.
Here is a video with a small tutorial that explains how to do this:
CSS in WordPress.org
In the case of WordPress (the downloadable version that is installed on your own hosting) you also have it very easy. The famous Jetpack plugin brings among its +30 modules one that allows you to edit CSS rules that will be added to WordPress. On the other hand, there is also the Simple Custom CSS plugin , a very interesting alternative to Jetpack that only implements this functionality and, therefore, is considerably lighter than Jetpack.
I highly recommend one of these plugins to create CSS styles for your WordPress blog and not to directly touch the theme code (usually the style.css file that comes between the theme files) as many people happily do once they learn a little from this.
The reason is that, first, with each update of the theme your changes would be crushed and, second, that your customization is also lost when you change the theme. With plugins you avoid these problems.
CSS in WordPress
On WordPress, the free platform that does not require its own hosting, unfortunately, one of its limitations is that, by default, you cannot work directly with CSS styles .
In order to do this you have to pay for an upgrade called Custom Design which allows you to customize fonts and create your own CSS styles.
References to go deeper
I hope this post has allowed you to glimpse the potential of CSS styles. If the topic has caught your attention and you want to learn in depth how to use CSS styles, I recommend the following resources:
- Introduction to CSS : A great free online book from libroweb.es, highly recommended for beginners. Although it is already a few years old, it still seems to me to be very good to start with and to arrive at an intermediate level of knowledge that already allows us to do very serious things.
- Advanced CSS : The advanced version of the previous book.
- CSS Tricks : A great blog (in English) about tricks and all kinds of tricks in CSS. It is already for advanced level readers.
- Sitepoint CSS Reference – My go-to site for looking up properties and how to use them.
- CSS Zen Garden : the very famous demo site of the possibilities of CSS that has tons of designs to give you ideas, some of them are spectacular.
- The W3C page on CSS : The official page of CSS, that is, of the standardization body responsible for the standard.
And also remember that this post is part of a thematic series that is made up of the articles that you can see in the box on the right.