My hands-on experience with HTML and CSS
To begin with, unlike my previous belief, neither HTML nor CSS is a programming language. Instead they are markup and styling languages respectively.
Talking about HTML, it has an easy to grasp syntax which has been further simplified after the addition of certain semantic tags in HTML5 (the latest version). Regardless of the content, every HTML page on any given website has to have a predefined boilerplate which is as follows:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="utf-8">
<title>invisible on the webpage, instead shows up on the tab selecter in browser</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
-While we are discussing about the HTML boilerplate, lets also talk about another vital aspect, indentation (absent here as medium’s text editor is not a full blown coding editor). Indentation simply means proper spacing between parent and child elements which makes it easy to read and maintain code. For proper indentation, press the spacebar twice or tab button once. While static websites that only have a handful of pages can get away without using proper indentation, as the size of a website grows gradually, it will become harder to edit and maintain its source code.
Furthermore, let's talk about another vital aspects of an html element which are attributes and their corresponding values. An attribute can be chosen to alter the behaviour of the element and value reflects all the possible options. (For eg: target=”blank”, used to open url in new tab)
Note: It is not necessary to have header, main and footer between the opening and closing body tags. But it helps with factors such as a webpage’s SEO (Search Engine Optimisation) and it is greatly helpful for visually impaired users that browse a webpage on text to speech devices or audio browsers.
-While, HTML follows a syntax of encompassing content with opening and closing tags for most elements, it is not applicable to every element, some of which include <meta>, <link> and <img>.
-Some fo the previously mentioned semantic tags that were introduced with HTML 5 include the following:
<header> (used for the top-most content on the webpage like logo and company name)
<nav>(used as short for navigation part which is found on most websites with a contemporary layout)
<article> (as the name suggests, used to wrap content like articles on a webpage. To classify a group of image, text and headings as an article, one must question whether its contents make complete sense if sent via mail/printed on a paper or not)
<section>(can be used to group several elements together in to a logical grouping. Eg: set of images bundled together)
<aside>(used to place supportive content on the left or right side of a webpage like related stories or similar links. Consists of supportive content. It’s absence won’t necessarily effect the main content like an article)
<footer>(placed at the bottom of the webpage, can have content like quick links, social media links, copyright information)
Did you know: these semantic tags are derived from the most commonly assigned classes by independent developers across the globe for certain div sections in a webpage, according to regulators of HTML.
Some of the most commonly used elements in an HTML page are listed below:
<p>(Used for writing paragraph)
<h1>to<h6>(Used for headings. different numbers followed by ‘h’ change the font size of text displayed on the webpage, h1 has the highest font size and h6 has the lowest.)
<img>(used for embedding images in a webpage. the element name is followed by src=””. Can accepts local files (relative path) stored in parent directory or fetch images from URL on another website aka (absolute path). Besides, it is recommended to incorporate another attribute called alt with value that contains the definition of the image.
<b> and<strong>(text encompassed with these tags appear bold in comparison to its neighbouring text. Used to draw readers attention. While strong also has a semantic meaning which helps search engine crawlers to take note of this content, <b> only serves the previously mentioned purpose i.e making text visually appealing.
<i> and <em>(both are used to italicise encompassing text. em also has semantic meaning whereas i does not)
<div>It is used to club several elements together simplifying code maintenance and understandability. It does not have any impact on the source code, just makes the code easier to read for the developers.
<span>(content encompassed by this tag can be added a class which can make it easy to style it via CSS. For eg: if the developer wants to change the colour, font-style or font-size of a certain words or a sentence in a heading or paragraph, they can refer to them via the defined class in the stylesheet (coming right ahead).)
It is also important to know that HTML supports two different types of elements which includes inline and block. For the record, their is another hybrid type which is called inline-block, however, we will spare it for a later point.
Speaking of their difference, block level elements take up the entire width of a webpage regardless of the content’s actual width, eg: <p>, <heading>.Whereas inline level elements only take-up the width that is required to accommodate the element content, For eg: <images>.
CSS begins here
CSS short for Cascading style sheet can be referred to as the flesh and skin of a webpage. While HTML acts as a skeleton that markups content on a webpage, CSS can be used to add flare aka style to those elements. Besides, positioning of content across varied devices is also controlled via CSS.
To implement CSS in an HTML file, developers have three options which include the following:
- Inline CSS (written within the element tag)
- Internal CSS (written between the <style></style> tag which is a child of the <head>)
- External CSS (recommended way of implementing a stylesheet)
In order for the styles added in the external CSS to come into play, the developer must establish a connection between the CSS and HTML page with the help of <link> tag. The precise piece of code for establishing connection is listed below where main.css is the name of the CSS file. Noteworthy, the link tag should be a child of the <head> tag which is placed right above the beginning of the body tag:
<link rel=”spreadsheet” href=”main.css” type=”text/css”(optional)>
There are three different types of selectors to target a particular element which include the following:
- Type Selector (targeted directly via the HTML element without tags)
For eg: p {}. Everything inside the curly braces will either be the attribute or a value.
2. Class selector(can target classes that developers have implemented while writing the HTML structure.)
Syntax: .Class {}. Everything inside the curly braces will either be the attribute or a value.
3.Id selector(can be used to target id’s implemented in HTML. Note: each id is unique per HTML page)
Syntax:#id{}. Everything inside the curly braces will either be the attribute or a value.
Except for these three types, CSS also supports consolidation of different selectors which can narrow down a particular element in a lengthy HTML webpage. We will read about these methods in the upcoming days.
