Modern Inline styling technique (Inline CSS)

CSS is a beautiful tool that has evolved in the software development industry. Over the decades, many aspiring and entry-level developers ignored CSS and underestimate the wonders it can bring to your software. CSS is an acronym for Cascading Style Sheets. It defines and structures how HTML elements will display on a browser screen. CSS beautifies the structure of our websites.

The advantage of understanding the basic foundation of CSS for every developer should be a gospel we should preach to every aspiring developer and beginner.

Before now, developers separate CSS codes differently by creating files for CSS alone, but modern-day developers use a different approach in styling their elements which I called The Modern Inline styling technique (Inline CSS).

TMISD(The Modern Inline Styling Technique) -Inline CSS is an approach by combining a section of CSS code directly to the HTML or React (JavaSCript) code without creating another file for the CSS. This approach will reduce time wasted on creating and importing a CSS file into your JavaScript (React) or HTML file.

One of the advantages of Inline CSS or Modern Inline Styling Technique saves load time or is faster in loading a web page.

Modern JSX codes even allow the programmer to declare a const and insert their Inline CSS code. It makes development easier to debug.

example of Inline CSS

const Container = styled.div`

height: 60vh;

background-color: #fcf5f5;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

Above is a const I declared and embedded an Inline CSS code.

It’s easy and faster