How to approach CSS for a website?
Too many choices leave you baffled. Same goes with Design too! Mantra of "Using Symmetry" and "Uniformity" across the pages are words of wisdom that I will forever remember. Here is a list of 5 tips that have helped me & I believe will help you too.
Tip 1: Uniformity
To have uniformity, you need to show consistency in the design across the web pages in all major elements of the HTML. Identification of these elements is key here. For example: If your main home page has navigation bar & footer, make sure all your web pages have them. On the contrary, a section may or may not be needed on a web page, based on it's content. So you need to identify such elements. Having the text font same across all headings is also another area where uniformity can be achieved.
Tip 2: Symmetry
Symmetry can be thought of in two ways:
- Symmetry w.r.t positioning of elements.
Have the navigation set as a left side bar? Make sure it's left across all the pages. What about action items like buttons? Keep the positioning of all buttons aligned uniformly either in the center, left or right side across the page instead of having them scattered.
- Symmetry w.r.t styling of elements.
Make sure that the background colors gel well together if they are different.
Avoid having too many different background colors. Try using the same color but one light one dark shade of it. Aim to have the focus of the reader maintained towards reading the content displayed. Keeping the background colors easy on the eyes is a good thought to have in mind while selecting colors & shades.
Also, don't forget to check the selected text font color against the background color.
Tip 3: Global CSS variables
Smart, time efficient & manageable designing!
Once you've chosen the colors, make sure you do not define individual element styling like this:
<div style="color:#2563EB;"><div>
In CSS, use the global variable declaration ":root" & have that variable name used in the subsequent CSS classes & ids. CSS Global variable declaration:
:root {
--main-color: #2563EB;
}
& then use it as shown below in CSS:
#id{
background-color: var(--main-color);
}
Change the color code assigned to the variable in root & have the change reflected across ALL HTML tags that have the CSS implementation of this variable!
Tip 4: Inline Vs Block elements
Understanding this is crucial to correctly place the HTML tags.
Block elements: They take up the entire row of the display.
Examples of block elements:
<p>HTML &</p><h1>CSS</h1>
<hr><div> is Amazing</div>
Even though these tags are written on the same line , the display takes up the entire row of the page for each of the tags:
Inline Elements
If you are guessing that these are the HTML tags that have the content visible on the same row in the display, then you are absolutely right! Notice how the button doesn't take up the entire row. Observe that each of these tags are visually placed in the same row, despite being written on different lines in HTML while coding! Here's a code snippet & the visual image:
<span>HTML & </span>
<button>CSS</button>
<strong>is Amazing!</strong>
Tip 5: Create a Component library
What is meant by a Component?
It is the block of code in an html file, say the component.html file, that has the set of HTML tags in it that implements the visual layout required to represent a portion of the web page. For example, the navigation bar at the top of webpage is a component, the footer with the links & copyright details can be considered as another component. The idea is to create a frequently used list of components & have them ready to reuse.
Verify the visual arrangement of all the HTML tags in a component and do the respective CSS styling (background-color, padding, font-size, etc) for each of these tags. In this process, a set of CSS classes & ids are also designed that can be reused later as required.
Voila! Component library is created!
Reuse the modular components created in this components library across different pages of the website & speed up web design process.
Thank you for reading!