GUIDE TO DREAMWIDTH HTML/CSS

[girlrock]

CONTENT DIRECTORY

🥝 Prereading
🍋 HTML/CSS crash course
🍊 Basic HTML
🍓 Inline CSS
🍇 Examples

🥝

PREREADING

disclaimer

this post is designed for people who have zero knowledge of css/html and want to learn simple, everyday formatting for their posts. if you have experience editing your theme on tumblr or similar websites, then most of this should be familiar; if you're more habituated to recent web tools like carrd that have limited need for html/css knowledge, then you might find purpose in concepts outlined here. feel free to comment if you have any questions!

why should i use html in the first place?

if you open your text editor to make a new dreamwidth post, you should see two tabs that say "rich text" and "html." if you don't want to touch html at all, you CAN just use rich text—it completely does the job and is often times more efficient. this lets you input links, indent paragraphs, change font colors, etc. directly and without too much difficulty. so why learn html?

first of all, rich text can get inconsistent and messy, and will produce a million extra tags if you try to switch to html afterward. if you try to make cuts with it, you'll often find that things can go awry and disappear randomly. it's also difficult to control spacing amounts and empty lines. html, meanwhile, can be pasted in directly from any text editor and be ready to go! you don't have to worry about any copy-pasting affecting your content (just make sure that you don't have any smart quotes in your html because that will break your entire code. i write directly into the html editor now so i don't have this issue, but you can turn off smart quotes in google docs if you like making your posts there!)

i also think that learning how to use html and inline css is a nice and powerful skill to have in general. you can specify many little finicky details that don't otherwise exist in rich text and maximize whatever vision you have in mind for your posts. it's just a lot of fun!

external resources

w3schools — HTML / CSS
mdn web docs — HTML / CSS
▶ these are both great reference guides that will break down every single concept you see here AND in greater detail. w3schools also has interactive tutorials that let you toggle with values first-hand. you don't have to go through all of these elements now; after you start trying to make things yourself, you can systematically search whatever you're stuck on and then learn that concept/gain experience while figuring it out.

▶ you can also pretty much google anything and find an answer—you'll either be led to the websites mentioned above, some stackoverflow thread that can help you troubleshoot, or another random website that's tackled your problem before. the world is your oyster!

🍋

HTML/CSS crash course

💡 WHAT IS CSS?
css stands for "cascading style sheets"—in short, this is a style sheet language that gets applied to html elements and affects how they get displayed on a webpage. if you were coding your own webpage, you would normally have a css file (or several) with id and class declarations that set things like font size, color, borders, shadows, margins, etc.

💡 WHAT IS HTML?
html stands for "hypertext markup language"—in short, you generally use this to display the actual content on your webpage, such as headers, links, paragraphs and images.

DEMO

💻 let's take a look at an example to understand how this comes together.

(don't worry if you don't quite get this: it's just an overview of external css, which isn't what we use in the dreamwidth editor.)

say you want to display the text "let's make this pretty!," but you want to change its font and make it larger, red, bold and centered. (note that i added a simple border to the output for readability, but these do not actually exist in the code.)

in your html file you could have:

<p>let's make this pretty!</p>


which, without any css whatsoever, would result in this:

let's make this pretty!

but what happens if you declare a class in a css file called, say, "style.css" with the following code?

.text {

color: #884dd9;
font-weight: bold:
text-align: center;
font-family: Georgia, serif;
font-size: 18px;

}

once you've linked to the "style.css" stylesheet in your html file, you can then add that class selector to your text element like this:

<p class="text">let's make this pretty!</p>

which will then result in:

let's make this pretty!

pretty simple, right?

i'll spare you the full details here because you don't actually need to understand stylesheets at all for dreamwidth. it's just good to have a basic understanding of how code is put together for a real webpage so you can see what you're playing around with for basic html and inline css.


🍊

Basic HTML

💡 if you're already familiar with html and only want to learn about inline css, you can skip on ahead to the next section. otherwise, this will walk you through what html tags are and how to use them, as well as which ones are useful for dw. buckle up!

