The Soyjak Wiki wishes you a happy new year!
CSS
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.
