Since the invention of the web, styling on websites has improved in leaps and bounds. You can have gradients, rounded corners, overlapping elements, drop-shadow, scalable and responsive content, and much more. This is all made possible by CSS (Cascading Style Sheets).
They’re called cascading because the styles “cascade” in a hierarchical way. A more specific selector will override a more general selector, and the last-declared rule overrides previously declared rules.
When you have a very large website or application, plain CSS can become very unwieldy, so you may want to style it at the component level instead of at the global level. This is the approach taken by most React and Angular applications.
You will probably also want to establish a component library with standardized styles, so that developers and designers can maintain a consistent look and feel for your website.
You may want to consider using styling systems like JSS, CSS Modules, Sass, or Less, as they allow you to import styles from one file into another and combine the benefits of global styles with component-level styles. These all compile down to plain CSS.
CSS provides ever more powerful ways of styling your website responsively, so that it can be viewed at different screen resolutions on mobile, tablet, and desktop devices. This can be done with media queries or by using flex-box styles, which allow the content to flow into place when the screen is resized.
CSS also provides animations, which can be used to draw attention to items on the page, such as a form that you want users to fill in, or a button you want them to click, or just as an elegant way of loading the content onto the page.
Leave a Reply