1. 1

   text stuff mostly
   🌟 your here 🌟

2. 2

   boxes, transform

3. 3

   positioning, clicking stuff

4. 4

   flexbox and grid

5. 5

   animation and other nonsense

Are YOU a CSS BABY???

Are your friends doing stupid css tricks and leaving you feeling left out?

Do you wish Certified Computer Professional
Eevee From Pokémon would help you out?

ok i'll do my best

---

So You Want To Know CSS

i'm guessing you want to know css specifically for goofing around on cohost, which makes it a little different. several features are unavailable, several other features are only possible with creative trickery, and everything else is kind of an ugly mess

if you want some real guidance then i assume the MDN tutorial is pretty solid but we want to get to the 🥳 Fun Stuff 🥳Fun Stuff

so here is the crash course!!

CSS is (ideally) how you specify the appearance of HTML, including both purely aesthetic stuff (colors and italics and whatnot) and fundamental layout stuff (how things are arranged)

so you have to also understand HTML, which luckily is pretty basic

HTML

<p>for example each of these paragraphs is wrapped in "p" <em>tags</em>, thus creating a "p" <em>element</em>.  elements can be nested, although there are some rules as to what can contain what — a "p" cannot contain a second "p", for instance, because that just doesn't make sense.  but it can contain an "em", short for "emphasis", which makes text italic.</p>

"tag" versus "element" is one of those things where the two terms are almost always interchangeable, except for the 5% of cases where they're not, and then if you mix them up nerds will look at you funny but still understand what you mean. sorry, it's like learning idioms in a foreign language

the tags we will be most interested in for our cohosting purposes are the following:

