Web Basic 101 – CSS

Welcome to our fifth course, we’ll see a lot of new things today; we will start the basic of CSS (Cascading Style Sheet). In a hosted WordPress site, this is what give the looks to a theme.

CSS is a language in itself that will allow us to modify every aspect of a web page. There is three way to integrate your CSS into your HTML code. Today we will take a look at the most practical way of doing so, and that by keeping all your CSS into a separate file.

Let’s start, we will start by creating a style.css file where we will place all our CSS code. One of the advantage of placing all your CSS into a separate file if so you can reuse it later in other page or easily apply the same theme to your entire website. In order for our HTML code to see and use our CSS style we’ll need to include the file in the “head” part of our document. Here is an example of on how to add the style sheet into our code:

 <link rel="stylesheet" type="text/css" href="style.css">

We are not going to over analyse each attribute today. But be sure that they are all there and that the href attribute point to your CSS style sheet.

Our first CSS command!

h1 {
 color :#404040;
 font-size :20px;
 background-color :AliceBlue;
}

A CSS command is generally made up of three sections, the selector, the properties and the values. In our example, the selector is define by “h1”, the properties by “color”, “font-size” and “background-color” and finally, the values in the above example are #404040, 20px and AliceBlue.

When using CSS, all properties and values entered between the “{“ and the “}” symbol will affect our selector. In the above example, we’ve change the color, size and background color of all h1 tags of our document. Today mainly take a look at the color and background color properties. Obviously, this will change the text color and the background color of an object (defined by our selector).

Colors

They are multiple ways for displaying the colors, I usually use the hexadecimal values, but you can also select a color with the RGB, HSL or popular name (Like AliceBLue in the above example). At the following site, you can find a list of all color names that you could use in CSS: https://imagecolorpicker.com/. For those using a drawing software, you should already know what RGB of HSL is, if you wish to set a color with those values, here an example on how to set your color in CSS:

color :rgb(100%,0%,0%);

or

color :rbg(255,0,0);

The other property we’ve modify in this course is the font-size; like you’ve notice we’ve used an amount of pixel to set font height. As a best practice method, is instead of using pixel as a measuring unit, it to use “em”. The advantage with the “em” measurement is it will stay proportion with your screen. It will adapt whether you are using a mobile device of or a laptop.

That all for today, I strongly suggest taking a look at our video tutorial to see in practice how each property will affect our document.

In my next blog, we will dig a little further into the CSS.