CSS

>Though maybe you were looking for Customization#CSS Scripts or CS:Soy?

CSS is known as one of the 3 glowie (((core))) technologies for the web alongside HTML and JavaScript.

CSS (Cascading Style Sheets) is what is used to style HTML, and XSLT for XML. Obviously it's used on the Soysphere. It is the skin of web design.

Some languages like Java and C# contain interfaces for interacting with CSS (such as in org.w3c.dom.css for Java and System.Web for C#). CSS is not a programming language (as it is not Turing complete), but just a markup language with HTML for customising websites with. It was formerly managed by W3C but it is now by WHATWG.

CSS Awards

Best CSS Developer Award

Every year, Apple recognises the efforts of UI/UX designers and presents them a chance to larp as real web developers. Two prestigious awards are handed out in each year's Worldwide Developer Conference (WWDC): the "Center a Div Award" and the "Best CSS Developer Award".

Notable "Center a Div Award" Recipients

This list is incomplete and needs further research. (You) VVILL help complete it.

Year	Recipient	Reason
1996	Håkon Wium Lie	For creating CSS
2005	Anonymous unpaid intern working at Google	For being the first to center a div using margin: 0 auto;
2016	Barack Obama	For centering a div on the first try
2020	Stack Overflow	Billions must visit this site if they forget how to center a div/ text vertically/ horizontally
2022	ChatGPT	For killing Stack Overflow
2026	TBD	TBD

Notable "Best CSS Developer Award" Recipients

This list is incomplete and needs further research. (You) VVILL help complete it.

Year	Recipient	Reason	Other Nominees
2019	Jeffrey Epstein	Awarded posthumously for his extensive contribution towards the development of DOM nodes. In particular, he created the following pseudo-classes and selectors: :nth-child(), :first-child, :last-child, :nth-last-child().
2020	Soot	For founding the Sharty and writing better CSS than 4cuck
2021	Gigachad	For refusing to use any CSS frameworks or frontend libraries, 25 years after the birth of CSS; he coded his (open-source) blog in plain HTML, CSS and JS.
2025	Charlie Kirk	Awarded posthumously for his opinion on z-index. He believes that anyone who uses z-index: 99999; touches kid and should be sent to hell immediately. He was shot by (the ghost of) Jeffrey Epstein, the 2019 award winner, 6 days later.	Microslop, for the 3D View Tool in Microsoft Edge's DevTools
2026	TBD	TBD, but sources believe it is Gigachad, for refusing to use AI and still visiting Stack Overflow for CSS-related questions.

Tutorial

Step 1

Lets say you have a paragraph on a HTML slide that looks like this.

<p>This is a paragraph.</p>

To make the text red, background light blue and the font family "Tahoma":

<p style="color: red; background: lightblue; font-family: tahoma">This is a paragraph.</p>

Step 2

you can put this in the HTML head to make all paragraphs look like that

<style>
p {
  color: red;
  background: lightblue;
  font-family: Tahoma;
}
</style>

Step 3

But what if you only want certain paragraphs (and other tags) to look like that? Do this in your <head> section:

<style>
.custom-paragraph {
  color: red;
  background: lightblue;
  font-family: Tahoma;
}
</style>

And then change the paragraph to

<p class="custom-paragraph">This is a paragraph.</p>

Step 4

<html>
<head>
<title>CSS test</title>
<style>
.custom-paragraph {
  color: red;
  background: lightblue;
  font-family: Tahoma;
}
</style>
</head>
<body>
<h1>CSS test</h1>
<p>This is a normal paragraph.</p>
<p class="custom-paragraph">This is a custom paragraph.</p>
<h2 class="custom-paragraph">The style you made also works on other elements.</h2>
</body>
</html>

Next steps

Go here to learn more styling tags, like font weight, gradients, borders and more.

If you want to do CSS on MediaWikis like this one, it’s worth reading MW’s CSS manual and also learning about HTML functions on MW that can be useful for your CSS such as Magic Words. There’s also a lot to be learned from looking at what other people are doing.

Tutorial: How to Center a Div

Centering a div is one of the most common tasks in web development. Here are several ways to do so.

Flexbox

You can center a div horizontally and vertically by applying the following flexbox properties to the parent element.

.parent-container {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
}
.centered-div {
    width: 200px;
    height: 100px;
}

CSS Grid

You can center a div horizontally and vertically by using place-items: center on the grid container.

.grid-container {
    display: grid;
    place-items: center;
}

.centered-div {
    width: 200px;
    height: 100px;
}

Alternatively, you can place the div inside a grid container and set its margins to auto.

.grid-container {
    display: grid;
}

.centered-div {
    margin: auto;
    width: 200px;
    height: 100px;
}

Absolute Positioning and Transform

You can center an element relative to a positioned parent by using absolute positioning and CSS transform.

.parent-container {
    position: relative; /* Gives positioning context for child elements */
}

.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
}

text-align

If your div is of display inline-block, you can center it horizontally by applying text-align: center to its parent container.

.parent-container {
    text-align: center; /* Centers inline-block children horizontally */
}

.centered-div {
    display: inline-block;
}