Explain Inline Internal and External CSS with Example - Inline Internal and External CSS Program - Three Types of CSS Inline Embedded and External
Cascading Style Sheet (CSS):
CSS is abbreviation for "Cascading Style Sheets". CSS is used for define the presentation of web pages like layout, color, fonts and more and it sets the style for the HTML elements or selectors that we want to give them.
Explain Inline Internal and External CSS with Example, there are three types of css that are mentioned below:
1. Inline CSS:
Inline CSS contains the styling properties to set for the HTML element in the <body> section. We use style attribute with properties and values that are separated by colon (:) and semicolon (;) respectively.
For example:
Output:
2. Internal CSS:
Internal CSS is also known as Embedded CSS. We use internal css in the <head> section to set the style properties for HTML elements that are mentioned in the webpage.
To set the internal css, we use <style> tag in the <head> section and define the css properties between <style>....</style> tag.
For example:
Output:
3. External CSS:
External CSS is the css property in which we create a separate .css extension file in which we define only css properties for the webpage that we have designed and then we linked this css file to the main HTML document by using <link> tag and use href attribute to specify the location of stylesheet.
For example:
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="edugyan.css"/>
</head>
<body>
<div class = "main">
<div class ="EG">EDUGYAN</div>
<div id ="gyan">
A best learning platform for beginners.
</div>
</div>
</body>
</html>
We have written our code, now we create a new .css file with name edugyan.css in which we define the css properties for above program or code i.e. already linked via <link> tag in the <head> section.
edugyan.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.EG {
color:black;
font-size:60px;
font-weight:bold;
}
#gyan {
font-style:bold;
font-size:20px;
color: red;
}
Output:
Looking Forward:
https://t.co/Y3f7uoSk7G#css #html #cascadingstylesheet #inlinecss #internalcss #externalcss #style #design #webdesign #webpagedesign #webdevelopment #edugyanFollow -- @EDUGYAN1— EDUGYAN (@EDUGYAN1) June 11, 2020
For more details - Explain Inline Internal and External CSS with Example - Cascading Style Sheets (CSS) Types - Inline Internal and External CSS Program - Three Types of CSS Inline Embedded and External - Best Programming Videos on YouTube - EDUGYAN Channel
0 Comments