time for the basics. note that you can totally use html without any inline css at all: styling just helps you do and show more, but basic html on itself is already super useful and pretty painless. all you have to do is choose your element, choose what you want to do with your html, and enclose that element in both a starting tag and a closing tag.

Anatomy of a tag

<b>content here</b>
the above example is how you make text bold, just like this.

as you can see, the syntax is very simple: you always create the starting tag with two angled brackets, put your content after it, and then mark the end with a closing tag. the closing tag is also always preceded by a slash!

💡 there are some exceptions to this rule that are called void elements, such as <img />, <hr/>, and <br/> (the slash here is also optional in the current version of html), but i'll walk you through them in a second.

THE IDEA OF NESTING

another thing that's important to understand with html tags is that you can nest them between each other. think of it hierarchically: the first tag you open will be the parent tag, and tags stuck in between the starting and closing tags can act upon child elements. take these examples:

ONE
<b><u>this whole line is bolded and underlined.</u></b>

TWO
<b>this whole line is bolded, <u>but only this part is underlined!</u></b>

which creates this:

ONE
this whole line is bolded and underlined.

TWO
this whole line is bolded, but only this part is underlined!
you see how the tags go between each other? in the first example, you could put either the bold or underline tag on the outside, since they affect the same content anyway. in the second example, you only want the underline tags to affect that child element, so they're nested inside the bold tags.

to avoid messing up your code, you should always be sure you've nested your tags in the proper order—sometimes it won't really make a difference, and sometimes it can completely mess up the structure of your post. make sure the latest tag "opened" is the first one to close, like this:

✅ <p><strong>proper tag nesting :D</strong></p>

❌ <p><strong>improper tag nesting D:</p></strong>

once you have this concept down, you can easily start making more complex and structured things; just get comfortable with thinking of your code hierarchically, as well as visualizing a page or a design as just a series of blocks within other blocks, basically.

now let's get into some handy-dandy html tags that might be useful to you. you can 100% style your content, such as make elements small, bold, big, italic, etc., without touching inline css at all!

USEFUL TAGS

TIER I. GRAB-AND-GO

<b> and <strong>

makes text appear bold (or indicates importance).

<i> and <em>

makes text appear italicized (or indicates emphasis).

<u>

makes text appear underlined.

<s> and <del>

makes text appear strikethroughed (semantically, s is for text revisions and del is for actual element removals).

<small> and <big>

makes text small and big.

<blockquote>

defines a quote; if you have a journal theme for your posts, you can fiddle around with how blockquotes are displayed in the custom css. however, dreamwidth also has a default blockquote ui on the site skin.

<h1> to <h6>

these are tags that define headers in your documents, with h1 being the most important to h6 being the least. it's better to use these to actually divide sections while keeping the rule of importance in mind, but they also have built-in aesthetic elements.

<center>

you guessed it—centers an element!

<br/>

creates a line break. HOWEVER, you don't need to use this in dreamwidth if you have auto-formatting on since dreamwidth will automatically convert your empty space. in fact it often aggressively introduces line breaks in your posts, so you might have to put html blocks right next to each other (without any breaks) to get your desired spacing. see here to read more about how auto-formatting works. basically this tag is useful if you want to code with <raw-code> to help format your code.

<hr/>

creates a break in the page, as shown below (this can then be styled with css):

---

(note that <br> and <hr> are two of the void elements that don't take any content, don't require a closing tag, and basically exist on their own.)

TIER II. SOME ASSEMBLY REQUIRED

<img src="URL" />

<img src="URL" width="500" />

embeds an image (JPEG, PNG, GIF, etc.). like <hr/>, this is a void element without a closing tag. you have to put a working URL directly into the quotes for an image to display—just remember the src path and you're good to go, although you can also specify the image's width or height as in the 2nd example (this attribute is automatically in pixels, or px)!

<a href="URL">[link text or element]</a>

<a name="name">[optional anchor]</a>

<a href="#name">[link to anchor]<a>

creates a link to a provided URL. href comes from "hypertext reference," which you don't really need to get; just remember the letters HREF. you want to create a link? A HREF. that's it! you can make a traditional text link like this, but you can also turn an image or an entire <div> block (see TIER III) into a link!

