Html attributes: Difference between revisions
From Leechfinger
Jump to navigationJump to search
Created page with "== Global attributes == <syntaxhighlight lang="html" line> <p title="more info">Hover over this text to see.</p> <p lang="en">Hello</p> <a href="#" tabindex="1">First link</a> <article id="article" data-author="Bozo" data-published="2026-06-6"> </syntaxhighlight> Category:Html" |
|||
| (19 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== Default HTML page == | |||
<syntaxhighlight lang="html" line> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>My first page.</title> | |||
<link rel="stylesheet" href="css/bootstrap-grid.css"> | |||
</head> | |||
<body> | |||
<a href="#" tabindex="1">First link</a> | |||
<header> | |||
<h1>Welcome to my crummy site</h1> | |||
</header> | |||
<nav> | |||
<ul> | |||
<li><a href="#">Home</a></li> | |||
<li><a href="#">About Me</a></li> | |||
<li><a href="#">Contact</a></li> | |||
</ul> | |||
</nav> | |||
<article> | |||
<p>This is my paragraph.</p> | |||
<nav> | |||
this is my navigation. <br> | |||
</nav> | |||
<br> | |||
<p title="do you see me">Hover over thei text to see more info.</p> | |||
</article> | |||
<footer> | |||
<p>this is my footer.contact me. at [email protected]</p> | |||
<img src="images/qais.png" alt="same thing again" width="300"> | |||
</footer> | |||
<h1>Hello non world...!!!!!.......</h1> | |||
<img src="images/bozo.png" alt="picture of my face" width="500"> | |||
<br /> | |||
<script src="js/bootstrap.bundle.js"></script> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
== Global attributes == | == Global attributes == | ||
<syntaxhighlight lang="html" line> | <syntaxhighlight lang="html" line> | ||
| Line 5: | Line 45: | ||
<a href="#" tabindex="1">First link</a> | <a href="#" tabindex="1">First link</a> | ||
<article id="article" data-author="Bozo" data-published="2026-06-6"> | <article id="article" data-author="Bozo" data-published="2026-06-6"> | ||
</syntaxhighlight> | |||
== Use of ID == | |||
ID is used on a single element all through the code. Example below shows for <nowiki><p> and <div>.</nowiki><br /> | |||
In html: | |||
<syntaxhighlight lang="html" line> | |||
<p id="c2">This is my paragraph.</p> | |||
<div><h1>Welcome to my crummy site</h1> </div> | |||
</syntaxhighlight> | |||
In css: | |||
<syntaxhighlight lang="css" line> | |||
c2 { | |||
color: red; | |||
} | |||
div { | |||
color: red; | |||
} | |||
</syntaxhighlight> | |||
== Use of class == | |||
You should use a class if you need to use the same selector more than once within a page or a site. While an ID is specific to a single element, classes can be assigned to multiple elements on a page or throughout the website.<br /> | |||
In html: | |||
<syntaxhighlight lang="html" line> | |||
<p class="bum">This is my paragraph.</p> | |||
</syntaxhighlight> | |||
In css: | |||
<syntaxhighlight lang="css" line> | |||
.bum { | |||
color: red; | |||
} | |||
</syntaxhighlight> | |||
== Use of type == | |||
In html: | |||
<syntaxhighlight lang="html" line> | |||
<input type="button" value="Submit"> | |||
</syntaxhighlight> | |||
In css: | |||
<syntaxhighlight lang="css" line> | |||
input[type="button"]{ | |||
background-color: navy; | |||
color: white; | |||
} | |||
</syntaxhighlight> | |||
== Selectors for precision == | |||
: ul > li, direct rule only for li | |||
: h2 + p, only for p after any h2. | |||
: h2 ~ p, color for all p after h2. | |||
== Variables in CSS == | |||
<syntaxhighlight lang="css" line> | |||
:root { | |||
--primary-color : #5D1049; | |||
} | |||
body { | |||
font-family: Arial, san-serif; | |||
margin: 20px; | |||
padding: 20px; | |||
background-color: var(--primary-color); | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
[[Category:Html]] | [[Category:Html]] | ||
Latest revision as of 12:57, 12 June 2024
Default HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My first page.</title>
<link rel="stylesheet" href="css/bootstrap-grid.css">
</head>
<body>
<a href="#" tabindex="1">First link</a>
<header>
<h1>Welcome to my crummy site</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<p>This is my paragraph.</p>
<nav>
this is my navigation. <br>
</nav>
<br>
<p title="do you see me">Hover over thei text to see more info.</p>
</article>
<footer>
<p>this is my footer.contact me. at [email protected]</p>
<img src="images/qais.png" alt="same thing again" width="300">
</footer>
<h1>Hello non world...!!!!!.......</h1>
<img src="images/bozo.png" alt="picture of my face" width="500">
<br />
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
Global attributes
<p title="more info">Hover over this text to see.</p>
<p lang="en">Hello</p>
<a href="#" tabindex="1">First link</a>
<article id="article" data-author="Bozo" data-published="2026-06-6">
Use of ID
ID is used on a single element all through the code. Example below shows for <p> and <div>.
In html:
<p id="c2">This is my paragraph.</p>
<div><h1>Welcome to my crummy site</h1> </div>
In css:
c2 {
color: red;
}
div {
color: red;
}
Use of class
You should use a class if you need to use the same selector more than once within a page or a site. While an ID is specific to a single element, classes can be assigned to multiple elements on a page or throughout the website.
In html:
<p class="bum">This is my paragraph.</p>
In css:
.bum {
color: red;
}
Use of type
In html:
<input type="button" value="Submit">
In css:
input[type="button"]{
background-color: navy;
color: white;
}
Selectors for precision
- ul > li, direct rule only for li
- h2 + p, only for p after any h2.
- h2 ~ p, color for all p after h2.
Variables in CSS
:root {
--primary-color : #5D1049;
}
body {
font-family: Arial, san-serif;
margin: 20px;
padding: 20px;
background-color: var(--primary-color);
}
