Getting Started with HTML & CSS
Hi! I am Deepak Sharma. Currently, I am learning Web Development at AltCampus, Dharamshala, Himachal Pradesh. This is my first blog on medium, In this blog, I am going to describe the basics of HTML and CSS.
Introduction to HTML
HTML stands for HyperText Markup Language. “HyperText” refers to the hyperlinks that an HTML page may contain. “Markup language” refers to the way tags are used to define the page layout and elements within the page, HTML is used to create webpages. First developed by Tim Berners Lee in 1990.
Difference HTML, CSS & JavaScript?
When you will start learning web development then you will get familiar with HTML, CSS, and JavaScript. These languages are closely related to each other but entirely different from each other. Let discuss them one by one:
HTML defines the content of web pages or you can say that HTML defines the structure of a webpage.
CSS (Cascading Style Sheet) is used to style the appearance of content, for example, fonts or colors.
JavaScript provides the functionality to the website. It determines actions to be performed based on user interactions.
HTML & CSS are not considered as a programming language. HTML is a markup language, while JavaScript is a programming language.
Elements, Tags, and Attributes
An element is consists of a start tag, content, and an end tag.
Tags are used to mark up the start and end of an HTML element. A start tag consists of an opening angle bracket(<) followed by the element name, zero or more space-separated attribute/value pairs, and a closing angle bracket (>).
Attributes provide some extra information about the element, which actually doesn’t appear as content in a webpage. An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag.
<a href="https://altcampus.io/">AltCampus</a>
In this example,
<a href="https://altcampus.io/">AltCampus</a> is an element
<a href="https://altcampus.io/"> is an opening tag that tells the browser that the content that follows it is a link(URL).
The second tag, </a>indicates that it is a closing tag that tells the browser that the anchor element is ending.
“href” is an attribute within the <a> tag and “https://altcampus.io/” is the value of the “href” attribute.
Standard HTML Document Structure
Let’s open a text-editor, it can be any either Notepad or vs code or sublime whatever you prefer. Create a new file and write the given code in the file and save it with .html extension. Let’s start the coding part now
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
</head>
<body></body>
</html>
Example Explained
- The
<!DOCTYPE html>declaration defines this document to be HTML5 - The
<html >element is the root element of an HTML page - The
<head>element contains meta-information about the document - The
<title>element specifies a title for the document - The
<body>element contains the visible page content
Self Closing Elements
There are few tags that don’t require closing tags and they can end within a starting tag only
The following tags are self-closing tags.<br /> — single line break in a paragraph.<embed /> — embeds things like flash.<hr /> — change in the type of content.<iframe /> — frame inside the page.<img /> — image.<input /> — input field .<link /> — include an external style sheet.<meta /> — metadata about the page.<param /> — parameter for an object.<source /> — include media for video or audio.<track /> — text track for video or audio.
Nesting and Indentation
In HTML, inconsistent indentation and spacing will not impact the functionality of the web page but will cause your code to be difficult to read and understand. Sloppy code is difficult for everyone to work with.
Here is an example of some HTML with poor indentation and spacing:
<!DOCTYPE html>
<html><head>
<title> Example title</title>
</head>
<body>
<h1>Example header</h1>
<p> Page content </p>
</body>
</html>It is difficult to see where the various elements begin and end and which elements are nested within other elements.
Here is the same code with standard indentation and spacing:
<!DOCTYPE html>
<html lang>
<head>
<title>Example title</title>
</head>
<body>
<h1>Example header</h1> <p>Page content</p>
</body>
</html>
Introduction to CSS.
To create the simple structure of the page, we use HTML and in a similar way for styling purposes, we use CSS. It can be said that if HTML is drywall then CSS is beautiful paint on the walls.
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on the screen, paper, or in other media
Selectors, Properties, Values
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts −
- Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like
<h1>or<table>etc. - Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
- Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
Types of Selectors(Type, Class, ID).
Referencing CSS
CSS can either be attached as a separate document or embedded in the HTML document itself. There are three methods of including CSS in an HTML file:
1. Inline Styling
In inline styling, we write our style inside the tag only. For example,
<h1 style="color:blue;">AltCampus</div>2. Internal Styling
An internal style sheet may be used if one single HTML page has a unique style. In internal styling, we define a style tag inside the head element and then we write our CSS. for example,
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
3. External Styling
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
An external style sheet can be written in any text editor and must be saved with a .css extension.
Here is how the “style.css” file looks like:
body {
background-color: lightblue;
}h1 {
color: navy;
margin-left: 20px;
}
Semantic & Non Semantic tags
A semantic element clearly describes its meaning to both the browser and the developer while non-semantic tells nothing about its content.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
<aside> <article> <section>, <header>, <nav>, <footer>,etc are few examples of semantic tags. If you see these semantic tags closely you can easily find the meaning from its name only.
Block vs Inline (div, span)
Every HTML element has a default display value depending on what type of element it is. The two display values are block and inline.
An inline element does not start on a new line and only takes up as much width as necessary. <span> element is an inline-level element
A block-level element always starts on a new line and takes up the full width available. The <div> element is a block-level element.
