Relationship between HTML and CSS
What is HTML?
Html is a hypertext markup language that is used as a design language in websites. Remember this is not a programming language but the foundation of every website. Basically, that is what exactly we see in the website UI.
Html History
Let’s see the following pure HTML code.
When we run this code in the browser it looks like this
This is not attractive for users right?. That is why we use CSS.
What is CSS?
CSS is cascading style sheet. This is used for styling purposes of websites. Let’s see the following HTML code with CSS.
When running this code it looks like this,
Much better than a pure HTML website, right?
CSS can be added to HTML documents in 3 ways:
- Inline — by using the style attribute inside HTML elements
- Internal — by using a <style> element in the <head> section
- External — by using an <link> element to link to an external CSS file
As a best practice, the most common way to add CSS is to keep the styles in external CSS files.
Example for inline CSS
Example for internal CSS
Example for external CSS
The basic structure for HTML
These tags are called elements of HTML. HTML consists of a series of elements and elements that tell the browser how to display the content.
Meaning of basic elements
- The <!DOCTYPE html> declaration defines that this document is an HTML5 document
- The <html> element is the root element of an HTML page
- The <head> element contains meta-information about the HTML page
- The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
- The <body> element defines the document’s body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
