Implement Inline CSS


Part One Chapter 11

CSS

When your mobile web pages require using large CSS block of codes for style, the best practice is to include your CSS in an external file (or several external files). This CSS setup will maximize your mobile web pages' load speed.

In other cases when your mobile web pages only have to use very few lines of CSS codes, it may not make sense to include your CSS codes in external files. It is better to place your CSS codes “inline” – Within your mobile web pages' HTML codes. This setup will reduce the number of http requests to external CSS files and allow your pages to load faster.

Add CSS to Web Pages

When adding inline CSS to your mobile web page, it must be added within the “style” tags in the head section. For example:

<head>
<style>

body {
  background-color: ffffff;
}

h1 {
  color: maroon;
  margin-left: 10px;
} 

p, ul, ol{margin-top:0;line-height:180%;}

a{text-decoration:underline;color:#C20000;}

</style>
</head>

One disadvantage with this setup is that web browsers will not cache the inline CSS as external CSS files.



Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book