For working professionals
For fresh graduates
More
2. HTML Basics
3. HTML Syntax
9. HTML Head
10. HTML Title
11. HTML Styles
12. HTML Paragraphs
13. HTML Symbols
14. HTML Emojis
15. HTML Formatting
16. HTML Entities
17. HTML Audio
18. HTML Images
19. HTML Lists
20. HTML Links
21. SVG in HTML
22. HTML Forms
23. HTML Video
24. HTML Canvas
25. Adjacency Lists
26. HTML Input Types
27. HTML Tables
31. HTML Layout
33. HTML Div
37. HTML Iframes
40. HTML Code
41. HTML Colors
42. HTML CSS
43. HTML Editors
44. HTML Examples
45. Class in HTML
46. HTML Exercises
47. HTML ID
49. HTML Table Style
50. HTML Script
The first-ever webpages were far from appealing and very different from the ones we know now. Subsequently, we started using HTML and CSS to enhance the visual appeal of the web pages, and from that moment, there’s been no turning back.
Among the first concepts we learn in web development is CSS or Cascading Style Sheets. It is a sought-after skill, essential to land a job. Speaking from my experience, mastering HTML CSS will definitely help you progress in this field, as it did many others like me.
Having used the technology for years, I can vouch for its efficiency in designing attractive web pages. HTML CSS is used to style the layout, appearance, and presentation of HTML elements in web pages and web apps. This HTML CSS tutorial aims to get you started with the basics.
Let’s begin with the HTML CSS basics.
CSS in HTML is a style sheet language used to specify the visual appearance of HTML elements on a webpage and web apps. HTML CSS helps developers control various styling elements like colors, fonts, layout, spacing, borders, and backgrounds of HTML elements.
In this tutorial, we will learn basic HTML CSS website design with the help of HTML CSS code examples.
Here, we will learn how to add CSS in HTML code to alter colors, font, and font sizes. Let me briefly explain this with an example of HTML CSS code.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-family: verdana;
font-size: 300%;
}
p {
color: purple;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is the heading in green</h1>
<p>This is a paragragh in purple.</p>
</body>
</html>
Ever wonder how to link CSS to HTML? There are typically three main ways to link CSS in HTML. Here, I will discuss each one in detail with the help of individual examples.
Inline CSS in HTML is the process of adding styles directly to HTML elements using the style property found in the HTML tag. This approach lets you apply CSS styles in the same line, without needing another CSS file.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Inline CSS</title>
</head>
<body>
<!-- Applying inline CSS to a paragraph -->
<p style="color: red; font-size: 18px; font-weight: bold;">This is an inline css paragraph example in red.</p>
<!-- Applying inline CSS to a div -->
<div style="background-color: lightblue; padding: 15px;">
<p>This is an inline CSS div example with lightblue background color and padding.</p>
</div>
<!-- Applying inline CSS to a heading -->
<h1 style="text-align: center; color: lightgreen;">Inline CSS Heading in Light Green</h1>
</body>
</html>
Now, let me explain each element in detail.
Internal CSS defines CSS styles directly within the HTML document using the <style> tag in the <head> section. It enables us to apply CSS styles particular to that HTML file without the need for a separate CSS file. I have explained it below with the help of an example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of Inline CSS</title>
<style>
/* Internal CSS styles */
body {
font-family: Arial, sans-serif;
background-color: #a0f3f1;
}
h1 {
color: blue;
text-align: center;
}
.container {
width: 85%;
margin: 0 auto;
padding: 22px;
background-color: lightgreen;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.highlight1 {
background-color: lightblue;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Internal CSS Example</h1>
<p>This paragraph has default styles it got from the body.</p>
<p class="highlight1">This paragraph has a class with internal CSS styles called "highlight1" applied.</p>
</div>
</body>
</html>
Now, let us understand this example in detail.
External CSS involves saving CSS styles in a separate CSS file and attaching them to an HTML document via the element in the section. This method enables you to apply styles uniformly across different HTML pages while maintaining a clear separation of content (HTML) and appearance (CSS). Let me explain with an example.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<!--This Links to the external CSS file -->
<link rel="stylesheet" href="externalstyle.css">
</head>
<body>
<div class="container">
<h1>External CSS tutorial</h1>
<p>This paragraph has default styles inherited
from the external CSS file called external.css.</p>
<p class="highlight">This paragraph has a class
with external CSS styles attribute applied.</p>
</div>
</body>
</html>
Code:
/* externalstyles.css */
body {
font-family: Arial, sans-serif;
background-color: #a0f0f0;
}
h1 {
color: lightblue;
text-align: center;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: grey;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.highlight {
background-color: lightyellow;
font-weight: bold;
}
Now let us dissect the above example to understand better. Meanwhile, you can learn HTML SCC online and play with CSS styles to make interactive webpages.
Ever wondered which CSS style is prioritized if there are multiple types of CSS styles at play for an HTML element? Let me discuss exactly that in this section.
The priority of the CSS styles is also known as Cascading Order or Specificity.
In the case of CSS priority, inline CSS takes precedence. It has the highest CSS priority. To give an example of the syntax,
<p style=”color:blue;”> This paragraph uses blue colour.</p>
Internal CSS has the highest priority after inline CSS. Let's examine the syntax of internal CSS in HTML.
<head>
<style>
p { color: blue;}
</style>
</head>
<p> This paragraph is colored light blue and has inline CSS with a color attribute set to lightblue.</p>
External CSS has the least priority among the three. Styles are defined in external .css files connected to HTML documents via the <link> tag. Let us look at the syntax for external HTML CSS.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Example for External CSS </title>
<link rel="stylesheet" href="externalCSS.css">
</head>
This is the syntax for the main HTML file. Here, the <link> tag links the HTML file to an external CSS file, which is externalCSS.css in this case. You can write your CSS styles in that file.
One of the key components in a modern HTML CSS website design nowadays is the header. The header helps to easily navigate the multipage website. It usually goes to the top of the website and links the other pages with an anchor link. The header also serves as an introduction to the webpage and holds a splash of information that gives us an idea of the website.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example for Header in HTML CSS</title>
<style>
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style-type: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<div class="container">
<img src="logo.png" alt="Logo for Website">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</nav>
</div>
</header>
<p>This is where your website starts after the header.</p>
</body>
</html>
Here, as you can see, I have added the hover effect over Link1, Link2, Link3, and Home. This effect underlines the names when you hover the cursor over it. You can change the names of the links to whatever you want like services, about, etc. You can simultaneously change the links the anchor tags are referring to from # to whatever is needed.
In short, HTML organizes web content, but CSS styles and improves its presentation. Together, they build visually beautiful and well-structured web pages. This results in a better user experience and a more efficient web development process.
This tutorial is a great stepping stone to learning HTML CSS. However, if you want to learn more advanced topics of HTML CSS, I recommend checking courses from upGrad. Their courses are in collaboration with some of the best universities around the world and are sure to provide something valuable to your web development journey.
CSS is good for HTML because it allows for developing a more intuitive webpage. Without CSS, HTML webpages would be very boring and unappealing.
HTML works with CSS to provide the structure and content of a web page, where CSS specifies the visual appearance and layout of HTML parts. CSS styles target specific HTML elements and apply stylistic rules, resulting in an engaging and visually pleasing display of the webpage.
HTML and CSS work together because they complement one another in web page creation. HTML provides the structure and content of a web page, whereas CSS provides the visual appearance and styling of HTML elements.
There is no single "best" CSS for HTML, as many factors such as project requirements, developer preferences, and current web standards, contribute to the choice of which CSS to use.
No, HTML cannot be written directly in CSS. HTML is a markup language for structuring material, whereas CSS is a style language for controlling how the HTML elements look. They provide a variety of functions and must be used together yet separately in web development.
Yes, HTML can function without CSS. HTML defines the structure and content of a web page, allowing it to be displayed and function without CSS. However, CSS cannot work without HTML.
To see an HTML webpage without CSS, simply disable it in your web browser. Most modern browsers have developer tools that allow you to turn CSS on and off.
CSS is considered a little harder to learn than pure HTML, but both are essential in web development. With practice and resources, they can be managed.
Author
Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.
2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.