Archive of Our Own ^beta

Chapter Text

This chapter is all about getting images to fit on the screen!

I'm going to start from a large image I found on Deviant art of a cute cat. Note that the first image is ridiculously huge!

*Also note my CSS style sheet won't be exactly the same as the example I'm giving you or else both pictures would be formatted*

Bad formatting (default):

This doesn't fit on the screen well and will torture mobile and pc users alike! (Unless they have a huge monitor)

Now, we're going to add some simple formatting to our story or site style CSS:

img {
max-width: 100%;
height: auto;
}

Good formatting (our fix):

And now the picture fits perfectly!

Note that images smaller than the screen will stay the same size, which is why you can just use the generic 'img' tag for formatting instead needing to use classes.

As an example:

This image is using our 'formatting' but isn't too large.

Chapter Text

So sometimes you want a specific font - which is fine - but you're not sure how to make it happen! Changing font in general isn't really what this tutorial is about though. Sometimes you only want a line or a paragraph of a different font. For this I'm going to use classes. A basic way to describe this is I tell an HTML element that it's part of a class and then tell CSS to format everything with that class on it. So, if I add a class that is called "Gray_Paragraph" to some html tags, then tell CSS to color everything with the "Gray_Paragraph" class gray, then everything tagged with that will be colored gray unless it has more important formatting overriding it because of a different tag/class or another formatting rule you've added that's deemed more important.

For those who are nodding their heads and getting this, you can go to the example. For those who are still confused, I'll try to relate it to a real world example:

Say you go to a grocery store. Each item in the grocery store is an HTML element. Classes are the type of item. So, say, milk might have the classes 'dairy' and more specifically 'milk'. Lets say you're eyeing a sale on meat. The ad says that meat is on sale - except for the ribeye steak. So, anything that has a class of 'meat' is on sale, but if the meat has the class 'ribeye-steak' (more important) it is NOT on sale. Similarly, if you try to format all text to be red, but the class "Gray_Paragraph" is more important, the gray will override the red. For the example then, Red = "Meat" and Gray = "Ribeye Steak". All the text (meat) is red (on sale) except for the specific text (ribeye steak) that we want to be gray (not on sale).

Not sure if that example helped, but I hope it did!

So now I'm gonna get down to the nitty gritty of how to change the font style of the text.

We start by finding the text we want to be a certain font. AO3 has probably put <p> tags around it already like so:

<p>Test Text</p>

Now, we're going to add a custom class. I'm going to call it "Wingdings" because I want it to be the wingdings font, but you can call it whatever you need to.
NOTE: AO3 seems to only be okay with class names starting with a capital letter. Keep that in mind as you name a class.

So, we're gonna set it up like this in the story:

<p class="Wingdings">Test Text</p>

The class="class_name" addition in the tag needs to be put in every instance where you want the font to be that specific one. Alternatively, if you want a big block of text to be the same font, surround the entire block of text with a new set of <p> tags that have that class specified in the same way as above.

Now, we need to add the formatting to the CSS sheet:

.Wingdings{
font-family:wingdings;
}

Explanation:
- The "." before "Wingdings" indicates that this is a style for a class and "Windings" afterwards (NO space between!) says that we are styling anything of that particular class.
- The brackets ({}) are for keeping styling in scope. We only want to style that particular class! This also allow you to add multiple lines of styling (such as color, text size, etc).
- font-family:wingdings is a key-value pair. We're telling it that out of many font-families, we want to change this class's font-family to be wingdings.
- The semicolon tells the web browser that we are finished with the line.

And that should do it!

Examples:

Unstyled (no class added):

Test Text

Styled (class added):

Test Text