CURRENT MISSION: Conclude the 2026 soyjak.party hack page, aswell as any pages relating to it, such as the Summer 2026 Crisis page.
Update Quotecord with any relevant info. See the blackboard for more info.

CSS: Difference between revisions

From Soyjak Wiki, the free ensoyclopedia
Jump to navigationJump to search
← Older edit
VisualWikitext
North (talk | contribs)
8,864 edits
Removed redirect to Customization#CSS Themes
Tag: Removed redirect
m Fixed link URL
 
(19 intermediate revisions by 7 users not shown)
Line 1: Line 1:
{{DISPLAYTITLE:CSS}}
{{DISPLAYTITLE:CSS}}
{{Distinguish|[[Customization#CSS Themes]]}}
{{Distinguish|[[Customization#CSS Scripts]] or [[CS:Soy]]}}
<abbr title="Cascading Style Sheets">CSS</abbr> is what is used to style things on the web. Obviously it's used on the Soysphere.
[[File:3Soyjaks Core Web Technologies.png|thumb|CSS is known as one of the 3 {{glow|glowie}} {{Echoes|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.
 
Some languages like [[Java]] and [[C Sharp|C#]] contain interfaces for interacting with CSS (such as in <code>org.w3c.dom.css</code> for Java and <code>System.Web</code> 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 [[Gigachad|W3C]] but it is now by [[SNCA|WHATWG]].


== Tutorial ==
== Tutorial ==
===Step 1===
 
Lets say you have a paragraph on a [[HTML]] page that looks like this.
=== Step 1 ===
Lets say you have a paragraph on a [[HTML]] slide that looks like this.
<pre><p>This is a paragraph.</p></pre>
<pre><p>This is a paragraph.</p></pre>
To make the text red, background light blue and the font family "Tahoma":
To make the text red, background light blue and the font family "Tahoma":
<pre><p style="color: red; background: lightblue; font-family: tahoma">This is a paragraph.</p></pre>
<pre><p style="color: red; background: lightblue; font-family: tahoma">This is a paragraph.</p></pre>
===Step 2: reusing styles===
 
=== Step 2 ===
you can put this in the HTML head to make all paragraphs look like that
you can put this in the HTML head to make all paragraphs look like that
<pre><style>
<pre><style>
Line 18: Line 23:
}
}
</style></pre>
</style></pre>
===Step 3: Only styling some tags===
=== Step 3 ===
But what if you only want certain paragraphs (and other tags) to look like that? Do this in your <head> section:
But what if you only want certain paragraphs (and other tags) to look like that? Do this in your <head> section:
<pre><style>
<pre><style>
Line 29: Line 34:
And then change the paragraph to
And then change the paragraph to
<pre><p class="custom-paragraph">This is a paragraph.</p></pre>
<pre><p class="custom-paragraph">This is a paragraph.</p></pre>
=== End result ===
=== Step 4 ===
<pre><html>
<pre><html>
<head>
<head>
Line 49: Line 54:
</html></pre>
</html></pre>
=== Next steps ===
=== Next steps ===
Go [https://www.w3schools.com/css/default.asp here] to learn more styling tags, like font weight, gradients, borders and more.
Go [https://www.w3schools.com/css/default.asp 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 [[mediawikiwiki:Manual:CSS|MW’s CSS manual]] and also learning about HTML functions on MW that can be useful for your CSS such as [https://www.mediawiki.org/wiki/Help:Magic_words Magic Words]. There’s also a lot to be learned from looking at what other people are doing.
 
{{Programming}}
 
[[Category:Programming]]
[[Category:Markup languages]]

Latest revision as of 05:08, 15 August 2026

>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.

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.

Tutorial[edit | edit source]

Step 1[edit | edit source]

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[edit | edit source]

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[edit | edit source]

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[edit | edit source]

<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[edit | edit source]

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.

CSS is part of a series on
Computing

first

➜ /languages

├ /markup/ CSS • HTML • XML
├ /low_level/ Assembly • C • C++ • C# • Holy C • Rust
├ /high_level/ ActionScript • Bash • Go • Java • JavaScript • Lua • P • PHP • PowerShell • Python • Ruby • Scratch • SQL
└ /tutorials/ C • C++ • C# • Java • Python • Rust

➜ /software

├ /forums/ jschan • nusoi • OpenYotsuba • Vichan • XenForo • Yotsuba
├ /operating_systems/ BSD • Linux (Android • Fedora • Linux Mint • Ubuntu • Tails) • TempleOS • Windows
├ /applications/ Flash • GIMP • IRC • MS Paint • Paint.NET • Photoshop • Web Browser
├ /dev/ Free-software license • Game development • Vim
└ /misc/ 4get • Babybot • CAPTCHA • django • Email • JS Paint • MediaWiki • McChallenge • RAID • Ricing • shimmie2 • Snarkysnappydoxingtool.bat • Soyjak Party Enhanced • Systemd

➜ /cyb

└ Ad blocking • cock.li • Cryptocurrency • Dark Web • Operations security • RAT • Virtual Network Computing (VNC)

➜ /misc

├ /file_formats/ .gif • MIDI • .svg • .webm • .webp
└ /hardware/ Chromebooks • Raspberry pi • ThinkPad • WiFi

➜ /ai

└ Generative AI (ChatGPT • Gemini • Grok • Stable Diffusion) • Vibe coding

SOYNY
Retrieved from "https://soyjakwiki.org/index.php?title=CSS&oldid=470545"