The Basics of Web Design – Learn to Apply Small Tweaks

If you want to learn the basics of web design, then you’re on the right place. We are going to help you learn some basics of web design and by that, we won’t go into any kind of theory, just the very basics so that you can apply small tweaks by yourself without calling your web designer to do a simple color change that’ll cost you $10. I’m sure you are eager to learn, let us begin.

CSS Selectors

The very first thing that you need to learn is using CSS selectors. Without knowing how to use these CSS selectors, you won’t be able to do anything. The first kind of selector is the element selector; this is the simplest of all because this selector targets a particular HTML element. Below, we used an element selector targeting the <p> tags or all paragraphs and telling the browser to align all paragraph texts to center and color them red. Take note of the semi-colon, that means your rule ends, for example, you set a rule for “text-align” then put a colon and place the rule value, which is “center” and end it with a semi-colon to tell CSS that it ends, apply it now. If you don’t put a semi-colon at the end of your rule, things will get pretty messed up.

p {

text-align: center;

color: red;

}

 

In a nutshell, we do this: “selector {property: value;}”, and the indentations are there for the sake of readability, but you don’t have to put them at all, but of course, it’ll be easier to read than this one:

p {text-align: center;color: red;}

 

Now that you learned how to use the simplest selectors and how to apply rules, let’s move on to the next type of selector: the id selector.

#para1 {

text-align: center;

color: red;

}

 

As you can see, everything is the same except for the #para1, which is what you call an ID. The ID selector is the attribute of a selected HTML element. Remember that an ID is tied to a single html element. No two html element has the same id, even if they are of the same tag. Now, let’s move on to the last, the class selector.

.center {

text-align: center;

color: red;

}

 

As you can see, instead of a pound sign, it used a dot as a selector. Class applies to elements with a specific class attribute. Unlike the id selector, a class can be applied to many HTML elements. Another use of class is here:

p.center {

text-align: center;

color: red;

}

 

The example above will apply the rules only to those <p> elements of class center. That’s it! You have the very basics. To learn more, go to W3schools.