• <div>, short for "division" i guess, which is a block element (we'll get to that in a hot minute) with no special behavior. it's basically designed to be a blank canvas for slapping CSS onto.

• <span>, short for... "span"? which is an inline element with no special behavior.

• in special cases, <details> and <summary> to make clickable things

@noracodes has assembled a full list of allowed tags.

"wow eevee i've been reading for like ten minutes and i still don't know how to make gradient text" ok ok fine hang on

CSS

CSS is made up of a bunch of different properties, which you can assign to elements.

the normal way to do this is to have a thing called a stylesheet, which can apply properties to a bunch of HTML elements at once. so like the classic example is that you can make every <h1> on the page — that's a level 1 heading — be colored red like this:

h1 {
    color: red;
}

there are two mechanisms for doing this — a <link> tag pointing to a stylesheet in a separate file, or a <style> tag containing a stylesheet directly — and unfortunately cohost forbids both of them. which is pretty reasonable since it would let you absolutely fuck up the whole contents of the site. so forget the last three paragraphs.

also that's what CSS looks like. it's a lot of property name, colon, value, semicolon. "value" can look like several different sorts of things though.

instead, what we can do is use the style attribute on any element. so you can write this if you like:

<h1 style="color: red;">hey guys whats up</h1>

unfortunately, for cohost purposes, you will then have to put that same style attribute on every single <h1> you use. sorry, them's the rules. if you were making a real website then you would almost never see style="...", precisely because it leads directly to copy/pasting the same blobs of junk all over the place

alright well that's great and all but what are some cool CSS properties?

Give me the props eevee

im getting to it!! here are some common baby properties to get you started. you can look them up on MDN if you want excruciating detail also. slap any of these bad boys in a post like this

<span style="...">Your Cool Text Here</span>

color: red;

change the text color. surprise!

---

font-size: 0.75em;

change the text size. this is a different sense of "em" which specifies a length, and i'll get to that in a bit, but the important bit is that this example will make the text 25% smaller

---

font-style: italic;

make text italic. use normal to undo it. i think font-style can do something else too like oblique? what is that, italics but the other way? no that looks like normal italics to me. welp no idea

---

font-weight: bold;

make text bold. you can also do bolder text and even light text, though i think you need font support for variable bolding like that. basically i have never in my life seen anyone set this to anything but bold

---

font-family: serif;

change the font. you can actually put in a font name here (wrapped in quotes if it has spaces), but guessing which fonts other people have installed is kind of a crapshoot. you can also put a series of fonts separated by commas, and the browser will use the first one that's available.

but the usual thing i do for cohost is use one of the generic family names (which you should always have as the last in your font list anyway), in which case the browser will just pick a relevant default: serif, sans-serif, monospace are the most reliable; cursive and fantasy are possibly more hit-or-miss (i get Comic Neue and Impact, what?); and i have never seen anyone use system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, emoji, math, or fangsong.

---

text-decoration: underline;

underline text. this is our first property that can do some fun variant stuff, because it's actually four properties:

• which lines to use, out of underline, overline, and line-through (and you can use more than one of them)
• what kind of line to use: solid, double, dotted, dashed, wavy
• what color the line is: just slap a color in
• how thick the line is: stick in a length, see below

so now you can, i dunno, call out your own typographicla errors:

so now you can, i dunno, call out your own <span style="text-decoration: wavy underline red;">typographicla</span> errors:

great job! you have already grown into a CSS Toddler

CSS values

i keep saying "color" and "length" and these are two particular things of things so i should probably touch on those

colors

you can write out colors a whole bunch ass of ways. mdn lists them all but here are the good ones

• a color name like red. there are a number of these but for the most part i just use really basic color names off the top of my head when i don't care too much about the specific color

• the color name transparent, which is transparent. i believe it's specifically transparent black, but css is clever enough that it works how you'd naïvely expect. if you don't know what subtle problem i'm alluding to then don't worry about it, css has just saved you four paragraphs of tedious explanation

• a six-digit hex value in the form #rrggbb, which you can get from any color picker in the whole entire world

• a three-digit hex value in the form #rgb, which will effectively double each digit to make a traditional six-digit value. this is especially nice for grays (#999), kinda retro DOS-like colors (any combination of 0, 5, a, and f), or taking a wild swing at a color off the top of your head if you are good at RGB in your head.

• a four- or eight-digit hex value, which is like the above but with an alpha (transparency) channel added: #rgba or #rrggbbaa. i'm especially a fan of this for stuff like shadows; #0004 is my go-to 25ish% opaque black.

• an HSL color of the form hsl(360, 100%, 50%). i like these because they're fairly intuitive (if you can remember how hue maps to the spectrum) and you can change the hue to get colors that are "about as light" without much fucking around.

  if you're unfamiliar: HSL is short for hue, saturation, lightness. or... luminosity or something. truly, no one knows.

  "hue" is a number from 0 to 360 specifying where you are on the color wheel — 0 is red, 120 is green, 240 is blue. with a little subdividing you can find some other familiar spots: 30 is orange, 60 is yellow, 210 is azure, 300 is purple, 345 is pink. i almost never have any need to move in smaller than increments of 15

  "saturation" is how gray the color is. 0% gives you a gray; 100% gives you a pure color.

  "lightness" goes from black at 0%, to the most intense color at 50%, to white at 100%. this one might feel a little funny to some people but i like that you can get pastels just by using lightness of like 95%

  additionally you can add a fourth argument for alpha, either as a percentage or a number from 0 to 1. i always thought you had to write it as hsla(...) if you used an alpha channel but i'm looking at MDN now and maybe that's not necessary any more

  variations you might see in the wild: hue is obviously a number of degrees, and can be given in angle units, such as 90deg or 1rad or 0.5turn. there's also a new syntax that looks like hsl(360 100% 50% / 25%) but i don't know why they felt the need to do this

• you might also see RGB colors written out with decimal numbers as rgb(48, 96, 255) but this is mostly used as an output for tools? i don't know why a human being would write this by hand

• the special color name currentcolor refers to the current text color. occasionally useful in css trickery but probably not so much on cohost

there are some recent additions that are more complex, mostly to do with colorspaces, but i've never seen them in the wild.

lengths

a length is, generally, a number with a unit after it. there is no space between the number and the unit. so two pixels is written as 2px.

(some other things are written in similar ways but with different units, like 90deg.)

the one exception is that you can (usually) write a zero length as simply 0, because the units don't matter then.

common units include:

• px, for pixels. it's not real pixels. but also it sort of is. don't worry about it. generally reserved for small precise things, like single-pixel borders.

• em, a printer's term, which in CSS refers to the current font size. this is why you can use it in font-size to scale the font size! the spacing between and around elements is often given in ems. it's nice that it scales relative to the text size, and it saves you from having to think in very fine increments for big chunky amounts.

• rem, or "root em", which refers to the base font size for the page. most of cohost's own CSS is given in terms of this. putting a 1rem space around something will scale relative to the page's normal text size, but will stay the same size even if you put it on an element with big text. if you don't change the text size then this is equivalent to em.

• vw and vh, which are 1% of the width and height of the browser window. (the part showing the page, not including the title bar and sidebars and whatever.) this is mostly helpful for arranging something compactly on a screen of any size without scrolling (e.g. game ui), but it might also come in handy for trying to get a css crime to scale down to mobile as well. you can also use vmin and vmax, which refer to the smaller and larger of those two dimensions.

• sometimes, for some properties, you can also use a percentage instead of a length. (a percentage is not itself a length!) what it means varies, and can be kind of unintuitive, but that mostly comes up with layout stuff, which we'll go into later.

there are, naturally, very many more, but most of the others have very niche uses.

more, cooler, properties

text-shadow: 3px 4px 1px orange, ...;

add a drop shadow to text. that's a lot of numbers, but they are X Y BLUR COLOR. the first two are how far away from the actual text to draw the shadow (negative offsets are ok), and the third is how much to blur the shadow (use 0 or just leave it off for no blur). the color can also go first if you like.

you can specify multiple shadows by separating them with commas. (the first one listed is the one on top, which might matter if you use translucent colors.) you can use this to clumsily emulate a text outline, by

drawing the same "shadow" in all four diagonal directions

however there is also

---

-webkit-text-stroke: 1px pink;

oh boy! this one has some history. it's not standard and was invented by apple for mobile safari — hence having the funny "webkit" prefix — but web developers are fools who don't remember the IE6 days and made a bunch of stuff that assumed safari would always be the only mobile browser, which caused some problems when mobile firefox was released. mozilla didn't have access to a witch who could fix a whole mobile web's worth of existing sites made by clowns, so they did a big sigh and implemented some webkit-only properties.

most of them were eventually standardized and use of the -webkit stuff gradually faded, but this one was not. probably because it's butt ugly in most cases and what you actually want is a text outline. but i'm mentioning it here because i used it for the first line of this post.

you can fix this with the SVG property paint-order: stroke fill;, which instructs the browser to draw the stroke first and then the text on top, which emulates an actual outline.

however, comically, this only works in firefox! chrome seems to ignore it on html elements. welcome to web development. even in firefox it's a bit funky anyway. also this won't help for certain kinds of other tricks

---

background

this one does a lot of things. it's actually shorthand for like ten other properties. actually a lot of properties are shorthand for more specific properties, and the cool thing is that css generally lets you put the parts in any order and is designed so it can tell what you mean. the bits most of interest are as follows:

obviously you can set a solid background color.

you can also set a background image, using url(https://...). by default that will just tile, but you can control the starting position, size, and tiling as well. this stuff is pretty cool and flexible (like contain and cover to adapt to the size of the element), but background images are kind of janky most of the time so i don't think i need to super go into it. but for example here is background: url(https://c.eev.ee/cohost/verifyed.svg) center / 1em;. wow! what a nightmare.

it's considered polite to name a color alongside an image background, even if the image is totally opaque. that way the text is likely to be legible even if the image fails to load.

you can also set a gradient and i cannot understate how fucking amazing that was when it first came out. it doesn't seem like a big deal now that we're all about flat design, but in 2007 at the height of the skeuomorphism frenzy, everything had a fucking gradient on it, and web devs were doing the most grotesque stuff to generate them on the fly and whatever. but now you can just write them in css and the browser does it for you!

that one looks like this:

background: linear-gradient(to right, hsl(210, 100%, 95%), hsl(345, 100%, 95%));

the linear-gradient() thing is technically a type of image, so it goes where url() goes. the first argument, to right, gives a direction; you can also name a corner (to bottom right) or an angle (45deg) or just leave it off for the default behavior of a vertical gradient. after that is a list of colors. you can optionally put percentages after them to specify where along the gradient they appear, or otherwise they'll just be spaced equally. so red, black is equivalent to red 0%, black 100%. you can even give two positions for a color, and then everything between those positions will be a solid color. and if you do something like red 0% 50%, black 50% 100%, where two colors "claim" the same position, then you'll get a hard transition from one to the other.

a gradient has no set size and will expand to fill whatever it's background...ing. you can change its size like any other image, or there's a repeating-linear-gradient().

there's also radical gradients and conic gradients and some other little tricks you can do, but i guess just peruse the MDN page

also, like with text shadows, you can have multiple backgrounds. so if you use translucent colors, you can stack gradients:

but wait, that's not quite all! there's one cool trick that doctors hate!

one of the background sub-properties is called "clip", and it controls how much of the element the background appears under. you can use it to like, make the background not draw under translucent borders i guess, which is sort of a niche case.

except for one specific value: text, which makes the background draw only under the text. so with background: linear-gradient(to right, purple, teal) text;, you can get gradient text with absolutely no effort at all. just remember to make the text itself transparent, or at least translucent, else the text will just draw on top of the background and it'll look like nothing happened

wow i just discovered something really cool about how gradient backgrounds interact with inline boxes but i'll have to save that for later

also i lied a bit, because speaking of webkit, it still only supports this with a prefix. so you actually have to do it in three passes:

background: linear-gradient(to right, purple, teal);
-webkit-background-clip: text;
background-clip: text;

relevantly, one downside of this is that if an ancient browser like chrome doesn't support the text clipping, then you'll just have transparent text on a regular background (or possibly no background at all). and that's not great. there's a gizmo for detecting feature support, but it only works in stylesheets, so we can't use it. whatever, not our problem, we're doing Crimes

---

filter: blur(1px) ...;

ohh nooo. this one has mostly three uses: immensely clever special effects, cool subtle touches, and the most godawful eye strain you've ever seen in your life.

this is a space-separated list of any combination of filter functions:

• blur(LENGTH)
• drop-shadow(...)
• brightness(AMOUNT)
• contrast(AMOUNT)
• hue-rotate(ANGLE)
• saturate(AMOUNT)
• grayscale(AMOUNT)
• sepia(AMOUNT)
• invert(AMOUNT)

these all do pretty much what they sound like, if you have ever used an image editor. AMOUNT is either a plain number or a percentage. usually values over 100% don't make a lot of sense, but up to 200% is ok for brightness/contrast. invert(50%) is a very roundabout way to make a solid medium-gray box. also there's no "colorize", but you can fudge it by combining sepia(100%) with the others.

you can only put one shadow definition per drop-shadow(), but you can use drop-shadow() itself more than once. though then the first shadow might get shadowed again? i guess i could just try it ok whoa that's kind of cool

---

cursor: help;

this specifies what mouse cursor you get when you point at the element. this whole paragraph should have a help cursor in fact. there's a whole big list of standard cursor names like pointer, but you can also use a URL to an image, or you can use none if you want to be very rude

---

opacity: 0.5;

this is not very interesting for plain text. but you can use it with images (if you write them as html rather than markdown, with <img>), and maybe it'll be more interesting later with fancy boxes. honestly though i can't remember the last time i used this; there are so many more interesting ways to mess with opacity in css nowadays

btw inline images

browsers support data: urls, which look like urls sort of but they have the entire file stuffed into them. you can use these in css too if you want to include a rinky-dink image but don't want to upload things. unfortunately i am a turbo nerd and the only way i can conceive of constructing one is with the base64 command already on my system so you're kind of on your own there, but they look like this

data:image/png;base64,wiuh987y349rh90347853y4h7236y4

except they are one mile long.

just slap one of those in url() and you're good to go. cohost even uses these for stuff like the cutout on avatars, which i copied for my avatar at the top of this post. here it is

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==

chef kiss

hot tips

because cohost actually implements markdown correctly—

RAPHS oh thank you.

ahem.

because cohost actually implements markdown correctly, you can sprinkle line breaks throughout your html and css crimes without fear of an errant <br> ruining your day. in fact, html cares so little about whitespace that you can stick line breaks inside the style attribute, if that helps.

<div style="
    color: blue;
    background: red;
    font-size: 2em;
">
    graphic design
    is my passion
</div>

i'll spare you the preview of what that looks like. you don't need to indent if you don't want to, either, but it mostly doesn't matter. just make sure you DO NOT leave a blank line anywhere, or it will probably be interpreted as a paragraph break.

if you write a css property without a value, cohost will choke on your whole post and strip all the html. i've done this by accidentally typing something like font-style-italic;. it's kind of annoying to find the problem when this happens but at least you know what to look for.

you can't put a <div> inside of a <span>, for reasons we will get to in a future post. you also can't put a <div> inside of a <p>. so if you're doing nonsense in the middle of a normal line of markdown text, you must use <span>s only.

eggbug tries to read your post like a browser would, and then eats anything that it doesn't like the look of. if something truly bizarre is happening, you might have forgotten an end tag or quote or > somewhere, and eggbug has decided everything following that is suspicious and eaten all of it. that is very good for eggbug but not so good for your post. luckily the problem is likely to be near where things start going awry.

markdown stops working while you are inside html. so you gotta write out all your links and images and bolds and stuff by hand sorry. however @'s do work

most important of all: inspect element

that should open a panel that shows you behind the curtain. using the developer tools is beyond the scope of this terrible post, but this should show you both the html structure and the css properties for each element. you can even change those properties live, or add new ones! great both for seeing what someone else has done, and for trying stuff out without switching back and forth between compose and preview. just be aware that this isn't permanent, and as soon as you go to another page (or even switch back to "compose") your changes are lost.

ok bye

this took an inordinately long time already and we haven't even mentioned box layout yet but i hope this will help some css babies evolve into, i don't know, css tweens? wait, no, those are for later

if there is interest and my adhd cooperates then my rough plan is like, 2. blocks and block properties and the details element, 3. flex and grid, 4. animation and shenanigans

bibliography

these aren't necessarily relevant they're just the tabs i have open at the moment and may be interesting

• What Tags Are Allowed On Cohost? by @noracodes
• Getting Started with CSS Crimes by @snippid which contains more links to more things
• Cohost's Predefined CSS Animations by @daffodil
• prechoster by @blep
• nex3's syntax highlighter by @nex3
• Markdown PLUS by @oatmealine which will just do a bunch of text effects for you but is less, uh, bespoke or something

1. 1

   text stuff mostly
   🌟 your here 🌟

2. 2

   boxes, transform

3. 3

   positioning, clicking stuff

4. 4

   flexbox and grid

5. 5

   animation and other nonsense