Global Scope
: Variables defined at the :root
level are considered to be in the global
scope and can be accessed
throughout your entire stylesheet.
Example1:
CSS:
:root {
--primary-color: #007bff; /* Define the CSS variable */
}
.button {
background-color: var(--primary-color); /* Use the CSS variable */
}
HTML:
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
Example2:
:root {
--card-bg-color: #232323;
--text-color: #7FFFD4;
--text-font-family: 'Arial', sans-serif;
--text-font-size: 17px;
--text-line-height: 1.5;
}
.card {
border: 1px solid #ddd;
padding: 20px;
margin: 10px;
background-color: var(--card-bg-color);
}
.card p {
color: var(--text-color);
font-family: var(--text-font-family);
font-size: var(--text-font-size);
line-height: var(--text-line-height);
}
HTML:
<div class="card">
<p>This is the first card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="card">
<p>This is the second card. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="card">
<p>This is the third card. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
Example 3:
CSS:
:root {
--color-white: #ffffff;
--color-blue: #007bff;
--color-red: #ff0000;
--color-green: #00ff00;
--color-yellow: #fcba03;
}
.card {
background-color: #f8f8f8;
border: 5px solid var(--color-yellow);
padding: 20px;
margin: 10px;
}
.card h2 {
color: var(--color-blue);
}
.card p {
color: var(--color-black);
}
.button {
background-color: var(--color-red);
color: var(--color-white);
padding: 10px 20px;
border: none;
cursor: pointer;
margin: 5px;
}
HTML:
<div class="card">
<h2>Card 1</h2>
<p>This is some text within Card 1.</p>
<button class="button">Button 1</button>
</div>
<div class="card">
<h2>Card 2</h2>
<p>This is some text within Card 2.</p>
<button class="button">Button 2</button>
</div>
<div class="card">
<h2>Card 3</h2>
<p>This is some text within Card 3.</p>
<button class="button">Button 3</button>
</div>
{
$query = Comment::with('user')
->where('model', $model)
->where('model_id', $model_id)
->orderBy('id', 'desc');
return DataTables::of($query->get())
->addColumn('user_roles', function ($comment) {
return $comment->user->getRoleNames()->implode(', ');
})
->toJson();
}
we can add new column to datatable json data using this<div id="myElement">This is a div with an ID</div>
class:
<p class="highlighted">This paragraph has a class</p>
style:
<span style="color: red; font-size: 16px;">Red and larger text</span>
src:
<img src="image.jpg" alt="An image">
href:
<a href="https://www.example.com">Visit Example</a>
href:
<img src="image.jpg" alt="A beautiful landscape">
alt:
<img src="image.jpg" alt="A beautiful landscape">
disabled:
<button type="button" disabled>Disabled Button</button>
required:
<input type="text" required>
Custom Data Attributes
allow us to attach
custom data
to HTML elements
without affecting the element's functionality or appearance.
Syntax:
To create a custom data attribute, you need to use the data- prefix followed by your chosen attribute name.
Example:
<div data-info="example-data" data-count="42">Custom Data Attributes</div>
In this example, we have added two custom data attributes, data-info and data-count, to a <div> element.
Accessing Data Attributes with JavaScript:
<div id="myDiv" data-info="example-data" data-count="42">Custom Data Attributes</div>
<script>
const myDiv = document.getElementById("myDiv");
// Accessing individual data attributes
const infoData = myDiv.dataset.info;
const countData = myDiv.dataset.count;
console.log(infoData); // Output: "example-data"
console.log(countData); // Output: "42"
</script>
Modify:
<div id="myDiv" data-info="example-data" data-count="42">Custom Data Attributes</div>
<script>
const myDiv = document.getElementById("myDiv");
// Modifying data attributes
myDiv.dataset.info = "new-data";
myDiv.dataset.count = 100;
</script>
Using Custom Data Attributes with Events:
<button data-action="delete" data-id="123">Delete Item</button>
<script>
const deleteButton = document.querySelector("[data-action='delete']");
deleteButton.addEventListener("click", function(event) {
const itemId = event.target.dataset.id;
console.log("Deleting item with ID:", itemId);
// Perform the delete operation using the itemId
});
</script>
<pre>
tag defines preformatted text.
Text in a <pre>
element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.<!DOCTYPE html>
დოკუმენტი არის HTML5 დოკუმენტი
<html>
ელემენტი არის HTML გვერდის ძირითადი ელემენტი
<head>
ელემენტი შეიცავს მეტა ინფორმაციას HTML გვერდის შესახებ
ელემენტი განსაზღვრავს სათაურს HTML გვერდისთვის ( <title>რომელიც ნაჩვენებია ბრაუზერის სათაურის ზოლში ან გვერდის ჩანართში)
ელემენტი განსაზღვრავს დოკუმენტის <body>სხეულს და წარმოადგენს კონტეინერს ყველა ხილული შინაარსისთვის, როგორიცაა სათაურები, აბზაცები, სურათები, ჰიპერბმულები, ცხრილები, სიები და ა.შ.
<h1>
ელემენტი განსაზღვრავს დიდ სათაურს
<p>
ელემენტი განსაზღვრავს აბზაცს<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width
- sets the width of the viewport to be equal to the width of the device's screen. This ensures that the webpage adapts and fills the entire width of the device, regardless of its specific screen size or resolution. CSS media query works properly with any device by setting device width to viewport
initial-scale=1
- sets the initial zoom level when the webpage is first loaded. A value of 1 means that the webpage will be displayed at a 1:1 ratio, without any zooming or scaling applied<header>
tag defines the header of a document or section.
Nav: The <nav>
tag defines a navigation bar.
Section: The <section>
tag defines a section of a document.
Article: The <article>
tag defines an independent piece of content, such as a blog post or news article.
** aside:** The <aside>
tag defines a sidebar or other secondary content.
Footer: The <footer>
tag defines the footer of a document or section.
figure: The <figure>
tag defines a self-contained piece of content, such as an illustration, diagram, photo, code listing, etc.
figcaption: The <figcaption>
tag defines a caption for a figure.
h1-h6: The <h1>
through <h6>
tags define headings of different levels.
main: The <main>
tag defines the main content of a document.
a: The <a>
tag defines a hyperlink.
form: The <form>
tag defines a form.
input: The <input>
tag defines an input field.
img: The <img>
tag defines an image.
blockquote: The <blockquote>
tag defines a quotation.
time: The <time>
tag defines a date or time.
mark: The <mark>
tag defines a highlighted passage of text.
b: The <b>
tag defines bold text.
strong: The <strong>
tag defines strong text.
em: The <em>
tag defines emphasized text.
code: The <code>
tag defines code snippets.
pre: The <pre>
tag defines preformatted text.