you can also create "anchor points" in your dw post by using the name attribute, either without any content within the <a> tags (an invisible anchor) or with link content (an explicit anchor). for example, if you declared an anchor point's name as "name," you could then link to it someplace else by using replacing "URL" with "#name," and clicking on it would jump to that spot without refreshing your page. pretty neat what simple html can do!

<ul> / <ol> and <li>

creates a list. this is a great example of tag nesting! <ul> opens an unordered (bulleted) list, while <ol> opens an ordered (numbered) list. INSIDE the opening and ending tag, each list item is then represented with <li>. you can also put another <ul> inside a <ul> to make a nested list.

take:

<raw-code>
<ul><li>here's a small example</li>
<ul><li>this one is nested</li></ul>
<li>this one isn't</li></ul>
</raw-code>

which makes:

• here's a small example
• this one is nested
• this one isn't

<details> and <summary>

creates a sort of drop-down menu that automatically shows the content inside the <summary> tag, which is placed inside <details>. when you click on the visible element, it will then reveal the rest of the content in your <details>. this is one of the few html features that have built-in functionality.

take:

<details><summary>click on me!</summary>
this content was previously hidden.</details>

which makes:

click on me!

this content was previously hidden.

details and summary can also be pretty extensively stylized; that's what the prereading section at the beginning of this post is!


TIER III. WHEN YOU ACTUALLY WANT TO MAKE SHIT

<div>

basically the most important concept when you start using inline css, this defines a block of content. you want to make a box with a grey background that has centered text inside of it? you can define a <div> with those attributes with inline css and then throw the text within those tags. you can nest a <div> within a <div>, and it can also span multiple paragraphs and line breaks.

<span>

this is like a <div> in that it defines an element that can be styled with css, but <span> is only INLINE. this is what you use to change the styling of just one line or a small element. you can set the spacing of a span horizontally but not vertically, and you can put a <span> in a <div> but not vice versa.

<p>

this is a block element just like a <div>, but it's specifically used to define a block of text—aka a paragraph. a <div> can contain a <p> but a <p> cannot contain a <div>. also note that dreamwidth's html editor is automatically creating paragraphs for you when you make a line break here, even if you don't see the <p> tags.

while i haven't shown you the css yet, applying a border-bottom to a div and span shows you the difference quite cleanly.

DIV

this whole line block is underlined.

SPAN
only the text specified is underlined.

if you can get the hang of this, then you can start using inline css right away!

final note: this website is already linked in the prereading, but remember that you can read documentation on any html tag at w3schools, which also has additional demos and exercises to walk you through syntax. additionally, you can access its tags reference page here.

if you've never looked at html in your entire life, then coding in pure html may seem a little daunting, but you'll soon realize that html tags are extremely intuitively named. just remember that a lot of work has been put into making html an accessible language and that it is constantly being improved on and everything you see here is made to be learned and digested, and that with practice you can understand anything. also nothing actually needs to be memorized because you can always google whatever you forget ^^


🍓

Inline CSS

all right, you might be asking—what's all of this inline css fuss then? what this basically means is that instead of making a separate css file to link in your html file, you can just write css directly into your html editor, right here on dreamwidth!

it's important to note that inline css has its limitations. in external css, you can style interactions with elements (e.g. how a link looks when you hover over it), and you can also apply the same class declaration to several elements, so you don't have to write your code over and over again. however, with inline css you only style individual elements, which makes it impossible to cut out that redundancy. this means that 1) your code might look kind of horrifying if you make something complicated (although this can sometimes be helped by using <raw-code>), and 2) you'll be limited to static and non-responsive styling (unless you style an html element that has responsivity built-in, like <details> and <summary>).

(reminder that you CAN use external css to change the way element tags display on your journal layout in the custom css section (or even create new inline classes); for example, i have code that tweaks the styling of my blockquotes and lists so that i don't have to fix them every time in my posts. but also remember that specific style changes to your layout won't carry over to the default site skin if someone decides to read your post there, so if you want something to present the same at a granular level then you need to define everything in your post itself.

i personally will switch to default site skin if i find someone's text too small or hard to read, so i like to write inline css that translates over to any site skin. however, if you don't care about how your posts look and want to streamline your coding process as much as possible for just your layout, feel free to tweak things with custom [aka external] css.)

