What Is HTML/CSS and how does it works?

So just imagine a car or a truck. You always have the frame which carries the whole load of the vehicle and then you have the body over the whole frame with a paint job. How can you compare a vehicle with HTML/CSS? Well HTML is the whole frame or the basic structure of a website and CSS is like the body and its paint job. Remember that HTML/CSS are the basic web development languages and are required

HTML : The main structure

HTML refers as HYPERTEXT MARKUP LANGUAGE. It is impossible to create a webpage without HTML since it is the basic structure of everything. Even programming languages, like JavaScript, are completely dependent on HTML. One thing to consider is that HTML is not a programming language but rather a rendering language.

HTML consist of markup tags </> and attributes inside those tags and it is completely dependent on those tags. Each tag can perform different tasks like creating an ordered list <OL> or an unordered list <UL>. Each tag gets opened with < > and gets closed with </>. Example: <p>This is an HTML paragraph</p>. You can also divide sections on one page with the <DIV> tag. The <DIV> tag is what permits you to customize various sections of your webpage in an independent way.

When you see, for example, a Shopify store with different boxes containing products and price tags, those are all <DIV> tags. Each <DIV> is customized independently in the CSS file. Of course, there are functions to customize all <DIV> in the same way. Also another main thing you can do in HTML is inserting images or links to other websites.

All of the text you see in a webpage is all HTML and it is inserted with <P> tags which refers to “paragraph”. Every web application is inserted on an HTML file.

The ‘paint job’…. or you can call it CSS

So now let’s discuss the ‘paint job’. CSS refers to Cascading Style Sheet. It is the language we use to style our website with colors, borders, background images etc. CSS is pretty easy to understand and to use but it can require a couple of years to become a ‘master’ at it. Don’t get discouraged, a lot of people are not the biggest experts in CSS and can still land a job as a Web Developer. The most important thing is to learn something new every day and always take notes.

Basically, CSS works with selectors that has to be added in HTML in order to customize any part of the website. An example I can give you: If you want to customize a paragraph, you first need to insert <p>Paragraph</p>. Then you need to give an ID or CLASS to this tag. Here is an example: <p id=”First-para”>This is a normal paragraph</p>. As you can see, the attribute is inside the opening tag and I gave a name to this paragraph. Now in the CSS file, I need to write .first-para {} to select the identified paragraph. And between the brackets {} I can start writing which fonts I want, background colors, images etc. It is pretty simple to use CSS and you can check on w3schools.com for the libraries of CSS.

Let me show you an example of HTML/CSS

The image below is an example of a webpage with HTML and CSS

Image of HTML/CSS

And now the next image below is the page above but without the CSS file linked to it…

Image of HTML/CSS

What you do thinK? The paint job is missing right? You can see that the whole structure and text is all there but there isn’t any style. If you want to see more of these examples go to my portfolio.

Leave a Comment

Your email address will not be published. Required fields are marked *