{ 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).
CSS was probably designed by a woman because there are 140 colors with individual names such as "Blanched Almond", "Coral" and "Misty Rose". However none named nigger.
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 incorporated
some minimal means 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 gradients or wild positioning, save the CPU, save the planet (:D). Etcetc.
PRO TIP: you can achieve some basic formatting completely
without CSS (i.e. even without the style
attribute) -- for some stuff you can use the old HTML visual attributes,
even thought they are "discouraged". Whether it's better to do it this
way or rather use CSS depends on situation, but it's good to have a
choice, this may allow you to just completely avoid CSS (e.g. enter the
"nocss" website club) and maybe have better chance of supporting ancient
browsers. Though some of the attributes are already deprecated in HTML5,
browsers still support them and the worst that can happen is that they
simply won't work. It's probably also possible to use CSS and the HTML
attributes together, as a fallback. The visual attributes include
bgcolor, border, color,
cols, height, rows,
shape, size, width etc. You can
also use tables to give the page a layout (this is how it used to be
done back in the day). And of course you may use images for visuals as
well, but that may already be an inferior, more bloated solution.
TODO: more more more
The CSS style can be put into three places:
<link rel="stylesheet" href="style.css">). This is
good if you have multiple HTML files (i.e. a whole website) that use the
same style.<p style="color: red;"> hello </p>), but this
is discouraged as we're once again intermixing definition of structure
and visual style, something that CSS wanted to eliminate in the first
place.The style itself is quite simple, it's just a list of styling rules, each one in format:
selectors
{
style
}Here selectors say which elements the rule applies to and style defines the visual attributes. For example
p
{
color: blue;
font-size: 20px;
}
h1, h2, h3
{
color: red;
}introduces 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 once you start positioning
and aligning stuff (and making it all work on different devices and so
on) -- it takes a while to learn how it all works, sometimes you'll
encounter quite unintuitive design (for example that center-aligning a
fixed-size block is not done with align attribute but
rather through margin: auto). In the end it's not a rocket
science, but you won't master CSS overnight. A general advice must be
given: less is more, keep it simple! Try to use only light CSS
and a few simple rules, do not go apeshit with the latest and coolest
bleeding edge CSS transformations and animations and whatnot, that will
only make your site unmaintainable, bloated, slow, incompatible and most
likely also annoying. CSS can do a lot and it's tempting to do crazy
shit -- if you want something to be 3D spinning and have round corners
and be positioned with absolute coordinates, you can do it, but it's not
a good idea, please trust this advice.
TIP: "Modern" bloated web browser will typically have built-in so called "dev tools" (often opened with F12) that let you examine any website "under the hood", including visualization of all the CSS blocks and letting you modify them temporarily and in real time. This can help understand CSS much faster.
Now with CSS under our belt it's important to learn about two essential HTML elements we'll sooner or later come to need quite a lot:
<span>: A universal "inline" container. Unlike
elements like for example <b> and
<p>, span has no meaning from HTML's point
of view, it "does nothing", but it's useful for styling. By default span
has no distinct style either, it won't affect visual appearance in any
way until we explicitly tell it to. We use spans to mark inline things
(usually text) so that we can select them with CSS selectors. Let's say
we'd like to for instance be able to highlight text on our site with
yellow or green colors -- in our CSS style we'll add rules
.yellow { background-color: yellow; } .green { background-color: green; }
and then to actually highlight something we'll be using spans as so:
<p> This is a paragraph. <span class="yellow"> This text is yellow-highlighted. </span> <span class="green"> And this is green. </span> </p>.<div>: A universal "block" container. This is the
same as span, with the difference that div is a block
element, i.e. it's not part of the text flow. These are used for things
such as navigation menus, images, video players and so on.It's understandable that a newbie digging through complete documentation of all existing CSS attributes will only end up with a frustrating information overload, and so let us help by picking some of the most important attributes you should check out to start with:
background-color: Color of the element's background,
e.g. background-color: blue.background-image: Sets an image as the element's
background, e.g.
background-image: url("images/goatse.jpg"). To further
adjust HOW the image is applied see background-repeat,
background-size, background-position etc.border: Sets how the element's border is drawn (by
default there's usually no border at all). For example:
border: 1px dotted black. Borders on individual sides can
separately be handled through border-top,
border-right etc.color: The color of TEXT (i.e. NOT the color of
background, as intuition might suggest).display: How to draw the element, most common values:
none (invisible), inline (element that "flows
in the text") or block (element outside text).font-family: Chooses text font. The value is a
comma-separated list of fonts that will be prioritized from the left,
i.e. if desired font is missing, the right one will be tried and so
forth. Besides concrete fonts ("Times New Roman", "Helvetica", ...),
generic families can (and SHOULD) also be given, such as "sans-serif",
"monospace", ... For example:
font-family: Arial, Helvetica, sans-serif.font-size: Size of text, e.g.
font-size: 10pt.height: Sets height of the element. See also
min-height and max-height.margin: Sets the gap that will be between this element
and other elements, i.e. the OUTSIDE gap. This is similar to
padding, but padding is for the inside of the element.
Margin can be set for each direction (top, right, bottom and left) --
see attribute values below. IMPORTANTLY: setting both left and right
margin to auto will make the element get aligned in the
center (it will automatically position itself so that the left and right
gaps are equal).padding: Similar to margin, but sets the
gap that's between the element's border and its INSIDE content.text-align: How text will be aligned inside its parent,
most common values: left, right,
center or justify (kinda "block align", the
text will be stretched to fill the whole block).text-decoration: How the text is decorated, common
values: none, underline,
overline, line-through, ...width: Like height but for width.Now the values of these attributes can very often be expressed in various formats, for example colors can be specified with RGB, hex values or English words. Here is a summary of value formats:
auto (compute automatically, as in
width: auto), inherit (inherit the value from
parent) and so on. Some attributes expect special keywords, e.g.
text-decoration can be set to underline,
overline, none etc.px, as in
width: 160px), points (pt, as in
width: 20pt) and percents (of the parent's size,
%, as in width: 50%).color: rgb(255,0,127), rgba is allowed too),
HSL (e.g. color: hsl(55, 30%, 50%)),
hexadecimal (e.g. color: #00ff37 or
color: #fc9) or plain English
(e.g. color: red).margin: 10px 20px 30px 40px means
10px on top, 20px right, 30px at
the bottom and 40px left. If we'd do
margin: 5px auto, we'd get 5px on top and
bottom and auto on left and right. If we'd do
margin: 10%, we'd get 10% in all directions,
and so on. It's also possible to expand the attribute with the
direction's name, like: margin-left: 10px.Some more advanced attributes to study next are float
(can make page elements gravitate left or right), clear
(related to float, says if the element should "wait" and be
displayed only after float elements) and position (related
to left, right, top and
bottom attributes).
Oh dear, that's not nearly everything. Next check out pseudo elements
and pseudo classes. For example .mydiv:hover will match
anything with class mydiv, but ONLY if the mouse cursor is
over it. p:first-child will select only those
p elements that are first children of their parents. And so
on and so forth.
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.