this disclaimer aside, inline css is still powerful! here's how it works.

DEMO

💻 let's say you want to change the color of your span text. all you have to do is add style=" " inside your opening tag and populate it with your css code. like this:

<span style="color: blue;">this text will now be blue!</span>

which results in:

this text will now be blue!

note that every declaration follows this format:

PROPERTY: VALUE;

which might look familiar with the code block in the first demo. this is because you're basically just writing that whole thing in the curly braces out, but without any line breaks. so you could just stack, say, three different css declarations at once in one style, like this:

<span style="color: blue; text-decoration: underline; font-size: 20px;">this text will now be blue, underlined, and big!</span>

which results in:

this text will now be blue, underlined, and big!

that's really all you need to remember!!! just style="" inside a tag to start styling, and then any number of values all separated by a semi-colon.

it might look daunting when you see all the code at once, but the parts are pretty intuitive step-by-step, right?

the fun part: you can add a style to any html element. div, span, details, summary, b, ul, li—whatever you want. it basically just singles out an element and then changes something about it specifically. if you get that, then let's take a look at some important css properties!

💡 COLOR IN CSS
note that it's common to use hex color codes (# followed by 6 characters) for most css properties. when you define a color value, you can use built-in colors like "red," "blue," "green," etc., but those shades are generally limited or like... kind of ugly. you can google "color picker" and use that to select a hex color value.

color
sets text color using hex value or color name. hex values are not case-sensitive (actually, nothing in css is).

color: #CF5D5D;
color: red;

font-family
sets font. since not all fonts are supported on all browsers, you can name several fonts, all separated by a comma, to denote cascading order of priority. adding a generic family name like sans-serif or serif at the end is also a foolproof way of getting it to pick the general style you want to have. any multi-word font name must be presented in quotes, like this:

font-family: 'Times New Roman', Garamond, serif;

text-align
use this on a div: this sets whether text is aligned left, center, right, or justified inside a div block.

text-align: center;

background-color
same syntax as color, except this sets the background color (fill) of an element. note that the background color of an element is automatically transparent, which means that it will assume the color of its parent's or the entire page's background before you set it.

box-shadow
i have to admit that i always forget how to use this so i'd just keep this copy-pasted somewhere, but this is the syntax i use for a box-shadow:

(offset-x | offset-y | blur-radius | color)
box-shadow: 0px 0px 5px rgba(R, G, B, 0.1);

it's a bit much to look at at first, but you can play around with these values easily. the one annoying part is that it uses RGB instead of hex for the color, but you can enter a hex value in the google color picker and then copy whatever RGB value is displayed. the "0.1" can be replaced by how transparent you want your shadow to be, from 0.0 (transparent) to 1.0 (opaque). note that you can also stack box shadows on top of each other by separating them in the same declaration with a comma.

border
sets a border, with styles such as solid, dashed, and dotted. you can also use BORDER-LEFT, BORDER-RIGHT, BORDER-TOP, and BORDER-BOTTOM to specify only one side.

(width | style | color)
border: 1px solid #CF5D5D;
border-left: 2px dotted black;

border-radius
sets corner rounding. you can play around with this number, but i generally use between 5-10px for slight rounding and 50px for fully-rounded corners. don't use percentages because you'll get fucked up looking ovals!

border-radius: 10px;

min-width / width / max-width
what it says on the tin, but a really powerful property for your divs. if you don't want something to stretch when you resize your browser and take up your entire screen, you can set the max-width property; if you don't want something to be super squished, you can set min-width. with px, these are responsive properties (i.e. the width can change until those values), while width just defines a static width for your element. however width also becomes responsive when you use %, since the percentage is based off its parent element. since you can use both % and px for your values, you might even end up using all of these properties at the same time. the same rules apply for height.

width: 50%;
min-width: 300px;

