What is HTML and CSS?

HTML and CSS are the two core web scripting languages that are used to create web applications and web pages. Together with JavaScript, HTML and CSS define how your website will look and feel to visitors.

HTML

HTML, short for Hypertext Markup Language, is the first building block for the development of websites and is mostly used to provide structure and layout of the content that appears on the pages of a website. Put simply, HTML resembles a newspaper layout, but for web pages. Since its inception in 1989 by Tim Berners-Lee, who also introduced the world to World Wide Web, HTML has significantly evolved over the years from its original status and functionality.

HTML functions through a group of markup tags which define the structure of a page. Each tag defines a different component within a page, such as the title of the page, headings, body paragraphs, images and other information that is displayed on a web page. For Example:

<title>This is the title of the page.</title>

As seen in the above piece of code, h is short for heading and it is used as a tag at the start and the end to form a complete element. The result of this code will look like this:

Similarly, elements for all other components, such as head, title, body, and paragraph can be defined. Basic formatting for these components, like italics, bold, alignment, font, text size can be incorporated within already existing page component tags. For Example:

<p>This is normal text — <b> and this is bold text</b>.</p>

The result of this HTML element will look like this:

HTML 5, the latest version of the programming language, allows developers to manage the contents of a website effectively and supports the incorporation of media, such as audio and video and other forms of data into its code easily. An HTML code always start with <html> and ends with </html> and the code itself is not case sensitive.

Related Article: Where Do You Learn HTML & CSS in 2020?

CSS

CSS or Cascading Styling Sheets is a style sheet language that used to describe the presentation and design of content written within a markup language, such as HTML. It allows numerous styles to be applied to HTML elements to modify the appearance of a website. In simple words, if HTML is the skeleton behind a website, CSS serves as its skin. Since CSS is independent from the actual markup languages themselves, the separation makes it easier for web developers to share custom style sheets across multiple pages and different environments. Oftentimes, experienced developers would incorporate different CSS styles to a website structure to achieve entirely unique websites while the HTML code remains the same.

There are three ways by which CSS styling can be added to a web page:

Inline styling:

Sometimes you might want to apply CSS to particular tags in an HTML document and not the entire page itself. This is where inline styling comes to the rescue. The method is usually not very common these days since it results in redundancy and takes considerable time to modify each tag separately, which brings us to the next method. For example:

<p style=”color: blue;”>This is a body paragraph.</p>

Internal Styling:

Unlike Inline styling, internal styling applied to the entire web page. The styles are incorporated within the <head> tag of a web page, which makes sure the styles are applied to every page element. For instance:

<head>

<title>Hello! This is my new website.</title>

<style>

P{color: blue;}

</style>

</head>

External Styling:

Rather than styling individual tags and pages, expert users prepare the CSS codes for styling in a separate file, called style.css, and then link it to the main HTML website code. This allows users to style the entire website with a consolidated list of styling commands, which makes modifications and troubleshooting relatively easier and saves time.

Final Words:

While the syntax in HTML and CSS may differ, these two web programming languages are compatible and go hand in hand with one another. Each one targets a specific domain in website designing and most modern websites today are the result of their combined power.

Originally published at https://www.rizvihaider.com on July 10, 2020.

Entrepreneur and crypto enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Flutter Bloc — Bloc Pattern | HTTP request | decoding JSON bundle.

Horizontal Scaling Vs Vertical Scaling

Sugui Digest SE01EP04- masks on

Meet Our Team: Sergey Lesninsky, Infomatix CTO

Benefits of Microservices in Insurance — WalkingTree Technologies

A Battle Plan for Outlines

Otsimo Game Development 101

5 Habits That Made Me a Better Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rizvi Haider

Rizvi Haider

Entrepreneur and crypto enthusiast

More from Medium

How to create a responsive contact form using HTML

Top 5 CSS Frameworks to check out in 2022.

Sorting/Rearranging HTML elements using jQuery UI — A Small Guide With Example

sortable / rearranged divs using jquery with placeholder

How I Learned CSS Flexbox With The Odin Project