INTRODUCTION TO HTML AND CSS

Introduction

So here it is: it’s time to actually start making things. This section will teach you the basics of HTML and CSS,
the two foundational building blocks of pretty much everything on the web.

Learning Outcomes

• Get a basic overview of HTML, CSS and how they work together.

HTML and CSS

HTML and CSS are two languages that work together to create everything that you see when you look at
something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists
and buttons are created in HTML. CSS is what adds style to those plain elements. HTML is used to put
information on a webpage and CSS is used to position that information, give it color, change the font and
make it look great!

If you want to get technical, HTML and CSS aren’t programming languages because they are only concerned
with presenting information. They are not used to program any logic. JavaScript, which you will be learning
in the next section, is a programming language because it’s used to make webpages do things. There is quite
a lot you can accomplish with just HTML and CSS however, and you will definitely need them both. The
following lessons focus on giving you the tools you need to be successful once you get to the JavaScript
content as you continue through our curriculum!

When you’re designing or developing a website, there are three different coding languages that you will want
to be aware of: HTML, CSS, and JavaScript.

• HTML: a language that determines how documents and web pages are displayed in a web browser, the
language for the building blocks of any website.

• CSS (Cascading Style Sheets): a popular style sheet language that determines how a document created
in HTML is styled (colors, font styles, layout and responsive features).
 • Javascript: allows you to change CSS and HTML elements on your website after the site has been loaded,
which gives you the ability to make your site more interactive and engaging for users.

These three programming languages are typically the foundation of any website, which is why it’s important
that you’re aware of how these languages will affect your website and what they are typically used for.

Contents

1 What Can You Do with Each Programming Language?

2 Web Development & Coding Languages

3 What is HTML?

3.1 What Can You Do With HTML?

4 What is CSS?

4.1 What Can You Do With CSS?

5 What is JavaScript?

5.1 What Can You Do With JavaScript?

• With HTML, you will be able to create the structure of your website.

• CSS gives you the ability to make the website look more visually appealing.

• As for JavaScript, this is a robust programming language that allows you to effectively change the HTML
and CSS components of your website to match your specifications precisely.

If you own a website but don’t know much about coding, knowing the difference between these three
programming languages should help you better understand what goes into developing a website. If ever a
problem occurs with a component of your site, having a clear idea of what these programming languages are
may be enough to help you properly diagnose what is causing the problem and how to fix it.

The following article provides an in-depth comparison of the HTML, CSS, and JavaScript programming languages.

Web Development & Coding Languages

Websites can be developed with the use of a wide range of different coding and programming languages, some
of which are more complex than others. Some of the most common web development languages include
HTML, CSS, JavaScript, PHP, Python, Ruby, and SQL. While Ruby and PHP are exceedingly popular among
entrepreneurs, startups, and web developers, the primary languages of HTML, CSS, and JavaScript should be
enough for you to understand the basics of web design and development.

Each of these web development languages has a different purpose. For instance, Ruby is a scalable and fast
programming language that can help you build an extensive website or program in just a short period of time.
When paired with the Ruby on Rails framework, this language gives developers practically everything they need
to build a website. With a language like SQL, developers can maintain and optimize large databases in a much
more streamlined manner.

Different types of projects incorporate different languages of code. Many professional web developers also have
their own preferences that they will use even if other programming languages have proven to be more popular.
Various platforms are built on different languages. For instance, WordPress is built mainly with powerful PHP
code even though HTML and CSS are used as well.

The main language that you use all depends on your specific project and the business goals that you have. By
identifying what these goals are, you should have a better idea of which languages are ideal when you are
developing a website or application.

What is HTML?
HTML is a programming language that stands for Hypertext Markup Language. This is a relatively simplistic yet
powerful programming language that allows web developers and website owners to create the structure of
their website. If you want a sentence in a blog post to receive a bold font, HTML could be used to achieve this.
When using this system, any text files can be tagged for effects, graphics, fonts, or colors. If you’ve never used
any kind of programming language in the past, HTML would be a great place to start. Keep in mind that HTML
markups are enhanced by CSS and JavaScript, which is why it’s recommended that you learn this programming
language first.

What Can You Do With HTML?

The main reason why it’s important to know HTML is because it allows you as a website owner to create the
basic structure of you website, from which you can use any other coding language to enhance the design.

• With a basic understanding of HTML, you can significantly increase the control and flexibility that you
have with your website.

• You’ll be able to make your own changes by having knowledge of this code.

• Some platforms will automatically implement many of the more complex functions of a website design,
which leaves you with the ability to tend to the minor changes that can be made with HTML.

What is CSS?
CSS is a style sheet language that’s focused almost entirely on improving the presentation of HTML
elements. While CSS is a static programming language, it can be used to make your website appear visually
pleasing and modern. If you want your website to have a sleek and stylish design, CSS is the programming
language to use. With a basic understanding of CSS, you can make changes to the overall look and feel of your
website, which is useful when you want to match the appearance of your website with the aesthetics of your
brand.

What Can You Do With CSS?

Even though CSS is primarily used to create static visual effects, the latest versions of the programming language
offer some functionality for the creation of very simple animations.

• If you want to change the color of some of the text on a web page, basic CSS would allow you to do so
by adding “style” code to the HTML code that’s already found on your page.

• Along with the presentation of HTML, CSS can also be used to alter the layout and formatting of your
website.

• Once you know the basics of CSS, you should be capable of improving the look of your website and all of
the HTML that you have already added to the design.

What is JavaScript?
JavaScript is among the most important programming languages for website owners who want to make their
site more interactive, which makes this the most complex of the three standard programming languages in
this article. While HTML provides the structure for a website and CSS allows you to control the presentation of
a site, the JavaScript programming language gives you the tools that you need to alter the behavior of different
elements that are found on a website page. With this tool, you can add a layer of interactivity to the CSS and
HTML elements on your website, which is highly recommended if you want your website to appeal to the
modern customer.

Most modern websites come with a menu button that can be clicked to display a selection of areas on the
website that you can navigate to. The menu button usually reveals a small menu on the side of the page, which
adds interactivity to the page itself. All of this is powered by JavaScript and can make your website appear to be
more modern and sophisticated.

With a basic understanding of JavaScript, you can manipulate the various interactive features of your website
to perform a wide range of actions. If you want to have complete control over the design and function of your
website, you should know at least some of the coding involved with JavaScript.

What Can You Do With JavaScript?

The types of things that you can do with JavaScript are practically limitless. This programming language can
provide you with the tools needed to:

• Create a calculator for your website

• Create various keyboard shortcuts that allow users to effortlessly navigate to other pages

• Play animations when users scroll down the page

Since you can change your HTML and CSS elements with JavaScript, this can be a very beneficial language to
learn.

Knowledge Check

• What do HTML and CSS stand for?