for example, this would set the width of a div to 50% of its parent element (or the page). however, if that parent is responsive to the page being resized, then this width could then become huge or tiny very quickly, right? therefore min-width will ensure that the div is always at least 300px, regardless of the 50% constraint.

overflow
overflow has a lot of subtle purposes, but generally it's useful for restraining anything that goes out of the bonds of a div. pretend you have a box with the max-height set to 200px, and then a huge block of text that expands way beyond it. if you use overflow: hidden, then the text will simply cut off at 200px. if you use overflow: scroll, then it'll make a scrollable text box that allows you to read through the entire block of text.

overflow: hidden;
overflow: scroll;

this is a bit of a random distinction, but if you have a div with rounded corners and then other divs inside it, you might notice that your border-radius property isn't doing anything because of the child content. you can set overflow: hidden; in the parent div to make it work properly!

margin vs. padding
margin and padding both define whitespace in css, but the way they work is subtly different; it's a simple distinction but a HUGE part of designing elements properly.

think of margin as OUTSIDE SPACE: if you have a box with a 20px margin, a different box will now be moved 20px away from it.

think of padding as INSIDE SPACE. if you have a box with 20px padding and then text inside, there will be 20px whitespace between the edge of the box and the text inside.

here's an example to properly visualize it:

margin-right: 20px;

main elementanother element

padding-right: 20px;

main element

margin and padding can also be defined all at once with a one-line catchall. by this i mean that you can write them as:

(all 4 sides are 20px)
margin: 20px;

or:

(vertical is 10px | horizontal is 20px)
margin: 10px 20px;
(use this if you want to horizontally center your div inside its parent element)
margin: 0 auto;

or:

(top is 10px | horizontal is 20px | bottom is 5px)
margin: 10px 20px 5px;

or:

(top is 10px | right is 20px | bottom is 5px | left is 0px)
margin: 10px 20px 5px 0px;

which is kind of a LOT. this is useful when you want to define a lot of little finicky margins, but don't worry if you can't remember the order. you can just look it up, OR define, say, margin-left and margin-right individually in the same style tag. different approaches can still bring the same result!

DEMO

💻 another great example to show is indented blockquote-esque text, which combines a border WITH a margin WITH padding.

first we add border-left:

<div style="border-left: 3px solid #CF5D5D;">example text with border</div>

example text with border

but this looks terrible because the border is flush to the text, so you add a padding-left to create spacing between the text and the border:

<div style="border-left: 3px solid #CF5D5D; padding-left: 10px;">example text with border and padding</div>

example text with border and padding

and then, finally, you can also add a margin-left to move the entire block further into the page:

<div style="border-left: 3px solid #CF5D5D; padding-left: 10px; margin-left: 15px; ">example text with border and padding and a margin</div>

example text with border and padding and a margin

we can now easily visualize the difference between padding and margin, as well as how properties like border are automatically flush against content until you define a whitespace for it.

i've tried to define the most important css properties that i regularly use, but you can once again look at external resources and read up on how to use these properties more thoroughly, or how to use a myriad of other properties i haven't mentioned at all! this is truly only the tip of the iceberg of what is offered.


🍇

Examples

i think i've gone over a fair amount of demos, but here are some more simple things you can make:

highlight text

a highlight

<span style="background-color: #ffe84a; padding: 5px; font-size: 15px; margin: auto 2px;">a highlight</span>

text with a half-underline

underline effect

<span style="font-weight: 600; color: #222; font-size: 18px; background: linear-gradient(to top, gold 40%, transparent 40%);">underline effect</span>

this green check mark box from earlier

✅ remember me?

<div style="background-color: #ddf5d7; padding: 10px; border: 1px solid #30801d; text-align: center;"><span style="float: left;">✅</span> remember me?</div>

a box with a soft drop shadow

hi!

<div style="border-radius: 5px; text-align: center; background-color: white; padding: 20px; color: #0d2ce4; margin: 0 auto; max-width: 80px; box-shadow: 0px 0px 2px rgba(13, 44, 228, 0.3), 0px 4px 20px rgba(13, 44, 228, 0.1); font-family: Georgia; font-size: 15px;">hi!</div>

a box with a solid drop shadow

hi!

