10 CSS Tricks Every Designer Should Know

In web development, you may know the ingredients - <span>, background-color, .heading-1 - but not everyone knows how to turn these ingredients into a beautiful, easy-to-use website. Designing a responsive website can be quite simple, but keeping all the elements looking aesthetically pleasing and well balanced at any screen size is an art that requires a deep knowledge of CSS. Whenever you design - give shape and structure to the content so that someone else can understand it. Let's learn how to use each of these web design ingredients with a developer mindset using CSS properties and guidelines to eliminate guesswork from web design.

In this article, we will discover some helpful CSS tips to help you make your responsive website look perfect on all devices. These simple aspects can be critical when it comes to responsiveness. But first, let’s discuss what CSS is.

 

What Is CSS?

CSS is a language for defining how documents are styled, arranged, etc.

A document is usually a text file structured using a markup language - HTML, but you can also come across other markup languages ​​such as SVG or XML.

Presenting a document to the user means transforming it into a form suitable for use by your audience. Browsers like Firefox or Chrome are designed to present documents visually on a computer screen, mobile phone, etc.


Benefits of CSS

• CSS saves time - you can write CSS once and then reuse the same sheet across multiple HTML pages. You can define a style for each HTML element and apply it to any number of web pages.

• Page loads faster - using CSS gives you the privilege to not write HTML tag attributes every time. Just write one CSS rule for a tag and apply it to all occurrences of that tag. Thus, less code means faster load times.

• CSS has a much broader set of attributes than HTML, so you can better view your HTML page versus HTML attributes.

• Multi-Device Compatibility - Style sheets allow content to be optimized for more than one type of device. Using the same HTML document, you can present different versions of your website for portable devices such as PDAs and cell phones, or for printing.

• Global Web Standards. It's a great idea to start using CSS on all HTML pages to make them compatible with future browsers.

 

Who Creates and Maintains the CSS?

The CSS working group creates documents called specifications. When a specification is discussed and formally ratified by W3C members, it becomes a recommendation.

These approved specifications are called guidelines because the W3C has no control over the actual implementation of the language. This software is created by independent companies and organizations.

NOTE. - The World Wide Web Consortium or W3C is a group that provides guidance on how the Internet works and how it should evolve.

 

CSS Versions

Cascading Style Sheets Level 1 (CSS1) left the W3C as a recommendation in December 1996. This version relates the CSS language and a simple visual formatting model for all HTML tags.

CSS2 became a W3C recommendation in May 1998 and is based on CSS1. This release adds support for media-specific style sheets, such as printers and sound devices, downloadable fonts, layouts, and tables.

 

10 CSS Tricks Every Designer Should Know

 

1. Absolute Positioning

If you want to always control the position of an element on our website, absolute positioning is the key. If you think of your browser as one big bounding rectangle, absolute positioning allows you to control exactly where the element will be in that rectangle. Use top, right, bottom, and left along with the pixel value to control where the element will stay.

position:absolute;

top:20px;

right:20px

The above CSS sets the position of the element 20 pixels from the top and right edges of your browser. You can also use absolute positioning inside the div.

 

2. * + selector

* Allows you to select all elements of a specific selector. For example, if you used * p and then added CSS styles to it, it will do so for all elements in your document using the <p> tag. This makes it easy to globally target portions of your website.

 

3. Overriding All Styles

This should be used with caution because if you do it for everything, you will run into problems in the long run. However, if you want to override a different CSS style for a specific element, use !Important after styling in your CSS.

 

4. Splitting Both HTML and CSS

It's more of a "workflow" trick. It is better to create CSS files (one for desktop and one for mobile) during development and only merge them at the end. The same principle can be done with HTML. If you are not developing in a SPA environment like Gatsby, you can use PHP to include and require HTML snippets.

If you want to keep the “/modules” folder containing the navigation bar, footer, etc. in separate files you need to make one change, you don't need to edit it on every page.

 

5. Use a CSS Preprocessor

Less, Sass, SCSS. Choose the one you like the most. Many developers will tell you that Less is the worst, but it’s often enough. But learn to use them immediately. They will help you reveal colors, sizes one single time, also create CSS for cycles and similar things. Also, it’s an important skill in any developer’s portfolio.

 

6. Animated Lines and Decorations

Oftentimes, you need to create interesting effects like animated underlines, background fade in and out, etc. Don't create a new element, just use the:: after and:: before pseudo selectors. They are great for this purpose. Don't forget to set the content property: if you forget it, the pseudo-element won't show.

 

7. Responsive Video

This CSS trick makes the video content expand its full width to the border. For this to happen, you need to put your inline video code in a <div> container and specify 50-60% padding-bottom. Then set 100% width and 100% height with the absolute position for other elements like iframe and object embed. As a result, inline elements will automatically expand to full width.

 

8. Link states

Many designers overlook these styles and it causes usability issues for your visitors. The :link pseudo-class controls all links that have not yet been clicked. The :visited pseudo class handles the styles of all links you have already visited. This tells website visitors where they've already been to your site and where they have yet to explore.

 

9. Control The Elements of a Section

Using the example image above, if you only want to target images of a specific section, like your blog, use a class for the blog section and combine it with the actual selector. This will allow you to select only the blog section images and not other images such as your logo, social media icons, or images in any other sections of your site, such as the sidebar.

 

10. Apply CSS to Multiple Classes

Let's say you want to add an identical border around all images, blog sections, and sidebar. You don't need to write the same SS 3 times. Just list these items separated by commas.

It does not matter if you have been a web designer for years or just starting, learning how to design websites properly can seem like a daunting and endless journey. Once you have narrowed down the languages ​​you want to learn, you need to learn and hone your skills.

No matter what you learn, CSS is one of those important yet daunting skills that you need to master. However, it shouldn't be that hard, especially if you know a few handy and little-known CSS techniques to get the job done.