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
Changed redirect target from User JS#CSS Themes to Customization#CSS Themes Tags: Redirect target changed Visual edit |
Removed redirect to Customization#CSS Themes Tag: Removed redirect |
||
| Line 1: | Line 1: | ||
{{DISPLAYTITLE:CSS}} | |||
{{Distinguish|[[Customization#CSS Themes]]}} | |||
<abbr title="Cascading Style Sheets">CSS</abbr> is what is used to style things on the web. Obviously it's used on the Soysphere. | |||
== Tutorial == | |||
===Step 1=== | |||
Lets say you have a paragraph on a [[HTML]] page that looks like this. | |||
<pre><p>This is a paragraph.</p></pre> | |||
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> | |||
===Step 2: reusing styles=== | |||
you can put this in the HTML head to make all paragraphs look like that | |||
<pre><style> | |||
p { | |||
color: red; | |||
background: lightblue; | |||
font-family: Tahoma; | |||
} | |||
</style></pre> | |||
===Step 3: Only styling some tags=== | |||
But what if you only want certain paragraphs (and other tags) to look like that? Do this in your <head> section: | |||
<pre><style> | |||
.custom-paragraph { | |||
color: red; | |||
background: lightblue; | |||
font-family: Tahoma; | |||
} | |||
</style></pre> | |||
And then change the paragraph to | |||
<pre><p class="custom-paragraph">This is a paragraph.</p></pre> | |||
=== End result === | |||
<pre><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></pre> | |||
=== Next steps === | |||
Go [https://www.w3schools.com/css/default.asp here] to learn more styling tags, like font weight, gradients, borders and more. | |||
Revision as of 15:44, 21 October 2025
>Though maybe you were looking for Customization#CSS Themes?
CSS is what is used to style things on the web. Obviously it's used on the Soysphere.
Tutorial
Step 1
Lets say you have a paragraph on a HTML page 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: reusing styles
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: Only styling some tags
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>
End result
<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.
