{ Check out our cool CSS styles in the wiki consoomer edition. ~drummyfish }
Cascading Style Sheets (CSS, cascading because of the possible style hierarchy) is a computer language for styling documents (i.e. defining their visual appearance), used mainly on the web for giving websites (HTML documents) their look. The language is standardized by W3C (the consortium established for making such standards). CSS is NOT a programming language, it's merely a language that defines attributes of visual presentation such as "headings should use this font" or "background should have this color"; it is one of the three main languages a website is written in: HTML (for writing the document), CSS (for giving the document a specific look) and JavaScript (programming language for the website's scripts). As of 2024 the latest CSS specification is version 2.1 from 2016, version 3 is being worked on.
A website is not required to have a CSS style, without it it will just have the plain default look (which is mostly good enough for communicating any information, but won't impress normies), though only boomers and hardcore minimalists nowadays have websites without any CSS at all (and we applaud them for such minimalism). Similarly a single HTML website may use several styles or allow switching between them -- this is thanks to the fact that the style is completely separate from the underlying document (you can in theory take any document's style and apply it to any other document) AND thanks to the overriding rules that say which style will take precedence over which (based on which one is more specific etc.) -- using multiple style sheets at once creates the "cascades" the name refers to. In theory a web browser may even allow the user to apply his own CSS style to given website (e.g. a half blind guy may apply style with big font, someone reading in dark will apply "dark mode" style and so on), though for some reason browsers don't really do this (well, it seems like the original intent of being able to do good things like this was reworked by capitalists that rather see CSS more as a tool to apply more marketing styling and, of course, a capitalist won't want the user to change how his site looks because he might for example hide ads or annoying flashing buttons the capitalist paid hard money for).
Back in the boomer web days -- basically before the glorious year 2000 -- there was no CSS. Well, it was around, but support was poor and no one used it (or needed it for that matter). People cared more for sharing information than pimping muh graphics. Sometimes people needed to control the look of their website to some degree though, for example in an image gallery it's good to have thumbnail sizes the same, so HTML itself included some simple things to manipulate the looks (e.g. the width property in the img tag). People also did hacks such as raping tables or spamming the <br /> tags or using ASCII art to somehow force displaying something how they wanted it. However as corporations started to invade the web, they naturally wanted more consumerism, flashing lights and brainwas... ummm... marketing. They wanted to redefine the web from "collection of interlinked documents" or a "global database" to something more like "virtual billboard space" or maybe "gigantic electronic shopping center", which indeed they did. So they supported more work on CSS, more browsers started to support it and normies with blogs jumped on the train too, so CSS just became standard. On one hand CSS allows nice things, you can restyle your whole website with a single line change, but it is still bloat, so beware, use it wisely (or rather don't use it -- you can never go wrong with that).
Correct, LRS approved attitude towards this piece of bloat: as a minimalist should you avoid CSS like the devil and never use it? Usual LRS recommendations apply but, just in case, let's reiterate. Use your brain, maximize good, minimize damage, just make it so that no one can ever say "oh no, I wish this site didn't have CSS". You CAN use CSS on your site, but it mustn't become any burden, only something optional that will make life better for those using a browser supporting CSS, i.e. your site MUSTN'T RELY on CSS, CSS mustn't be its dependency, the site has to work perfectly fine without it (remember that many browsers, especially the minimalist ones not under any corporation's control, don't even support CSS), the site must not be crippled without a style, i.e. firstly design your site without CSS and only add CSS as an optional improvement. Do not make your HTML bow to CSS, i.e. don't let CSS make you add tons of divs and classes, make HTML first and then make CSS bow to the HTML. Light CSS is better than heavy one. If you have a single page, embed CSS right into it (KISS, site is self contained and browser doesn't have to download extra files for your site) and make it short to save bandwidth on downloading your site. Don't use heavy CSS features like animation, blurs, color transitions or wild repositioning, save the CPU, save the planet (:D). Etcetc.
TODO: more more more
The CSS style can be put into three places:
The style itself is quite simple, it's just a list of styling rules, each one in format:
selectors
{
style
}
Here selectors says which elements the rule applies to and style defines the visual attributes we want to define. For example
p
{
color: blue;
font-size: 20px;
}
h1, h2, h3
{
color: red;
}
Specifies two rules. One says that all p tags (paragraphs) should have blue text color and font that's 20 pixels tall. The second rule says that h1, h2 and h3 tags (headings) should have red text color. Pretty simple, no?
Tho it can get more complex, especially when you start positioning and aligning things -- it takes a while to learn how this really works, but in the end it's no rocket science.
TODO: moar
A user running bloatbrowser that implements CSS and has it turned on by default is openly inviting you to freely remotely manipulate what his computer is showing to him, so let's take this opportunity to do some lighthearted trolling :) Here are some possible approaches:
cursor: Change or even hide the mouse cursor :D You can set it to none (hide), progress (make the user think something's loading indefinitely, see how long it takes for him to realize), wait, col-resize or even specific image with url(...).body * { display: none; } body:before { content: "This site only works without CSS." }.@keyframes lul { 0% { background-color: red; } 100% { background-color: green; } } body { animation-name: lul; animation-duration: 0.1s; animation-iteration-count: infinite; }.<body> size so that the scroll bars keep resizing.a:hover { display: none; }: Makes links disappear when they're pointed at with the cursor :D Can also be used for buttons etc.:hover, or better yet use transform to rotate or skew it, triggering a spectacular domino effect. You have to make it so that if one div reshapes on mouse over, another one gets under the cursor, triggering reshape of that one, which pushes another one under the cursor etc.:hover, this will cause some vomit inducing blinking whenever mouse is moved.Powered by nothing. All content available under CC0 1.0 (public domain). Send comments and corrections to drummyfish at disroot dot org.