<div style="text-align: center; background-color: white; padding: 20px; border: 2px solid #0d2ce4; color: #0d2ce4; margin: 0 auto; max-width: 80px; box-shadow: 8px 8px 0px rgba(13, 44, 228, 1); font-family: Georgia; font-size: 15px;">hi!</div>

a scrollable box with a solid drop shadow
text courtesy of ao3 user kurusui's false advertising

Outside the sun is rising. When Ryujin gets back in, Chaeryeong is sitting on the balcony, a shawl wrapped around her shoulders. She left the glass door cracked open, and Ryujin pulls it back so she can join her, slowly so Chaeryeong doesn’t startle. “I was wondering where you were,” Chaeryeong says, turning to look at her. She looks well-rested.

“I tried to be quiet,” Ryujin says. Chaeryeong nods.

“I didn’t wake up because of you.”

Ryujin places a crinkly plastic bag of blood oranges on the round table. “They’re fresh,” she says. “I tried one from the vendor. Breakfast is coming soon,” she adds, looking at Chaeryeong’s phone in front of her, “but I thought I would take a walk anyway.”

Chaeryeong pushes the other chair out with the toe of her slipper, and it scrapes against the concrete floor. “Please join me,” she says. Ryujin slices an orange roughly for her with a plastic knife and the deep pink of its flesh is sweet against her lips. The skyline they look out on burns red, yellow, bright blue.

<div style="background-color: white; padding: 16px 20px; border: 3px solid #0d2ce4; color: #0d2ce4; margin: 20px auto 30px; max-width: 450px; box-shadow: 15px 15px 0px rgba(13, 44, 228, 1); font-family: Georgia; overflow: scroll; max-height: 200px; font-size: 15px;">[CONTENT]<div>

some other stuff
honestly you can mock up pretty much whatever you want with inline css. like a (janky-looking) tweet (sorry for my limited skills and laziness):

TOMORROW X TOGETHER @TXT_members ∙ Apr 14

모아깅들 저의 첫 커버곡!!! 많은 관심 부탁드립니당♡♡♡♡

youtu.be/DOxLgW2dJAs

#TOMORROW_X_TOGETHER
#휴닝카이 #HUENINGKAI

HUENINGKAI's Youngblood (Original Song: 5 ...

HUENINGKAI's Youngblood - TXT (투모로우바이투게더) (Original Song: 5 Seconds Of Summer - ...

🔗 youtube.com

TOMORROW X TOGETHER @TXT_members ∙ Apr 14

모아깅들 저의 첫 커버곡!!! 많은 관심 부탁드립니당♡♡♡♡

youtu.be/DOxLgW2dJAs

#TOMORROW_X_TOGETHER
#휴닝카이 #HUENINGKAI

HUENINGKAI's Youngblood (Original Song: 5 ...

HUENINGKAI's Youngblood - TXT (투모로우바이투게더) (Original Song: 5 Seconds Of Summer - ...

🔗 youtube.com

(honestly speaking there is zero point in trying to make complicated css for your fic on dreamwidth and if you want to have social media elements then just post it on ao3 with a workskin, because that allows external css. but like. you can do it i guess ❤️)

or a listography list:

k-pop (favorites) ¬

♥

• (txt)　 —　 soobin, hueningkai

✦

• (crvt)　 —　 seongmin, jungmo
• (enha)　 —　 sunoo, sunghoon
• (cix) 　—　 yonghee, jinyoung
• (ab6ix)　 —　 woong, daehwi
• (drippin)　 —　 hyeop, minseo
• (golcha)　 —　 jangjun, joochan

+

• asmrdols (and more)

sep 20 2016 ∞
apr 14 2021 +

or this color palette:

#4B7A6D#D9EDE6

#7C9549#E6EDD7

#CCAC38#F3EDD5

#CB7B4D#F4E2D6

#CF5D5D#F2DCD9

or a profile car(r)d:

dw user
GIRLROCK

haunts

CARRD
LSTOGRAPHY
AO3

making this shitty card div at a questionable hour for a tragically niche media post on my dreamwidth blog like a loser

