why is inline CSS bad….and is it really that bad?

Inlining css in html helps with SEO

Many webpage analyzers and most website designers will actively discourage you from using inline CSS (cascading style sheets) in your web pages. There are usually very good reasons for it, and let’s see why it is generally frowned upon. One question that I generally gets asked is: I just want to use it in this one place. Is it that bad?…

how to center text horizontally inside an HTML element such as div or span

When coding your layout in HTML, you will often need to center elements inside or with in another HTML element. Centering a text (or any element) means horizontally aligning the piece of content in the center of the parent tag. Quite often, it will be text that needs to centered but it can be an image or any other visual…

how to specify dimensions of an image in HTML, CSS or Javascript

Dimensions in img tag

Images are an integral part of any or at least most webpages. Almost every single webpage that you find on the internet will have at least one image in it. Of course, you might find some manual pages (and some pages on this blog) that might be devoid of any image, but they are usually far and few in between….

how to make an image in a webpage clickable in HTML?

Html CSS include code

A clickable image is an image that acts also as an HTML hyperlink. Clicking on any part of the image will redirect the user to another URL or webpage. You can make any image on a webpage clickable. Simple HTML is all you need to create the image clickable, just as a text link. First, let’s look at how images…

seo: 8 tips to optimize css files to speed up page loading and rendering

Dynamic Lining of CSS Files in Google PSS

Cascading Style Sheets or CSS files are an integral part of all modern websites. It allows you keep your content and layout separate and maintainable over the long run. This also mean that these files can grow in size over time and can negatively impact the page load time. When you optimize CSS files for size, you reduce the time…

seo: how to minify source files to reduce the webpage size and improve rendering

Html CSS include code

Minification is the process by which all unnecessary characters, including white spaces are removed from the source files so as to reduce the size of the file, without comprising any of the functionality of the program. The unnecessary characters can include spaces, blank, new line and comments. Almost all web programming or rendering languages such as HTML, JavaScript and Style-sheets…

seo: why you should put the external style sheets (css) in the document head

Inlining css in html helps with SEO

Every webpage has a head tag at the top of the source, known as the document head. It is different from what is sometimes referred as a header. Header usually refers to the visual elements that constitute the top part of a web site. Usually the header has a constant look and feel across all the pages, often containing the…

understanding style sheets (css) and three different ways to use them

Html CSS include code

Cascading style sheets or CSS are an important part of modern day websites. They allow you to format the HTML elements as defined in your layouts. It can also be used to do layouts in addition to setting properties such as fonts and colors. Using CSS allows for some amount separation between your web content, layout and formatting. This increases…

seo: how to reduce the HTTP requests and number of resources per page

Wordpress SEO description tag

Almost every webpage consists of mainly some text content and several web resources, such as images, external JavaScript files, external style sheets and other related files. In order for the web page to render correctly in the browser, it needs to download and often parse each of these web resources. Ideally you would want is to reduce the number of…

seo: how and when to inline CSS in your webpage

Inlining css in html helps with SEO

CSS or cascading style sheets are an important part of most websites. Having a CSS file has many advantages in the development and maintenance of the website. Some of the prominent advantages are: Decoupling: Having a different file for CSS allows you to decouple the content of the website from the styling and layout of the site. This helps with…

how and why to avoid css @import statements in stylesheets on your websites

Html CSS include code

Among the many things that you can do to improve the search engine optimization (SEO) of your web pages, one of the easiest and important thing is to improve on the page load time. It has been shown that improving the page speed leads to better user experience, user engagement and thus, indirectly better search engine optimization. Avoiding the CSS…

how to set a single user CSS file for firefox, chrome and opera

Specifying a User CSS file in Opera browser

Most modern web browsers support custom or user stylesheets which can be used to modify the look and feel of a web page before it is rendered. Usually there are multiple ways to set up a custom stylesheet (or user css file) in web browsers. Some browsers use extensions or addons while other just uses a simple css text file. Sometime you can…