Html css and types of css
Embarking on the dynamic realm of web development, the synergy between HTML and CSS forms the backbone of crafting captivating digital experiences. As we unravel the intricacies of HTML and CSS, our focus pivots towards understanding the diverse landscape of CSS, exploring its types, and delving into the pivotal role it plays in elevating the aesthetics and functionality of web pages. Join us on this enlightening journey into the realms of “HTML, CSS, and types of CSS,” where we decode the foundational elements that shape the online world and empower developers to master the artistry of web design.
In the vast and ever-evolving landscape of web development, two foundational technologies stand tall, shaping the visual appeal and structure of websites — HTML and CSS. Together, they form the backbone of the digital world, harmonizing content and design seamlessly. In this article, we delve into the intricacies of HTML, CSS, and explore the different types of CSS that contribute to the artistry of the web.
Understanding HTML (HyperText Markup Language)
HTML, the cornerstone of web development, serves as the structural framework for content on the internet. It employs a system of tags, each with a specific purpose, to define and organize elements on a webpage. From headings (<h1> to <h6>) that establish hierarchy to paragraphs (<p>) that contain textual content, HTML structures information in a way that is both logical and meaningful.
Example
<html>
<head>
<style>
h1 {
color:red;
}
p {
color:green;
}
h2 {
color:blue;
}
</style>
<body>
<h1>This is heading- 1</h1>
<p>This is Paragraph</p>
<h2>This is heading 2</h2></body>
</html>
Output
Enter CSS (Cascading Style Sheets)
While HTML structures content, CSS steps in to add the stylistic flair. CSS allows developers to control the layout, color, and typography, transforming a simple HTML document into a visually appealing and user-friendly experience. Selectors, properties, and values work in tandem to define the look and feel of a webpage.
Types of CSS
1. Inline CSS: This type of CSS is applied directly within the HTML tags using the style
Example
<html>
<body>
<h1 style=”color:red”>This is red color heading</h1>
<p style=”color:green”>This is para in green color<p>
</body>
</html>
Output
2. Internal or Embedded CSS: CSS rules are defined within the <style> tag in the HTML <head> section.
Example
<html>
<head>
<style>
body {
background-color:green;
}
h1 {
color:white;
}
p {
color:red;
}
</style>
</head>
<body>
<h1> Internal CSS Example</h1>
<p> This is the example of internal css here i am using background color green and heading color white using internal css with the help of <style></p>
</body>
</html>
Output
3. External CSS: CSS rules are stored in a separate external file and linked to the HTML document.
styles.css
body {
background-color:yellow;
}
h1 {
color:white;
}
p {
color:red;
}
h2 {
color:green;
}
File Saved With the Name “External.html”
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<h1> This is External Css File</h1>
<p> We already created the css file externally by the name “abc.css” here we link our css file</p>
<h2> In external css we are not use style tag </h2>
</body>
<html>
Output
For Live Class Subscribe Our Youtube Channel
https://www.youtube.com/@olevelguruji
Also Check The Below Links