Hello folks, this is ADMEC admin here from the web design and development institute and in this article, you’ll learn the most important things in HTML and CSS that every beginner should know. These are the building blocks of these languages so strap in
Table Of Contents
- What is HTML?
- Tags
- Attributes
- Comments
- HTML Structure
- How to save and open the file in the browser?
- Inline Elements
- Block Level Elements
- Semantic Elements
- Non- Semantic Elements
- What is CSS?
- How to use CSS with HTML?
- Selectors
- CSS Borders
- CSS Margin
- CSS Padding
- Box-Model
What is HTML?
HTML Short for HyperText Markup Language used for describing the structure of the webpages. It’s the building block/ skeleton of the webpage. It does that with the help of elements surrounded by tags “<” “>”. HTML is case insensitive language. HTML mainly has two extensions you write as filename.html or filename.htm
Note:
Case Insensitive Language means whether you write an element name in uppercase, lowercase or camelcase doesn’t matter, it’s all the same. Ex: <div> <Div> <DIV> all three are the same for the browser.
Case sensitive Language means you have to follow a specific writing style. You can’t just write how you like here uppercase, lowercase, and camelcase mean different things. Ex: while, While, WHILE they all are different for any language that’s case sensitive.
We use the .html extension just for sake of clarity you can use .htm no problem there
The main file or the homepage in the HTML is named index.html
Now, before we continue if you want to practice alongside you’ll need a text editor to do so and no I am not talking about MS Word or WordPad. Since you are just beginning I recommend using the notepad as you progress when all the tags are at your fingertips use notepad++ and when you don’t have to think which tag to use whether you have to close it or not (we’ll get to that later) use Microsoft’s Visual Studio Code. Now let’s move on
Tags
Basically, you can categorize them in two ways manual closing tags and self-closing tags
Ex:
<div></div> <!-- manual closing tag -->
<img src="" alt=""> <!-- self closing tag -->Note:
Some libraries even require you to close the self-closing tags like ReactJS etc. So it’s not wrong if you use it like this
<img src="" alt="" /> Attributes
HTML attributes are used to provide a piece of additional information related to that element. Like src and alt
<img src="html-logo.png" alt="HTML5 LOGO"> <!-- here src is used to specify the location of the image file and alt is used to display a small text when the image is not loaded, a good practice to always give one gives an idea what that was.-->
You might be wondering what is the strange symbol that I am using well it’s called comments let’s see what that is
Comments
Comments are used by us to give extra information about the section or an element it’s ignored by the browser, a good practice for you and others who might be working on the document. There are two types of comments
Single Line Comment
<!-- this is a single line comment -->Multi-Line Comment
<!--this is
multi-line
comment -->
Note: any element between these comments will also be read by the browser
<!-- <div>
This div tag is ignored by the browser and will not be displayed.
</div> -->
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>So this is the basic starting structure of the HTML now let’s look at each one of them closely.
<!DOCTYPE html>Every HTML file should have this declaration. This declaration is information to the browser saying this is an HTML5 document, remember this is not a tag.
<html lang="en">
</html>
This is a container that holds all other elements in your HTML document and the language attribute is for the browser and search-engines it states the language of your webpage.
<head>
</head>
The head element is a container in which we define the metadata, stylesheets, scripts, and document title. The head element is always placed inside the HTML element.
<meta charset="UTF-8">This is used to define the character encoding. According to HTML5 specifications states that all developers should use the charset UTF-8 as it covers all characters and symbols in the world.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This meta element is used for old browser compatibility because there is always someone who is going to use Internet Explorer. It’s an optional meta if you don’t want any support for old browsers remove it.
<meta name="viewport" content="width=device-width, initial-scale=1.0">This meta element is used to give web designers control over how they want to display the site on a smaller screen. These are instructions for the browser on how to control page dimensions and scaling.
<title>HTML Basics</title>The title element is used to define the title of the webpage.
<body>
</body>
The body element is a container for all elements that will be visible to the user. Like h1, section,a etc.
Before we start with the h1 element there are few things
How to save and open the file in the browser?
Once you save the file go to the save location click on the locations and copy it
Now go into your browser (please don’t use edge or internet explorer ) paste the URL and you’ll see all the files on that location.
Click the file you just saved
Welcome to your first HTML document.
Inline Elements
These elements never start with a new line. They only take defined width or necessary space to show the content. Like: span, a, button, code, etc.
Let’s look at an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet sapiente
<span style="background-color: burlywood;">
sit itaque earum mollitia sint?
<!-- here I have used simple style for background just to highlight how much area span tag is covering -->
</span>
Molestiae, eos laudantium dicta pariatur eius voluptatibus a voluptatem quaerat.
</p>
</body>
</html>
Block Level Elements
Block-level elements start with a new line and they cover 100% of the width of that viewport or screen. Like: div, p, all heading elements.
Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
</head>
<body>
<p style="background-color:cyan">
Lorem ipsum dolor sit amet sapiente Molestiae, eos laudantium dicta pariatur eius
quaerat.
</p>
</body>
</html>
See how p element stretches on even when the content is shorter.
Note:
There are CSS properties with which you alter the behavior of these elements. Span can be made a block-level element and p tag can be an inline element.
The earlier classification was based on the size but this one is about what particular elements tell you and the browser about itself.
Semantic Elements
Elements which you just look at and are able to tell what type of content it’s holding these type of elements are semantic elements. They provide a clear image to the developer and the browser of the content. Ex: form, table, article, header, footer, etc.
Non- Semantic Elements
The element you can’t even guess the elements or the content it contains like div, span.
Well we know HTML now let’s try to build a webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>First Web Page</title>
</head>
<body>
<header>
<h2>ADMEC Multimedia Institute</h2>
<nav>
<a href="#">Home</a>
<a href="#">Blogs</a>
<a href="#">Services</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<section>
<article>
<h1>First Web Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit.Excepturi quis totam magnam dolorem error.
Iste nesciunt pariatur error nobis
impedit mollitia distinctio corrupti aspernatur
eaque, facilis rem itaque quaerat
suscipit.
</p>
</article>
<aside>
<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit.Excepturi quis totam magnam dolorem error.
Iste nesciunt pariatur error nobis
impedit mollitia distinctio corrupti aspernatur
eaque, facilis rem itaque quaerat
suscipit.
</p>
</aside>
</section>
<footer>
Developed By: ADMEC Admin
</footer>
</body>
</html>
Note:
There’s only one h1 element in one document.
We use semantic elements wherever possible like if we are making a header section we can use the header element the same for others. It’s not necessary but is a good practice to make the code clearer.
If you don’t have any other page or link to attach then you should add pound symbol(#) in href attribute or a function javascript::void();
Let’s see the output
That’s not what you were expecting huh.
There is more to designing a webpage than simply using HTML. HTML is skeleton you need skin to make it look good that’s where CSS comes into play
What is CSS?
CSS or cascade style sheet is a language used to style the content of an HTML web page.
How to use CSS with HTML?
There are 3 ways in which you can achieve this let look at them in order
Inline CSS
This is a method for applying a style to an element. This is used as an attribute and we define all the styles in double quotes(“”) each property is separated by a semi-colon(;)
<p style="background-color:cyan; font-size: 20px;">
Lorem ipsum dolor sit amet sapiente Molestiae, eos laudantium
dicta pariatur eius voluptatibus a voluptatem
quaerat.
</p>
But say you want the same style for the element which is just below this element, what to do then, copy the style and paste it there? That’s not a good practice then lets try another approach
Internal CSS
Internal CSS is defined in the head element and used with selectors to style the element.
This method is used like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Basics</title>
<style>
p {
background-color: cyan;
font-size: 20px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet sapiente Molestiae,
eos laudantium dicta pariatur eius voluptatibus a voluptatem
</p>
<p>
Lorem ipsum dolor sit amet sapiente Molestiae,
eos laudantium dicta pariatur eius voluptatibus a voluptatem
</p>
</body>
</html>
Notice both p elements got the same style because we targeted p in style element.
Then again I want the same style in multiple pages so what should I copy the whole thing?
Well No! There one more method lets check it out
External CSS
In External CSS we create a separate file and that file is linked in the head element. We give styles to the element by using selectors like we used in Internal CSS but this time the style will be applied to all the elements where this selector matches.
<link rel="stylesheet" href="style.css">rel is the relationship of the link to the document and since we are linking a css file its stylesheet.
href is the path at which css file is stored.
This is how you write CSS in External Stylesheet
.paragraph-style{
font-size: 20px;
color: #fff;
}
/* use period before(.) starting only when using a class*/
Now we know how to use CSS with an HTML document but is there an ideal way? Yeah, there you should always use external CSS and should create only one CSS file for everything. Say you have 5 pages in site, you don’t have to create 5 separate CSS files. No, don’t do that.
One css file only. It is encouraged to name that file as style.css
Let’s look at the folder structure
Note:
Don’t use white space when naming any file or folder, use underscore or hyphen.
Use lowercase when naming files and folders.
Selectors
Selectors are used to target or locate certain elements in an HTML document this can be done in 5 different ways.
Simple Selectors
Selection based on class, id and element
Class Selector
Class is an attribute and the most common way of styling similar elements. An element can have multiple classes and the same class can be given to multiple elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p class="paragraph-style highlight">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Vero fuga quis repellendus beatae debitis, non eos,
</p>
<p class="paragraph-style">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Vero fuga quis repellendus beatae debitis, non eos,
</p>
</body>
</html>
External CSS
.highlight {
color: blueviolet;
font-weight: bold;
}
.paragraph-style {
font-size: 20px;
color: #111;
background-color: antiquewhite;
}
/* use period before(.) starting only when using a class*/
Output
Note:
In the stylesheet I have given color properties in each class but the one in the bottom got the preference color property was overwritten by .paragraph-style this can and will happen. We still need the color .highlight to go in the first paragraph. In such cases we can use it !important property.
.highlight {
color: blueviolet !important;
font-weight: bold;
}
.paragraph-style {
font-size: 20px;
color: #111;
background-color: antiquewhite;
}
/* use period before(.) starting only when using a class */
Id Selector
Id selectors are used to give a unique style to a particular element. The Id once given to an element can not be repeated or given to any other element; it is always unique. One element only has one Id. To style an element with id we use pound symbol (#).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p id="first-para">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Vero fuga quis repellendus beatae debitis, non eos,
</p>
</body>
</html>
External CSS
#first-para{
color: blueviolet !important;
font-weight: bold;
}
/* use pound before(.) starting only for Id*/
Element Selectors
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Vero fuga quis repellendus beatae debitis, non eos,
</p>External CSS
p {
color: blueviolet !important;
font-weight: bold;
}
/* this style will be given to all p element where this stylesheet is linked */
Combinator Selector
A selection based on a relationship between the elements. This type of selection is used when you have style a particular element which will be inside some element and you are unable to give class to that element (this happens when the content is dynamic or is coming from someplace else ).
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
/* descendant selector */
div p {
background-color: red;
}
/* Child Selector */
div>p {
background-color: red;
}
/* Adjacent Sibling Selector */
div+p {
background-color: red;
}
/* General Sibling Selector */
div~p {
background-color: yellow;
}
Pseudo-class Selectors
We use this selection type when we need to style an element in some kind of state like It’s being hovered by mouse or Clicked, visited and focused. This is the most common way to stylize the elements to give it some extra effects.
/* not visited link */
a :link {
color: #000000;
}
/* visited link */
a:visited {
color: #270674;
}
/* hover link */
a:hover {
color: #11ca0b;
}
/* selected link */
a:active {
color: #881125;
}
Pseudo-Elements Selectors
It is used for styling a part of an element like the first letter in a line.
selector::pseudo-element {
property: value;
}
Attribute Selector
Used for styling an element having a particular attribute value
input[type="text"] {
background-color: yellow;
}
Note:
There are a lot of units that can be used in CSS. A few common ones are px, %, em, rem, vh, vw.
CSS Borders
Border property is used to give an outline to an element border property takes 3 values
Border-type, border-width, and border-color.
border: solid 1px #111;
border-radius: 20px;
/* is used to give rounded shape to border */
border-radius: 50%;
/* is used to draw a circle when wdith and height are equal */
border-right: none;
/* for removing from the right and similar way can be used for other sides */CSS Margin
Margin property is used to manage space around the element it can be negative as well.
margin: top-value right-value bottom-value left-value;
margin: top-bottom-value right-left-value;This can be used individually.
margin-top: value;
margin-bottom: value;
margin-left: value;
margin-right: value;CSS Padding
Padding is used similarly like margin but there’s a huge difference padding can not be negative as it is space given inside an element.
Note: When you use padding and border by default it does not includes it in the element width we use a specific property to overcome this, its defined in universal selector (any property given inside universal selector will be added to all the elements in an HTML document)
* {
box-sizing: border-box;
}
We can generally add font-family in the universal selector along with this.
Box-Model
In CSS every element is built around the box-model and is used to design the layout of all the elements. Think of all the elements in HTML as a box. First is margin which is the space outside the element, border which is an outline between margin and padding, then padding is space inside the element and then comes the content.
All this is just a scratch on the surface of these languages; they are a lot more than what is explained in this article. If you are interested in learning front-end development, join one of the best HTML5 & CSS3 training institutes in Delhi and learn from industry experts.
Check out our HTML and CSS courses below
For more information, you can contact us or if you need one to one guidance call us at 9811818122 or 9911782350.
Very Interesting blog. Thanks For Sharing