Cascading Style Sheets (CSS) are used to describe to a web browser how to display HTML elements. CSS is often saved in .css files but it can also be embedded directly in HTML files.
W3Schools is a great reference for CSS (link).
CSS syntax consists of rules defined by a selector and a declaration block.
For example:
body {
background-color: white;
}
body is the selector. It refers to the _selected__ HTML elements to style.{ } is the declaration block and contains a property followed by a value, separated by a :. Each property:value pair is ended with a ;Here are some common HTML elements that you’ll find in the web exported Ink game:
Some properties are used to style many different kinds of HTML elements:
You will need some sort of plain text editor to make changes to your CSS file. This can be something as simple as Notepad (PC) or TextEdit (Mac). However, I would recommend a programming editor like VS Code because it will make some basic tasks like selecting colors much more straightforward.
Once you start editing the style.css file, it is important that you do not choose to Export the project to Web. This will overwrite your style.css file! Use Export story.js only.
The CSS file which styles an web-based Ink game is style.css, which is located in the web export folder you create.
If we change the color property of .container you’ll notice that the background box is scaling to fit text but ignoring images. One option is to remove the color property, which will then just show the background of body instead.
.container
{
color: white;
}
Color properties for HTML elements can be specified by name from a small list of available color keywords or by providing a hexadecimal number representing the Red, Green, and Blue values (#RRGGBB or #RGB). More info here
Choose the HTML text element you want to change (h1, h2, p) and change the appropriate color property in its selector. For example:
p {
color: #888;
}
a {
color: blue;
}
Fonts on the web are a little confusing at first. When you specify a font by name, the person viewing the web page must have that font installed on their own device. Consequently, web designers often list several fonts in their CSS, in order of preference, separated by commas, such as:
body {
font-family: "Quattrocento", Georgia, 'Times New Roman', Times, serif;
}
Only non-standard fonts or fonts with special characters such as ! or $ need to be quoted. However, it’s also a recommendation for web designers to also use them around names containing spaces.
Generally speaking, these fonts are considered “web safe”:
This is obviously very limiting, but thankfully there are now options to link to web-based fonts provided by companies like Google or Adobe
An example of a web font provided by Google looks like this:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700|Quattrocento:700');
The @import rule should be at the top of your CSS file. Note: Google provides this between <style></style> tags. Do not include those tags in your CSS.
If you are running into issues with your game being cut off at the bottom of the web browser window, you can try removing the overflow:hidden property in the body selector.