When you are first beginning CSS, it can be challenging to know how to navigate the intricacies of this programming language. TKD Design is back with more beginner tips for making the most of CSS!
CSS Tip 1: Absolute Positioning
Absolute positioning entails having control of every version of an element, wherever it appears on your website. You can use top, right, left, and bottom accompanied by a pixel value to control where an element stays, no matter what page or post it is on.
CSS Tip 2: Overriding All Styles
If you find yourself wanting to override a specific CSS style with another element, you can use an override all styles command. Note that this should be used sparingly, as if you do this continually, it will mess up your coding in the long run. Overriding all styles is super easy to do, as all you have to do is add !important at the end of your code. Say you want the headers in a specific section of your page to be red instead of global blue. You could use this command:
.section h2 { color: red !important; }
CSS Tip 3: Centering
Centering can sometimes be a bit tricky for beginners with CSS because it depends on what element you are trying to center. There are different ways to center, depending on which element you are dealing with, whether it be text or content.
- Text: You can easily center text by using the text – align ; center command. If you want to align said text to either side, you can use right or left instead of center.
- Content: A content block, or any other element, can be centered by adding the block property and then incorporating auto margins. Here is a sample CSS command:
#div1 {
display: block; margin: auto; width:anything under 100%
}
You can add anything under 100% to make sure all your blocks get centered correctly (it is under 100% because if an element has 100% width, it would not need centering).
CSS TIP 4: Vertical Alignment
This is an essential piece of beginner knowledge, and we can almost guarantee that you will need to use this command at some point. One of the keys to making any page look presentable is to make sure the height of the menu and the line-height of the text are the same. Here’s an example of a command you could use to achieve this:
.nav li {
line-height: 50px; height: 50px; }
CSS Tip 5: Hover Effect
This is used for text links, buttons, and block sections of your site and its icons. If you want something to change colors, or maybe even gradients, when someone hovers their mouse over it, use the same CSS, but add :hover to it. Here is an example of code you could use for a hover effect:
.entry h2 {
font-size: 36px;
color: #000;
font-weight: 800
.entry h2: hover {
color: #f00;
}
This changes the color of your h2 tag from black to red when a cursor hovers over it. The cool thing about using :hover is that you don’t have to specify the font-size or weight again if you are not changing it. It only changes what you define.
CSS Tip 6: Link States
The :link pseudo-class allows you to control all the links that haven’t been clicked on by users yet. The :visited pseudo class takes care of the styling of all of the links you’ve already clicked on. This allows you to let website visitors know where they have already been on your site, and where they have yet to explore.
CSS Tip 7: Easily Resize Images to Fit
Resizing images can be time-consuming and annoying, so it will be nice to have an on-hand command to resize images easily. Sometimes you need images to fit a certain width while scaling proportionally. The best way to do this is to use max-width to take care of this. Here is an example:
.img {
max-width: 100%; height: auto; }
This means that the largest the image could be is 100%. The height is automatically calculated based on the image width you specify.
CSS Tip 8: Control the Elements of a Section
Using the image example above, if you wish only to target the images of a specific Divi section, use a class for the section, and combine it with the actual selector. This enables you to select only the images of the section you want, and not other elements, such as your logo, additional images, media icons, or sidebar in any different sections of your site. Here’s how the CSS could look:
.blog img {
max-width 100%; height: auto; }
CSS Tip 9: Apply CSS to Multiple Classes/Sectors
Let’s say you wanted to add an identical border around all images. It can be time-consuming to put in all this code! You don’t have to write out the same exact command a million times. You can just list those items out, separated by commas. Here is an example:
.blog, img, .sidebar {
border: 1px solid #000;
}CSS Tip 10. Box – sizing : border – box ;
This is a fan favorite among many web designers because it takes care of both padding and layout issues. When you want to set a box to a specific width, and then add padding to it, the padding adds to the size of the box and decreases the size of the element. However, with box-sizing:border-box; this is overridden, and elements stay the size you would like them to be.
Whether you’ve been a web designer for years or brand new, learning valuable CSS skills can seem like a never-ending journey. Once you’ve narrowed down which programming languages you want to employ, you have to learn and refine your skills. This can be done by attending Divi Academy, or looking for guides full of little CSS tips- like this one! No matter what languages you decide to learn, CSS is one of those essential skills you will have to master. It doesn’t have to be so tricky, though, especially if you have a few handy CSS tips to get the job done.
When you are looking to start CSS Coding for your website, or would rather pass it off to someone else! Contact TKD Design!
