What is this?
This blog post is the final part of my "CSS: A Beginner's Guide", and it's where all my miscellaneous tips and tricks can be found. These are presented in no particular order, and are just various things I've learned over the past few weeks that have improved my CSS game.
Layered Backgrounds
If you ever find yourself trying to have multiple images layered on top of each other, you may be immediately tempted to use something like the position: property. Instead, I would recommend trying background layering first.
In my first project, I found myself trying to impose our sites logo on top of another image:
To do that, we implemented background layering:
When trying to layer multiple background images, all you have to do is provide two values for every background property!
If you use this method, remember that the first value will always be the one on top of the others.
Z Index
Another way to do image stacking is by using the 'z-index:' property. This property tells your code which "layer" an element should be on. Unfortunately this property only works on elements affected by the 'position:' property, which in my experience can be difficult to work with.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Blend Modes / Filters
If you ever find yourself trying to alter an image as it is displayed on your page, then blend modes and filters are for you.
Using filters, you can change all kinds of things about your images: blur, grayscale, contrast, etc.
https://www.w3schools.com/cssref/css3_pr_filter.asp
Using blend modes, you can merge images, apply color filters, and more.
https://css-tricks.com/basics-css-blend-modes/
Active Buttons
If you want to make a button seem more active, then I highly recommend using the :hover and :active Selectors liberally. Having a button change to a darker hue while a cursor is over it, and then having an even darker hue when pressed, is a sure fire way to tell your users that something is happening when they use your site. Additionally, you can use the 'border-style:' property to have a button change from an outset border to an inset border while clicked. This gives the illusion of clicks actually pushing the button.
Visually unresponsive buttons are not just incredibly dissatisfying, but they can also make it seem like a site just isn't functioning properly.
Importing Fonts
While 'Arial' and 'Times New Roman' are great fonts for seeming professional, they are also incredibly visually boring, which makes importing fonts an excellent way to make your site stand out.
I personally recommend using https://www.cdnfonts.com/ when searching for good custom fonts. Not only do they have a massive free library, but they also will give you the exact code snippets you need to use when importing your font into your HTML, and how to call them in your CSS.
Changing your Website Icon
If you want to change the Icon on your page
You can do that by importing and setting the icon in your HTML like so:
There are plenty of free libraries for .ico files on the web, but if you can't find what you want, it's none too difficult to make your own. If I remember right, for my phase 2 project I just manually changed the file type of the image we wanted to use in VS Code.
Text Borders
Visually dense backgrounds can make text very hard to read. The best way to directly combat this is by adding a contrasting border to your text:
The code to apply this kind of property is simply:
-webkit-text-stroke: (Pixel Value) (Color);
While this can be hard to apply on small text, it is perfect for titles and headers.
Color Picking
If you are having difficulty finding the hex code or rgb values for the colors you want, then I would recommend just googling 'hex color picker'. Google has this tool built right into their search engine, and you can use it to quickly and easily find what you are looking for.
Additionally, you can use VS code to adjust your colors by simply clicking on the box that appears after writing a color:
The ensuing pop-up lets you adjust your colors on the fly!
Letter Spacing / Line Height
When using HTML header elements, you may realize that the text takes up a lot more space than it needs. If you want to get rid of this trait, or apply it elsewhere in your code, you can do that using the 'line-height:' property. This property can be used to adjust the amount of space a line of text will take up.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Also on the subject of text spacing, the 'letter-spacing:' property can be used to make the space between individual letters bigger or smaller. This property is particularly useful when using custom fonts.
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
rem
While learning CSS, you may start to notice people using things like 'rem' when declaring values instead of 'px' or '%'. Theres actually a whole slew of different measurements you can use in CSS, you can learn more here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#:~:text=To%20recap%2C%20the%20rem%20unit,does%20not%20keep%20getting%20larger.
These measurements won't always be useful, but some are. 'rem', for example, can be used to set the size of an object based on the parent container's font size.
Floats
Sometimes it can be difficult to make your elements go where they are supposed to. As a standard, all elements will try to hug the left side of your screen, which can prevent elements from lining up properly. If you want to change the base direction an element will try to go, you can do that using the "float:" property.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Padding vs Margins
Something that may prove useful while working on CSS, is understanding the difference between 'padding:' and 'margin:'. Padding changes how much space an element takes up, while margin creates an invisible space outside of your element. In most scenarios, these are essentially the same thing, but occasionally the distinction can be important.
White Space
The 'white-space:' property can be used to change how a text element collapses its text. This can be used to prevent your text box from cutting off lines or text or words.
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Opacity
If you want to make an element less visible, the best way to do this is using the 'opacity:' property. This can be used in a number of ways, but mainly it is used to make sure things like background images are still visible through your images.
Linear Gradient
Mostly, gradients are used to create colorful backgrounds that slowly transition between two or more colors, but if you get creative, then can be used to do amazing things. In my phase two project, I used a linear gradient to create a reusable line break element that looked like this:
I did this by making a horizontal gradient that shifted from having no color value, to white, to no color value again. Here is what that looked like:
Justify Content
The justify content tool is occasionally very useful in changing how items are aligned on the page. At times this tool can be used in place of something like 'text-align:'. Sadly, this tool tends to break in the presence of flex properties. Even so, I think it can be important to learn more about it.
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Top comments (1)
This is Awesome!! And so useful!