basic styling
personalizing your profile
|
It's time to get writing! For the benefit of this guide, I have written up a minimal custom CSS template for anyone to work with. It contains empty blocks with only come of the selector names and proper CSS formatting included, so trying to apply it to your page now will result in no changes. You will have to add the changes yourself!
The template is free for both personal and commercial use. Because much of the effort and result of coding comes from your own hard work, you may use this template in your paid codes.
Click here for the template!
This link should lead you to a Pastebin page containing the text of the template. Scroll to the "RAW Paste Data" section and select everything in the textbox. Paste everything into a brand new plain text file, and start writing!
You might have noticed some statements interspersed throughout the code, each surrounded by /* and */. CSS coding allows for a neat trick called commenting where anything that goes in between those characters is treated as "invisible" and ignored by the code. While you edit the template you may delete these comment sections if you like; just make sure not to leave a spare /* or */ as that may damage your code.
Examine this snippet from the template:
body /* The HTML body of the page. */ {
/* CODE HERE */
}
|
The code will not attempt to do anything with the sentences "The HTML body of the page" or "CODE HERE" since they are surrounded with the correct commenting notation. Comments are very useful for leaving "notes to self" throughout code; in the template I mainly used them to describe which selector selects what. You can write anything in commentary, even a poem if you feel like it, and as such they are very versatile for your notational needs. I encourage beginners to take the time to write notes in their code, whether to signify some areas you're struggling with, or just to neatly section off the code into something even more readable.
|
|
To apply a full-sized background image to your profile, this is the appropriate code:
body {
background: url('coolimage.png');
background-size: cover !important;
}
|
This assumes you have the URL of the image you want at hand. Make sure that:
- The URL actually works; copy and paste the URL into your browser search bar and hit enter. If the resulting page is blank or an error, the link you possess may be faulty.
- The URL ends with .jpg, .png, or .gif, which are proper file formats for displayable images.
Looking for an image? Sites like Pixabay and Unsplash are best for finding high-quality free-to-use photos. To use them, however, you will need to download the image to your computer, and upload that image somewhere such as Imgur to obtain their appropriate image URLs.
|
|
colors, transparency, and gradients
|
You will mainly use the properties background and color to change the colors and transparency of various elements of the page. background affects the overall color of the element, while color affects the color of the text inside that element.
As you might have guessed, color is important to a design, and so it bears mentioning the three ways you can indicate a color in CSS: by hex code, by RGB code, and by name.
- A hex code is a collection of six characters after a hashtag, ex: #000000 for black and #FFFFFF for white. Each hexadecimal combination yields a unique color.
- An RGB code indicates color by calculating the amount of red, green, and blue in that color, as well as the color's transparency, ranging from 0 (transparent) to 1 (opaque), ex: rgb(0, 0, 0, 1) for opaque black and rgb(255, 255, 255, 1) for opaque white. While RGB looks more complicated, it has the advantage of creating semitransparent colors, ex: rgb(0, 0, 0, 0.5) for half-transparent black.
- Some colors can just be mentioned by name. For pure white or black, the terms white and black work just fine. These happen to be HTML color names. Other than for white and black, though, it's suggested you stick to codes for the most accuracy; they provide a far wider variety of colors to use - millions, really - whereas there are only 140 possible names.
- There is one other color, transparent. This is exclusive to the background property and erases the background of an element, leaving its inner content alone.
(You should never have to calculate the hex or RGB code of a color yourself as there are plenty of online tools for that - even searching up "color picker" on Google shows you an in-page color picker you can use right away.)
An example of color changing using background:
#sidebar .card {
background: #66ffff;
}
|
This changes the color of the "cards" in the sidebar to light blue.
An example of color changing using color:
This changes the page's link colors to light blue.
An example of transparency using background:
tr:nth-of-type(odd) {
background: transparent !important;
}
|
On the default profile page, the alternating table rows of your Pack information have opaque gray backgrounds. To erase their backgrounds, this code sets the background to transparent, so that the alternating table rows blend in with the table's background instead, if the table has one.
Gradients are exclusive to the background property. A gradient is a blend between two colors on opposite ends. I would be mindful and careful about using gradients since they can seem quite garish if used excessively, but regardless, here is an example of using gradient:
#sidebar .card {
background: linear-gradient(white, black);
}
|
This changes the color of the "cards" in the sidebar to a top-down gradient from white to black. Again, be mindful in color choices regarding gradients - this example isn't the most 'tasteful' to be honest, a gradient would work best with colors that are almost similar but not quite, to give an appropriate fading or shadowing effect. Much more information about gradients can be found here.
Looking for color inspiration? A useful site for colors would be the HTML Color Codes website (thanks to Bad Wolf for suggesting!), an all-in-one source for CSS color resources. The page hosts a color picker as well as color charts and information about color theory and palettes.
|
|
The font-family property dictates the font of the text inside an element. To apply one font to your entire page, this is the appropriate code:
body {
font-family: Arial;
}
|
There are two types of fonts to use in CSS, each with very different usage instructions: web-safe fonts and custom fonts.
Web-safe fonts are generic font families that many computers can render on their own. You may simply use the name of the font as a valid value. Examples include Arial, Courier New, Times New Roman, Georgia, and Verdana. You might want to look at the CSS Font Stack Collection, a collection of all known web-safe fonts, with previews and statistics on what computers can render which font.
By listing more than one font, you can create a font stack. The browser will accept the topmost font that it can render, so if one of your fonts are known to fail on certain computers, you may have a fallback so your page doesn't end up in the default Times New Roman. Simply list more than one font name in the font-family property, separated by commas like so:
body {
font-family: Gill Sans, Calibri, Arial;
}
|
The browser will first try to render Gill Sans. If it cannot, then the browser falls back onto Calibri. And if Calibri also fails, Arial is used as the final choice.
Custom fonts are different; if you want to be a little fancier, you may embed a font from an online font source. Here I will explain how to do this using Google Web Fonts, a real go-to for free online fonts.
 Visit the Google Fonts website and peruse the font selection for something you like. The search toolbar enables you to specify the look of the font you like; I would suggest sticking to Serif or Sans Serif fonts as the other three are very "fancy" and not conveniently readable.
 When you find a font you like, click on its card and you will be led to a page listing out the various styles of the font. Click on the "+ Select This Style" link at the far right of the style you prefer.
 A panel will fly out from the right. Click the "Embed" tab, and the "@import" subheader. The text between the style tags (beginning with the @ symbol and ending with the semicolon, please do not copy the style tags themselves) is what you will need to copy. Paste this at the very beginning of your code, above all other styles. From then on you may include the name of your custom font, surrounded by single quotations, within your CSS like so:
body {
font-family: 'Jost';
}
|
Again, use common sense in choosing a font. Don't greet viewers of your den with obnoxious or flowery fonts; keep it simple and clean, and most importantly, readable.
|
|
To apply a custom cursor to your profile, this is the appropriate code:
* {
cursor: url("image-here.gif"), default!important;
}
|
The cursor property, of course, changes your cursor to the image provided by the URL. This assumes you have the URL of the image you want at hand. As mentioned in the earlier background section, make sure the URL for the image is functional, otherwise your cursor may not show up at all.
Looking for cursors? Sites like cursors-4u and Zingerbug host free-to-use cursors and have options for CSS integration. The easiest way to obtain these cursor URLs is to right-click on a particular cursor image and select "Copy Image Address".
|
|