well, that's all i've got! SHOULD you be making all of the examples i just showed you? probably not. inline css is not perfect and it's so tedious and generally unnecessary that you basically never use it to make actual webpages. BUT it's what we're given in the dreamwidth editor, and you can still do plenty of simple but pretty things with it despite its limitations, and i personally find it fun!

if you read through this then i hope my explanations have been helpful in literally any way; once again, if you have any questions or want to discuss something then feel free to comment or pm me n__n also i'm just 1) one guy and 2) not an expert at anything and i only know as much as i've learned, which means that this is obviously only meant to be a starting point and that you will learn the most by trying things yourself/reading docs online. sorry for anything that might be lacking or inadequate, but thanks for reading! 💜

Comments

AHHHHH IT'S FINALLY HERE!!!

[lapiscave]

literally like 2 days ago I went to double check if you ever made the dreamwidth html/css post bc i forgot everything I learned this semester and then i had to resign to googling "dreamwidth html". again i knew most of these concepts but it feels like i have relearned all of them in 10 minutes reading this and I will definitely be returning to this post as it is 1) so nice to have all these important things condensed in one place and 2) 1000x prettier than dreamwidth's page about html tags and whatever is scattered about on w3schools!!!!

thank u for making this i love the examples also the blockquote example kind of blew my mind because i never thought about how to make that from scratch before. well even with all of this information i could not make such pretty things as u have here without immense struggling ur inherent design sense never fails to amaze

Re: AHHHHH IT'S FINALLY HERE!!!

[girlrock]

thank you so much for enjoying this!! glad you felt like you could relearn some concepts LOL because idk i was like "how useful will this even be..." but i'm glad it reached a few people! and yeah i remember when i first started using dreamwidth i was like "hm i don't really like my blockquote style with this theme" and then i was like WAIT I CAN JUST CHANGE IT.... truly amazing what we can do for ourselves <3 also don't sell yourself short i think your design sense can definitely do all of this and MORE

[permutative]

this is actually a masterpiece and i was just scrolling thru this looking like pikachu_face the entire time. anyways im going to start using glowy boxes randomly in my dreamwidth posts for NO REASON... this is so beautiful / helpful / informative / clearly communicated and organized...... IM IN AWE ACTUALLY TTTTTTT i will never shut up about this. I've been anticipating this since like... idk January? december? AND I CANT BELIEVE ITS FINALLY HERE!!!!!!!!!!!!!!! <3

[hyojungss]

the way i was literally hoping you specifically would make a tweet about this post so i could rt it. thank you for your service <3

[girlrock]

thank you twitter user storyboxed for facilitating the dissemination of my dreamwidth content 😩

[girlrock]

I KNOW YOU'RE JOKING BUT I WANT TO SEE RIDICULOUS EARLY-WEB GLOWY BOX DESIGNS FOR REAL!! but seriously thanks for anticipating this at all and cheering me on because otherwise idt i would have just completely overhauled my old post and made something almost-structured like this T___T <3 hope it helps going forward even a little bit hehe

[hyojungss]

queen of graphic design. i'm really impressed by how many different tools you've figured out how to use and that you're very good at communicating clearly to others! like the amount of detail you put into the listography and twt replications? when you get paid to write a resource book <3

the rounded corner look is especially nice i think and i never knew how to do that, so will look for the opportunity 2 try it out

honored to be featured on this page ♡

[girlrock]

not GRAPHIC DESIGN that is simply not my passion. glad you thought the concepts were communicated adequately though!! so excited to see what posts you have hidden at the moment T___T <3 also listography is such a shit and basic website that took like 5 minutes to make. HSFDLKHDFLH

and ofc i'm a big ao3 user kurusui fan <3

[stoplight]

wow this post is just so good! never have i ever wanted to waste even more time on formatting my silly little dreamwidth posts...

but in all seriousness the effort put into this post is so evident and it's super helpful! all the html/css stuff i know is just from a lot of trial and error when i was on tumblr way back in the day so i never formally learned anything, and seeing everything i could ever want to know written up so nicely is just so... well, nice!

thank you for writing this up <333

[girlrock]

