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
Cobblestone (talk | contribs) |
|||
| Line 4: | Line 4: | ||
== Tutorial == | == Tutorial == | ||
===Step 1= | {{Slideshow | ||
Lets say you have a paragraph on a [[HTML]] | |prefix=1 | ||
|title=tutorial | |||
|count=5 | |||
|slide1title=Step 1 | |||
|slide1content=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> | ||
= | |slide2title=Reusing styles | ||
you can put this in the HTML head to make all paragraphs look like that | |slide2content=you can put this in the HTML head to make all paragraphs look like that | ||
<pre><style> | <pre><style> | ||
p { | p { | ||
| Line 18: | Line 22: | ||
} | } | ||
</style></pre> | </style></pre> | ||
= | |slide3title=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: | |slide3content=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> | ||
.custom-paragraph { | .custom-paragraph { | ||
| Line 29: | Line 33: | ||
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> | ||
slide4title=End result | |||
<pre><html> | |slide4content=<pre><html> | ||
<head> | <head> | ||
<title>CSS test</title> | <title>CSS test</title> | ||
| Line 48: | Line 52: | ||
</body> | </body> | ||
</html></pre> | </html></pre> | ||
|slide5title=Next steps | |||
Go [https://www.w3schools.com/css/default.asp here] to learn more styling tags, like font weight, gradients, borders and more. | |slide5content=Go [https://www.w3schools.com/css/default.asp here] to learn more styling tags, like font weight, gradients, borders and more. | ||
}} | |||
Revision as of 16:14, 11 November 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.
