Please support if you like my work by payment through upi: sinhamit@icici or payment by bank
account name: Amit Kumar Sinha,
account number: 2646728782
IFSC code: KKBK0005660
SWIFT: KKBKINBB
Applying CSS to HTML Elements in Category: HTML by amit
🕙 Posted on 2023-04-07 at 18:35:09 Read in Hindi ...
Applying CSS rules to HTML elements
You have seen many block level (including box-type) HTML elements, in which <div> </div> and <p> </p> are frequently used. DIV element is nothing but it represents its children, that is all HTML elements placed inside it. You can also use <div style="display: inline;"> </div> as an inline element.
CSS rules can be written in three different ways:
(1) Inline CSS rules can be written inside an exclusvie HTML element, and these rules are applied only to that specific HTML element. It is written with style attribute inside an HTML element, and its value is exactly same as those written inside { } curly braces for a 'selector' (either in embedded <style> </style> or external stylesheet). An example of inline CSS style is shown above.
(2) External Stylesheet: (Create new file with .css extension, and link it into your web-page) or link third-party already created External Stylesheet. An external stylesheet file can be linked to many web-pages. A rule written inside an external stylesheet .css file will be applied to all HTML element of that type or all selectors of that type in all web-pages, where this external file is linked. You have already read in previous page, how to write CSS rules, with this method.
(3) Embedded Styles are added to each web-page separately, and a CSS rule written inside <style> </style> element, is applied to all HTML element of that type, or targeted 'selector' in that web-page only. You have also seen in previous page how to write CSS rule with this method: h1 { color: gold; }
Clarification:
When CSS rules for same HTML element, or same 'selector' are written in three different places, as mentioned above, which rule will be applied to that HTML element or that 'selector' ?
An HTML file or a CSS file is read by the web-browser from top to bottom. Therefore, in the <head> </head> element, if EMBEDDED styles are written first, and EXTERNAL stylesheet is linked after it, then rules written in external stylesheet will be applied. Similarly, when any rule for a selector is written inside the CSS file, and different rules are also written after the previous rules, then the last rule (at the bottom) will be applied.
Also, if inline style attribute is added to an HTML element, then it will be applied over all above rules either embedded or written in external stylesheet file. Even when a class attribute or an id attribute is added after the style attribute in an HTML element, then rules of style attribute will be applied, no matter which is added afterward. Example is shown below.
A CSS rule is identified by a 'selector' (when CSS rules for it, are written in external or embedded styles). The 'selector' can be (i) an HTML tagName, (ii) a className (applied to many HTML elements), (iii) an idName (applied only to a specific HTML element), or (iv) an attribute type (of a particular HTML element), etc.
A className can be written inside an HTML element as below:
<h1 class="className"> </h1>
An idName can be written inside an HTML element as below:
<h1 id="idName"> </h1>
Now, you can apply CSS rules on these heading elements, having className and idName attributes inside them. However, when you want to target the above-said className and idName in either external stylesheet (a file with .css extension) or embedded CSS style (inside <style> </style> element), you have to write as following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>R.I.B.H.U. Academy</title>
<link href="../../root.css" rel="stylesheet" type="text/css" />
<!-- You can write CSS rules for any HTML element or 'selector' in that external file. To understand relative path, see previous page. Try yourself. -->
<style type="text/css">
/* === EMBEDDED CSS STYLES === */
h1 { color: khaki; }
/* There are more than 140 color-names that can be used in CSS properties. You must not mis-spell these color-names, when writing them as values. */
.heading { color: red; } /* a className is selected with . (dot) prefix */
#id_head { color: green; } /* an idName is selected with # (hash Shift 3 keys) prefix. */
</style>
</head>
<body>
<h1 style="color: blue;" id="id_head" class="heading">Exercise: Applying css rules to HTML element</h1>
<script type="text/javascript">
// JavaScript Embedded codes are written inside script element
</script>
</body>
</html>
Leave a Comment:
Amit Sinha March 2nd, 2023 at 9:30 PM
😃 😄 😁 😆 😅 😂 😉 😊 😇 😍 😘 😚 😋 😜 😝 😶 😏 😒 😌 😔 😪 😷 😵 😎 😲 😳 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 😤
Ribhu March 3rd, 2023 at 9:30 PM
🐵 🐒 🐶 🐩 🐺 🐱 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇
