What is CSS?

CSS

A basic website consists of 3 parts: HTML, CSS, and JavaScript. In this article, I'm going to give you a brief overview of CSS - what it is, how does it work and how can it help up. If you want to know about HTML, then read my HTML introduction.

#1 - What is CSS?

CSS stands for "Cascading Style Sheets" and represents a design language that helps HTML websites to get the web pages presentable. This means it has an important effect on the visual part of the websites.

CSS is really easy to learn and use. There are tons of materials in the web on how to achieve specific visual aspects with CSS.

Using CSS, you can control almost every visual aspect of your HTML presentation: the color of your text, the style of fonts, the spacing between paragraphs, background colors, borders, etc.

Web

CSS allows you to build visually-rich websites. So, if you ever wish to change your website drastically, then sometimes even one line of CSS might do the trick.

#2 - How does CSS work?

I assume you have played around with HTML a bit. HTML allows you to assign different classes and ids to different elements. Those classes allow CSS to easily select HTML elements and assign the style to those. A typical example would be something like this:

<div class="my-first-class"></div>

.my-first-class {
background-color: #000;
}

The code above creates a new HTML div container and sets its background color to black (#000).

There are 3 ways to apply a CSS code to HTML:

  • inline styling. CSS is written directly into the element: <div style="background-color: #000;"></div>
  • internal styling. CSS is added to the style tag in the document's head section.
    <head>
    <style>
    .my-first-class {
    background-color: #000;
    }
    </style>
    </head>
  • external styling. CSS is written into the CSS file and included in the HTML file.
    <head>
    <link rel="stylesheet" href="my-styles.css">
    </head>

Browsers understand all of those ways and easily display a div element with a black background. While HTML describes the layout, CSS describes how that layout should visually be presented.

#3 - How can CSS help us?

There is one big point here. CSS controls how we see elements on websites. Every beautiful and less beautiful site uses CSS in some way.

Even if you use a website builder like Wix or Weebly or even Wordpress, then it is important to know that those use CSS as well it is just handled behind the scenes. To create a perfect website you must know CSS, there is no way around it.

#4 Tips on how to use CSS efficiently for your web pages.

The most important thing here is the structure. You should always structure your HTML and CSS to be reusable, meaning that to similar block you should give the same classes and so on. And always use external CSS, because it gives you separation and reusability.

Chrome CSS editor

You can play with CSS of other pages in the developer tools as well. Right-click on the website and press inspect, the CSS will be on the right part of your screen.

What is HTML?

HTML

We have all heard about a technology called HTML, but fewer of us know what it is, how does it work and how can we make use of it.

In this article, I give you an overview of HTML.

#1 - What is HTML?

HTML is the oldest way of creating websites and everything that runs online now. HTML stands for HyperText Markup Language. In other words, HTML represents a code language used for website creation.

Users of HTML say that once you've learned the basics, it's easy to use. HTML became accessible for everyone, as there are many tutorials on how to use it and make it efficient.

HTML is a markup language. If you have used other markup languages before, it should be really easy to understand for you.

#2 - How does HTML work?

HTML has a large list of shortcodes. These are called tags. There are nearly 100 different HTML5 tags, but don't worry you don't have to know them all. You need to know about 10 easy ones and you are good to go.

HTML Code

All you have to do is write some tags into a file and save it with .html extension. If the syntax is valid you can view it in your web browser. Any web browser today can read HTML5 code alongside with CSS and JavaScript.

#3 - Why do we need HTML?

HTML + CSS + JavaScript is the most basic way of creating websites. All other tools like for example Wordpress, Wix or even React.js generate your input into these 3 languages. It's just how the web works.

Website builders handle HTML code for you, but it is still really useful to know how it works. Imagine you have a bug, that you cannot find a solution to. Imagine if you knew HTML, CSS, and JavaScript you would probably find the bug with ease and react on in.

You can check HTML code in your browser by navigating to any site, right-clicking on it and pressing inspect.

Chrome HTML Inspector

For ease of, course using tool like Wix or Wordpress is recommended depending on your needs, but in my personal opinion, it is also important to know the basics.

HTML is the skeleton of the Internet. Nor CSS or JavaScript will work if there's no HTML code at the base of it.

I can give you 3 why you need HTML:

  • You can easily find and repair bugs in your websites.
  • You are not limited to software tools like website builders.
  • You could apply for a job in website development.

So go to your web browser and start digging the HTML of other peoples' websites. You can learn a lot from doing it.

Site Footer

Sliding Sidebar