What the heck is HTML & CSS?
Learning Web Development the right way.
I was introduced to Web Development around a year ago, and since then I have been aspiring to come into this field. After reading many many and many articles about how to learn, where to start, how much time it would take me to learn a particular technology, I came across AltCampus — a coding boot camp in a Himalayan village called Dharmshala. And since life is good now. It has been just a few days since I came here but I have already learned so many things and did projects that might have taken me a month, at least.
I am writing this article so that I can emphasize on the things I have learned yet and retain it for a longer time, to see if I can explain things that I learned till now. If you find anything useful, please follow along with me.
Building blocks of a Website
A website is generally built of three main components- HTML, CSS, and JavaScript.
- The HTML stands for Hyper-text Markup Language. It defines the structure of your website. Defining how things are to be laid out on a particular webpage is what HTML is used for. It can be compared to the body of a human.
- CSS is used to put styles to our coded plain HTML to make things look more desirable to the user. It also helps in maintaining the continuity of a website. Hence, the name Cascading StyleSheet. Concerning our human body example, we can say that CSS is how we put clothes and make-up on that body.
- The JavaScript is a medium to provide interaction with the website. Its the only programming language for the logic. Javascript helps to tell that human what to do.
HTML
To create an HTML file, open a text editor and save the document with .hmtl extension. For eg, index.html. HTML is just a markup language. It means we enclose a particular text; para or heading, inside a pair of tags.
An HTML file consists of a pair of HTML tag (<html></html>), inside which there’s a head tag (<head></head>) and body tags (<body></body>). Inside the head tag, we put extra information about the page, like links to the CSS file(we will understand this later). And our content that we want to display goes inside the body tag. Now our HTML file would look something like this:
To write the contents of a webpage, we write the way we write in English but with our pair of tags. The general syntax for our content would be like this:
For paragraph we use <p> tag. So our paragraph becomes:
<p>Hello World</p>
The content with its opening and closing tag is called an Element.
Similarly, we have tags for
- Headings- <h1>,<2>,<h3>,<h4>,<h5>,<h6>.
- Images- <img> (Its a self closing tag: it doesn’t require a closing tag).
- Links- <a></a>.
There are many more but we use these often.
Let’s give heading, a paragraph and an image followed by a link to our page and After putting the contents our index.html file looks something like this:
CSS
Till now, we have defined the structure of our page. If we open our HTML file in the browser, we see:
Boring as hell, isn’t it?
That’s where CSS comes into play. We use CSS to put styles to our page, like changing font size, background color or an image in the background, aligning things, etc.
To use CSS we have three ways to tell the browser to connect with the HTML file:
- Inline- Inside the opening tag and specifying the styles in that line preceded by the keyword style. For eg,
<p style=“color: green”>Hello World</p>.
This changes the color of the paragraph text to green.
- Internal- Defining our styles inside head tag, enclosed in <style></style>
- External- Creating a file with extension .css (as in styles.css) and then declaring the styles in the file. We then link the file using <link> tag inside the head of our index.html file. This is the preferred way to style our file, to make our code more clean and lenient. We will be doing the same for our website.
Let’s create a file with name main.css and link it to our Html file.
To put styles on content, we select the tag of our content (on which we want to put styles on) and define what we want to do. To target the tag, we use selectors. Selectors are basically hooks that help to apply our styles on the selected tag.
For instance, if we want to change the background color of the paragraphs on our webpage, our CSS code should look something like this:
Let’s break up the code to understand what these things do.
p- Here p is a selector, working as a hook on which we can add styles on.
background-color- It is a property used to change the background color of an element.
green: It is a value given to the property to apply to the selected element.
Every style should be in this format only i.e. Selector enclosing property-value pair inside parentheses.
After applying some styles (or CSS) our code should look like this:
After linking the main.css, our index.html file looks like:
Here’s our webpage now:
Much better than before. It is more desirable than before. It makes our webpage more intuitive.
That’s it for now. It might be overwhelming if you’re learning all this for the first time.
Let’s Be Short And Be Consistent.
Anyway, if you want to learn more here’s the link to my next article in case you are in a hurry.
In case we are meeting for the first time, hello. My name is Anas Ansari. I am learning Full Stack Development at AltCampus.
