sorry if there's too many technical terms, i'm going off the assumption that you know html/css. if there's anything you don't understand, feel free to ask!
inspection tool is your best friend. check and uncheck boxes to see what a property does, pick colors, and test out changes before putting it in your final code.
if you're struggling to find a selector for an element, use the inspector tool! right click -> inspect -> locate the element in html -> right click -> copy selector. saves my ass everytime.
instead of using only px or % value, you can use vw/vh for extra responsiveness.
if a code doesn't seem to work, try adding !important rule to make sure that no ao3 code is overlapping it. use them sparringly tho.
stack elements with the same properties at once to save time. for example, instead of multiples color: white; with different elements, you can just: element, element2, element 3 { color: white;).
You can also stack multiple effects together, such as text-shadow, box-shadow, gradients, background images and so on. Just seperate each effect with a comma.
for stacking backgrounds, each value corresponds to a specific layer. The first image is the top layer, the second image is underneath it, and so on. Other properties like background-position and background-size also accept multiple values, and each value applies to the matching background layer.
for example: background-image: png1, png2, mainbg;
background-position: top left, bottom right, center;
background-size: 30px, 30px, cover.
you can also change a bg's color with it, which i use frequently:
background-image: #color, bg-url;
background-blend-mode: luminosity;
avoid heavy layout changes! ao3's elements are pretty dependent on each other, changing one might cause another to morph, and it gets even worse on mobile. keep this in mind if you want responsiveness.
If you're changing fonts, always have fallbacks! not every font is supported on certain devices and web browser, so its always a good idea to have them just in case. for example: font-family: verdana (main font), helvetica, monospace (fallbacks!) ;
ao3's public site skins page has lots of useful snippets which you can reuse and modify in any way you want! these site skins tutorial are pretty useful too, just make sure to put credit where its due.
since you're only working with css, what you can add is limited, but not impossible with the help of :before and :after pseudo elements! use them to add decorative text, pixels and images anywhere you like!
lastly, don't be afraid to play around and experiment with them!!
in all seriousness tho take this with a grain of salt cuz i'm self taught and only learned html/css a few months ago...im also really honored you went and asked me for tips of all people <3 really hope this helps!
haiii !! so sorry to bother you but is it possible for you to make a darker version of your pink skin.. if not i completely understand!!! just very bright lolz...
-someone who can'tcode
i've gotten quite a few asks requesting for another version of my site skin, but im too lazy to do all of them so here's a tutorial for anyone who wants to make an ao3 site skin / wants to use mine as a base.
Guide Basic CSS Structure: selector { property: value; } Example: body { background: #12cdef; } Common properties: Color: text color.
