CSS Basics. How to Apply Rounded Corners On Images #1

This tutorial explains how to change the outer border of each image using some simple CSS rules to make it more rounded, but it's so easy that I'll end up re-creating this post for other purposes.

Today's tip, which I'm going to split into two parts, should help you understand at least a little bit of what CSS (Cascading Style Sheets) is.

For those who want to learn more follow this link and for those who really want to learn more I recommend visiting this site .

Introduction and terminology

Style sheets are designed to help distinguish between the structure of a web page and its format or appearance. So the CSS box pattern is basically a box that wraps HTML elements and defines how those boxes are displayed in terms of colors, fonts, widths, backgrounds, etc.

The advantage is that when we decide to change something, we don't have to change all the pages one by one, we just change the properties of the style sheet and those changes are automatically applied to all pages.

A style sheet is a set of rules consisting of selectors and declarations. The selector must be used as an alias or the name of what you want to adapt from the style sheet and apply to the HTML, and declarations are the properties to which we add the values ​​we need (more on CSS syntax )

Added CSS selector

For example, if we put the above code in our style sheet, we might not see anything special on our website. As I mentioned above, the selector is HTML and CSS. So if we want the field to accept these values ​​for width, background-color, border, and font-size, we need to include a selector in the page element's HTML like this:

class =" SelectorName "> Text here

Here we have added a line that tells the browser to interpret that this field must be of a certain type or class . This class or selector can have specific properties and values ​​defined in the style sheet, as you can see in the image above.

Now let's see how this changes the appearance of the field, while all others that do not have a SelectorName will remain in the default appearance.

Basically, when we add a rule to the style sheet or modify an existing rule, all fields marked with this selector will change according to the properties and values ​​we defined in the style sheet.


Where to add CSS styles

This style can be added to external CSS files - create a CSS file with all the rules, upload it to your host and get the URL of the file. To use it, add the following line to the template header. For bloggers, you can add it in the middle AND :

style.css " rel="stylesheet" type="text/css"/>

Note: Replace the text in blue with the URL of the CSS file.

You can also add a style directly to the HTML of the template by adding CSS between the styling tags:

It can also be added to the HTML of a page element. In this case, you don't need to add a selector to indicate where the CSS style is:

background-color: #EAEAEA; border: 1px solid #444444; width: 200px; Font size: 12px; "> SMS here

On Blogger, the rules are in the middle and ]]> skin tags. If we go into the HTML code of our template, between these tags we will find a series of codes that are actually a CSS style that defines the appearance of our blog.

For those who don't want to touch the template code, you can add CSS directly by going to Blogger Template Designer > Advanced > Add CSS .

That's enough for today. In the next tutorial we will learn how to add rounded corners to our images using CSS -> how to put rounded borders around an image using CSS .