Materialize CSS

Working with colors in Materialize CSS

Working with colors in Materialize CSS

Learn Working with colors in Materialize CSS

Changing the text and container colour on a website is one of the basic yet frequently performed tasks while designing a website. Usually, changing the colour is done using CSS. A designer can either use in-line CSS or write a class for changing the colour. 
In Materialize CSS, the framework developers have made the process of changing the colour of both the text and container easy. Just by calling the colour name inside the class tag will produce the desired result. For example, if you would like to have red colour text colour, just add the text red-text inside the h1 tag.

Here’s the link to Materialize CSS Color Library.

<div class="row red-text">
<h1>Changing color of text</h1>
</div>
Working with colors in Materialize CSS

In order to achieve this in CSS, we have to write the code as follows … 

<div class="row" style="color: red">
<h1>Changing color of text</h1>
</div>

Furthermore, in order to achieve the change in background colour in CSS following is the code 

<div class="row" style="background-color: red">
<h1>Changing color of division</h1>
</div>

The same result can be achieved by simply adding the text red in the div class, the following is the code

<div class="row red">
<h1>Changing color of division</h1>
</div>

Materialize CSS has not only eased the process of adding colour to the text and division but also enabled the designers to follow consistency in the design level.

Learn about Mega Menu in Materialize CSS

Dinesh Kumar R

Director at Mahadhi Technologies, Mahadhi Healthcare, Ampersand Academy, Motorjob, Swadata Analytics. I create engaging user interfaces for enterprise-level applications using HTML, CSS, SCSS, JavaScript, JQuery, TypeScript, Angular Material, Bootstrap, MaterializeCSS. I also craft beautiful, lead-generating websites which engages the visitors. Connect with me with your creative needs.Favourite Quote: If everything seems under control, you are just not going fast enough.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button