how to center images vertically and horizontally in html and css

html center image

Aligning elements in a webpage is probably one of the most challenging things for a beginner. You know all the HTML tags and your code is correct but somehow things just don’t align how you want it to be. One of the important concepts to understand is the type of elements: block elements and inline elements. Inline elements will go…

how to set font size or size of text in html or css

Google Fonts

Defining the size of text in different contexts is important when designing and developing webpages. In HTML, there are primarily two different ways of specifying the font size or size of text. One is using the font tag and the other is using cascading style sheets or CSS. According to the latest W3C recommendations, the best way to change the…

how to insert vertical line in html and css

Inlining css in html helps with SEO

It is easy enough to insert or draw a horizontal line in html. But how do you draw a vertical line in html? Unlike for the horizontal line, there is no single tag in html that will draw the vertical line. But that does not mean it is impossible to do so. Using CSS One way to do this is…

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 webpage 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…

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…