Difference between revisions of "Web defacing"
Jump to navigation
Jump to search
Line 11: | Line 11: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | '''With attribute "class"''' | ||
+ | <syntaxhighlight lang="html"> | ||
+ | <p class="my-class">This is a paragraph</p> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | '''With attribute "id"''' | ||
+ | <syntaxhighlight lang="html"> | ||
+ | <p id="my-id">This is a paragraph</p> | ||
+ | </syntaxhighlight> | ||
== CSS == | == CSS == | ||
− | === Structure of | + | === Structure of CSS === |
+ | '''Using HTML tags''' | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
p { | p { | ||
+ | color: rgb(255, 0, 0); | ||
+ | } | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | '''Using classes''' | ||
+ | <syntaxhighlight lang="css"> | ||
+ | .my-class { | ||
+ | color: rgb(255, 0, 0); | ||
+ | } | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | '''Using id''' | ||
+ | <syntaxhighlight lang="css"> | ||
+ | #my-id { | ||
color: rgb(255, 0, 0); | color: rgb(255, 0, 0); | ||
} | } |
Revision as of 12:46, 24 April 2024
The browser mediates the online world of the internet in the same way that a window mediates the view of the physical world. Adding a custom extension to this daily equipment provides a valuable opportunity for creative play and disruptions at both the system- and content levels. Releasing these extensions as tools can be a form of critical and contextual creative practice.
To reload your browser extension visit this about:debugging#/runtime/this-firefox page in FireFox.
Snippets
HTML
Structure of a HTML element
<p>This is a paragraph</p>
With attribute "class"
<p class="my-class">This is a paragraph</p>
With attribute "id"
<p id="my-id">This is a paragraph</p>
CSS
Structure of CSS
Using HTML tags
p {
color: rgb(255, 0, 0);
}
Using classes
.my-class {
color: rgb(255, 0, 0);
}
Using id
#my-id {
color: rgb(255, 0, 0);
}
JavaScript
Grabbing an element
const titleElement = document.getElementById("my-title");
Editing the content
titleElement.innerHTML = "🙃";
Editing the style
titleElement.style.color = "rgb(255, 0, 255)";
Creating an element
const newListItem = document.createElement("li");
// Set the content
newListItem.innerHTML = "Add an element using JavaScript";
Insert an element
// Grab the element that we want to insert the new element into.
const list = document.getElementById("my-list");
// Append the new element
list.appendChild(newListItem);