i'm glad you thought this was well-written!!! ALSO I KNOW T___T so excited to see anything you make though because i think the joys of formatting dw posts are unspeakable... the perfect time sink actually.

and i'm the same with html/css but i think that's really the way to go... of course it's nice to read guides and docs online to have a more thorough understanding of the material but trial and error will bring you the rest of the way! anyway thanks for reading and hope it helps even a little bit n___n <33

[onceand_forall]

I DO IN FACT THINK THAT YOU ARE DOING GOD'S WORK!!!! Bless you for this you have no idea how happy this whole things makes me. You explain things so flawlessly and I'm so excited for my exams to be over so I can plug these into all the fics I will ever write.

Bless you.

[girlrock]

THANK YOU ONCE T___T <3 <3 <3 once again if you'd like me to make any specific ao3 skins LMK but i'm also so excited to see anything you come up with and i hope this post can help toward that n___n and of course good luck with exams queen <3

[ka9eyama]

this is amazing.. you are amazing.... i've been wanting to get into coding(?) and you made it so pretty and easy to understand <3 love u and miss u !!

[girlrock]

i love u and miss u too!!! T__T HOPE UR DOING WELL! also yeahhh literally anything is coding truly so this 100% counts... hope this is helpful in some way and you can use some of the tips for future posts ??? excited to see whatever content you put out! :DD

[presumenothing]

just wanted to say thanks for this post! especially the examples – i've learnt enough html/css for simpler tumblr themes but trying to translate that into inline was throwing me for a loop. may have ended up spending waaaay too long trying to beautify this bingo card but 10/10 worth it

[girlrock]

ahhh hello! i'm glad the examples were helpful and i'm happy to be of service :') LOL i totally agree that switching from tumblr coding to inline can be confusing (mostly because inline is so awful...) but it's great to see that your efforts paid off for this beautiful bingo card <3

[marigoldlife]

hello um a twit mutual recommended that i read this and omg this is so helpful and exhaustive!! i've just started dipping my toes into dw formatting and i can't thank you enough for this primer. it's so well-explained!!! thank you so much <3

[bluedreaming]

This is so fabulous! I’ve been posting more on dw lately and experimenting with things but dw doesn’t behave like Ao3 so this is such a marvel. Thanks for sharing it!

[arslan_baby]

This is so helpful. Thanks for writing it! I imagine it must've taken a lot of time, but this guide is so beginner-friendly and extensive, it's my go-to when I need to brush up on long-forgotten knowledge again.

[solavi]

this is literally the dreamland's democracy of knowledge and education or something... just very well-explained/concise and it's such an aesthetically pleasing guide LOL dicking around html seems complicated but so interesting... will be looking into translating sparkly text gifs into this.... thank U for the referral K 😁😁

[seamade]

you're a literal angel sent from above omg. i haven't rp'd on dreamwidth for quite some time due to in_real_life_events.gif and i had forgotten how to html for my replies & the like and this was extremely resourceful and informative. i hope you find a benjamin in your pocket.

your css/html guide !!

[ngtskynebula]

god is in the little things (lurking deep enough into dw until i find a guide as incredible and complete as yours)

[coeurinterdit]

Girl, thank you for this!!! the link name thing is such a great alternative to uri fragments, bless your kindness

[tropicsbear]

Thanks so much for sharing this! This is really in depth and helpful.

[sickandgloomy]

this is so incredibly helpful, thank you so much for posting! going straight into my bookmarks for sure.

[coinrocker]

Thank you for this tutorial! I just joined Dreamwidth and while I'm not all too familiar with CSS, I just realized there's a lot I forgot about HTML, so this really helped. :)

[metztli]

Thank you so very much for this guide! It's extremely detailed, helpful, and easy on the eyes (*ˊᗜˋ*)

A lot of what I know is basic html/css from Tumblr (but it's been about a decade, yikes), so it's amazing to see the extent of inline css as you've shown us! Having examples is greatly appreciated, as even basic coding is.... often hard to envision OTL

Once again, thank you very much for writing up such an amazing guide and sharing it!!

[sewn]

Thank you for sharing knowledge in such a helpful, clear, PRETTY way!