Basic Guide to HTML & CSS — The Fundamentals of Web Development

HTML and CSS are not too disjointed concepts; rather they complement each other to enable designers to design and build websites. HTML, acronym for Hypertext Mark-up Language, primarily comprises various scripts using the content of website is created. CSS (Cascading Styling Sheets), on the other hand, is used for designing of the website, providing a common look and feel across the website in terms of background effects, layouts, visual impact etc.

HTML — Introduction

The initial ‘DOCTYPE’ tag is used for ‘document definition’ signifying the underlying script to be an HTML5 script. The ‘HTML’tag is the root tag for all HTML web pages (invariably enclosing the HTML code which gets rendered to the browser). The ‘HEAD’ tag caters to the meta data of the application wherein it doesn’t get rendered to the browser but stores valuable information of the web page. ‘TITLE’ tag provides the title of the web page which is displayed on the tab of the browser. Now, till now, none of the tags renders visible content to the webpage. The ‘BODY’ tag is responsible for controlling the visible content to the webpage. All other tags related to the visualization of content (P — paragraph, H — heading) are all enclosed within the BODY tag.

HTML — Specific Uses

a) Publishing of online documents in the digital space — be it photos, tables, text etc.
b) Retrieval of information or data from online sources
c) Form designs — specifically for e-commerce platforms, payment gateways etc.
d) Embedding external applications such as video clippings, excel spreadsheets etc.

CSS — Introduction

The above example signifies that the stylings ‘background-color is superimposed on the BODY tag. Therefore, all components displayed within the BODY tag of the HTML page would have a background color of light blue.

How to insert CSS to HTML?

In this, the style mentioned above would be applied to only this particular ‘H1’ tag. Now, if the designer wishes to have a common look and feel in a single web page, then the internal stylesheet is used.

In this case, the entire webpage drafted within the BODY tag would have the stylings as prescribed above.

Similarly, if the uniformity needs to be maintained across the entire website; an external stylesheet is used wherein a CSS file is referenced in the HEAD tag, and is thereby applied to all web pages within the particular website.