HTML :
- 1. 1. HTML (HyperText Markup Language) is the standard language for creating and structuring web pages using tags and elements. It defines how content like text, images, and links appear in a browser.
- 2. 2. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
- 3. HTML describes the structure of a web page semantically and originally included cues for its appearance.
- HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.
SYNTAX :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>HELLO WORLD</h1>
<p>HELLO WORLD.</p>
</body>
</html>
INLINE CSS :
Inline CSS applies styles directly to HTML elements using the style attribute, allowing for quick, unique styling without external stylesheets.
SYNTAX :
<html>
<body>
<p style="color: blue; font-size: 18px;">
This is a paragraph styled with inline CSS.
</p>
</body>
</html>
CSS :
- Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in HTML or XML.
- CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
SYNTAX :
<!DOCTYPE html>
<html>
<head>
<title>My First Styled Page</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #258D46;
font-size: 48px;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
p {
color: #D35400;
font-size: 20px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This is a beautifully styled paragraph using CSS.</p>
</body>
</html>
TYPES OF CSS :
- Inline CSS.
- Internal or Embedded CSS.
- External CSS.
INTERNAL CSS :
Internal CSS is a method for defining CSS styles directly within an HTML document. It's particularly useful for applying unique styles to a single web page, and it's embedded within the <style> element located in the <head> section of the HTML file.
SYNTAX :
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
/* Internal CSS */
h1 {
color: green;
font-size: 50px;
text-align: center;
}
p {
color: blue;
font-size: 25px;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal..!</p>
</body>
</html>
INTERNAL CSS :
Internal or Embedded CSS is defined within the HTML document's <style> element. It applies styles to specified HTML elements.
SYNTAX :
<!DOCTYPE html>
<html>
<head>
<style>
.main {
text-align: center;
}
.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="GFG">Internal CSS</div>
<div class="geeks">
Implementation of Internal CSS
</div>
</div>
</body>
</html>
EXTERNAL CSS :
External CSS contains separate CSS files that contain only style properties with the help of tag attributes,For ex: class, id, heading.CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag.
SYNTAX :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="GFG">External CSS </div>
<div id="geeks">
This shows implementation of External CSS
</div>
</div>
</body>
</html>
Top comments (0)