I have recently started learning web development and to help you out these are some of the basic HTML and CSS things to get started with your Web Dev Journey.
A Website is mainly built on 3 things:
- HTML: Structure
- CSS: Styling
- JavaScript: Functionality
Let's not talk not about JavaScript as of now.
Let's Begin!!!!!
What is HTML?
HTML stands for Hyper Text markup language.
It's the structure of a website.
HTML elements tell the browser how to display the content.
It is not a programming language.
HTML is mostly case insensitive, but there are a few exceptions.
Anatomy of an HTML element
- Opening Tag
- Closing Tag
- Content
- Element
HTML head
- Anything written in the head is not displayed in the web browser.
- It contains information such as title, links for CSS, favicons, metadata.
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
HTML body
- The actual HTML elements are written in the body.
- Everything that we want to show on our website is written in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Metadata in HTML
- It is something that describes data.
- It does not have a closing tag.
- The metadata is in the head of HTML and is not visible on the website.
<meta charset="utf-8">
- Example of meta tag : utf-8 is a universal character set that can display any language on your website so it's a good idea to set this on our website.
Semantic HTML vs Non-Semantic HTML:
Non Semantic elements don't clearly describe its content the browser understands what it is but the developer may not.
Semantic elements define its content in such a way that both the browser and the developer know what it means.
Both do the same thing but the
<footer>tag describes it better.
Non-Semantic HTML
<div>This is a footer </div>
Semantic HTML
<footer>This is a footer </footer>
Block and Inline Elements
- Block-level elements take the full width on the page.
- Inline elements take only the width necessary.
What is CSS?
- CSS stands for Cascading style sheet.
- It makes our website more attractive and presentable.
- It can be used to style our website in every way possible colors, fonts, shadow, animation, and many more.
- It is used to make our website responsive so that It looks good on any screen size.
- CSS is very vast and we don't have to learn everything in the beginning.
How to use CSS?
There are 3 ways of adding CSS to your website:
- Inline CSS: It is directly defined in an HTML tag.
<h1 style="color: blue;"> This is BLUE now </h1>
- Internal CSS: It is defined in the
<head>section.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: gray;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- External CSS: An external style sheet is used to define the style for many HTML pages and is linked from the HTML page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Selectors
- They are used to select a particular HMTL element or an entire page to style as we desire.
There are many selectors:
- Simple selectors (select elements based on name, id, class).
- Combinator selectors (select elements based on a specific relationship between them).
- Pseudo-class selectors (select elements based on a certain state).
- Pseudo-elements selectors (select and style a part of an element).
- Attribute selectors (select elements based on an attribute or attribute value).
- The most commonly used are simple selectors.
CSS Box Model
- Every element that we use has a rectangular box according to CSS which is called a Box Model.
- This box model is helpful in designing and layout.
It has 4 parts:
- Content: The actual content like text and images.
- Padding: An area covering the content that is transparent.
- Border: A border covering the padding.
- Margin: An area around the border that is transparent.
If you learned something new today why not connect with me?