16 CSS Tutorial begins – HTML and CSS Tutorial for Beginners

Last updated on October 31st, 2020 at 07:55 am.

16 CSS Tutorial Intro

CSS Tutorial begins – HTML and CSS Tutorial for Beginners

In the last fifteen posts and Videos we looked at HTML. In the next fifteen we’ll look at CSS . If you want to learn more about HTML, check out this HTML/CSS tutorial .

You have learned how HTML works. How it is used. So, let us move on to Cascading Stylesheets (CSS). CSS is used for styling the HTML you write. It is what gives the web page it’s appearance. For example you may use it to:

  • Position elements on the page. You may use it to arrange your divs or other content the way you like.
  • Color items on the page. Use it to provide different colors for Text, Backgrounds, Links and so on.
  • Provide different Sizes for elements on the page. You may decide to give Texts, Headings, Links , Paragraphs , images specific sizes. This can be achieved using CSS.

The creation of CSS was a big deal because using HTML to structure the page as well as to handle presentation of the Web Page was a tedious job. Most of the HTML tags and attributes which were then used for presentation have since been deprecated. The only job of CSS should be to handle the appearance of your Website.

You can see how this is a good thing for separation of concerns. In Computer Science, separation of concern is the idea that, every part of a program should only handle what it should. That is to say everything should only handle one thing without mixing things up. For instance if some module/class  is handling data, let it only deal with data. And you should not use the same module/ class to present that data to the user. Let some other class handle the presentation of data.

With that in mind, you can see that this is enforced whenever you build a new website or a new web page. You will always write your HTML and then write your CSS to handle the appearance of your Web Page. And they will usually be on different files.

How CSS is used in HTML

We’ll look at this in great detail in the next post, but let us just brush over it a little bit.

There are 3 ways of using CSS to style HTML. And they include:

1. Using an External CSS File

In this case, you will write all your CSS in another file. Store that file with [dot]css extension eg mystyles.css  .

You will then link to that CSS file in your HTML file. In the <head> section of your HTML you will link to your style’s file as follows:

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

2. Wrapping your code in the <style> </style>

You will add your css block in the head section of your HTML as follows:

<style type="text/css">

body {background-color: #fff;
    color: #000;
    margin: auto;
   }
 
 </style>

You will learn all about the css used above in due time.

3. Inline CSS

Inline CSS refers to that which is used directly on the HTML tags.

<a href=”https://bizanosa.com/” style="color:blue;">go to BZN</a>

We’ll learn more about these in the next section.

To learn more about HTML and CSS use the button below:

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!