What is HTML and CSS?

When I first was hired at a tech company, I was up to my eye balls in code that to me mine as well have been Latin because I had NO IDEA what it said and felt stupid not knowing what to do.

I found myself thinking, “What is a Tag?” and “What do you mean the code is broken?” I was so confused and the first month of work was a daily anxiety attack and prayer of, “God, please don’t let anyone ask me a question I don’t know!”

But inevitibly they did.

Question after question I had to swollow my pride and ask for help, Google the answers, read articles, read books, and study things I didn’t even know existed like the fact that there are several different coding languages.

I researched and researched and finally figured out that the first thing you have to learn is HTML and CSS because these are the building blocks of the web. But what is HTML and CSS and what do they do?

I am so glad you asked!

First I want you to imagine a plot of land and our HTML and CSS are going to help us build a house there. Ready?

HTML

HTML stands for HyperText Markup Language and is the bones of the webpage and/or website. Think of HTML as the structure of a house in progress.

HTML is made up of Tags, Elements, Meta Elements, Structural Elements, and Attributes

Tags

A Tag looks like this:

Most Tags have an open and closing Tag like this:

You can think of the Opening and Closing Tags as book ends that are holding the information inside together.

For Example the text above would look like this:

<p>You can think of the Opening and Closing Tags as book ends that are holding the information inside together.</p>

Elements

Now if we put it together with our text in the middle, we now have an element (like the above example). The full finished piece from Opening Tag to Closing Tag is considered an Element.

Meta Elements

Meta Elements are similar to Elements, however, they are not seen by the user. Meta Elements are used primarily by Web Developers and gives the web browser additional information about the webpage.

Structural Elements

Structural Elements include Tags like <div> and <span> that tells the browser whether to have the content be full width or just the space between its Tags.

Structural Elements also tell the browser where the footer is compared to the header

Attributes

Attributes contain additional information about Elements such as alignment or color.

CSS

CSS stands for Cascading Style Sheets and is used to suggest how a webpage should look and feel (or be rendered)

CSS can control Font size, color and type as well as page layout, styling around images, and mouse over effects to name a few.

CSS gives are house the <style> that we want to make it more pretty to look at.

Selectors

The Selector is the part of the HTML that the CSS is calling out to style; or select (thus selectors). The Selector is written to the left of the first curly bracket as follows

{ color:blue; }

*Note* that there is a space after the first bracket and before the final bracket.

In the above example

color: blue;

is called the Declaration (or Declaration Block). This piece of code is declaring what should happen to the Selector.

Declaration Box

The Declaration Box is made up of two parts the Property and the Value.

Property

The Property is what is being changed such as the color or font-face.

In the example above

color

is the property

Value

The Value is the color that was specified. In this case it was

blue;

*All Icons used by SmashIcons

Leave a Reply

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