CSS is assured to be the stylesheet language used for describing the presentation of a document written in HTML or XML. It is a well-designed mechanism that allows adding style including fonts, colors, spacing, lines, length, width. Besides, CSS describes the way the elements should be rendered. What are the benefits of applying CSS? Content accessibility is improved, more flexibility and control in the specification of presentation characteristics are provided. At the same time, it helps to reduce complexity and repetition in the structural content. On the whole, CSS is a must-have that can be applied for Magento as well. The next 4 ways needed to follow for CSS implementation in Magento 1.9:
Method 1: the reference file should be added to the code:
|
1 |
<link rel="stylesheet" type="text/css" href="style.css" media="all" > |
Method 2: the way implies HTML addition in the code:
|
1 2 3 |
<style media="screen" type="text/css" > Your code css </style> |
Method 3: it’s necessary to set “inline style” into the element:
|
1 |
<p style="font-size:18px;color: white; background: #000"> White color text on the black background </p> |
Method 4: to include CSS to the xml file:
You can find this file by following the path: app\design\frontend\rwd\default\layout\page.xml. Then you need to find:
|
1 |
<action method="addItem"><type>skin_css</type><name>css/madisonisland.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action> |
and right after this piece of code, you should insert:
|
1 |
<action method="addCss"><stylesheet>css/mystyle.css</stylesheet></action> |
Then you add CSS file in the following catalog: skin\frontend\rwd\default\css\mystyle.css
After all these actions are performed, don’t forget to refresh the cache.
With regards to Magento 2, the way of style addition has changed. Now styles are added in default.xml file. If you’d like to add style, you should use the default.xml file that is located in <theme_dir>/Magento_Theme/layout/default.xml. Now you should add custom.css file in the default theme. Before adding, you should create the style. Use the following instruction to perform it:
First off, create custom.less file (.less should be applied as in Magento 2 CSS pre-processor less is used) and add, for example, gray color for the whole website. Follow the catalog app\design\frontend\Magento\luma\web\css and create the file custom.less that should contain the following content:
|
1 2 3 |
body{ color: #ccc!important; } |
The file should be saved. After saving, let’s get back to addition. In the catalog <Magento_Blank_theme_dir>/Magento_Theme/layout/ it is necessary to open the file default.xml and add the following lines before <body> tag:<body> tag:
|
1 2 3 |
<head> <css src="css/custom.css" /> </head> |
As a result, the new style has been added in Magento. And in case you want to add external CSS file, you should specify src_type=”url” parameter. For instance, you want to add external google fonts to your website, that’s how it should look like:
|
1 |
<css src="https://fonts.googleapis.com/css?family=Open+Sans" src_type="url" /> |
The only things left is to perform a deploy, after which the style will appear on your website.
* the abbr used by the example of the standard theme:
|
1 |
<theme_dir> - app\design\frontend\Magento\luma |
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
Very helpful tutorial. Thank you for sharing!