Cascading Style Sheets (CSS) is an easy way to define styles to any HTML elements on your web page. Sometimes when you are viewing a page you might wondered how beautiful gradient color boxes or styled buttons could have been created on that page. You may also be interested in adding such elements on your site you. Though you might have time to learn the whole CSS stuff it is necessary for any site owner to understand the possibilities of adding CSS codes on a page.
With plenty of free CSS tips available on the web, here we discuss how you can add those CSS codes on your page.
Types of CSS Styles
There are three possibilities of adding CSS on a page based on your need. Most of us want to define one or two odd elements on page and inline style is the way to do it. For example, you can use the following CSS code to highlight a particular paragraph on a page. Inline style is defined directly within a HTML element on a page and affects only that element. Though inline style defeats the purpose of using external CSS it is highly used if the need is to style only a few elements on a site. What about to using a consistent heading style throughout a web page? Assuming if the page has 10 headings, it is a cumbersome task to use inline styling on 10 different <h1> tags on a same page. Here comes the solution with internal styling. Internal style is defined within a header portion <head> of the HTML document and affects all similar elements within a page. For example, the below code display all H1 elements on a page to have a left margin of 20px with red color. Now what about using a consistent styling throughout a site? For example, all H1 elements in a site should be in green color. Here the required CSS styles are to be written on a separate text file and saved with .css extension. This file should be uploaded to a server and then linked to all required HTML pages on a site. Save the below CSS code as “external-style.css” using a simple Notepad like editor and upload the file on your server. Now add the below code in your HTML page to link the external CSS file: Most webmasters modify the current CSS of the theme instead of adding new CSS file. The answer lies on your need and the hosting company / site builder platform you are using.
Inline Style
<p style="font-size:18px; color:green;">
Here is the paragraph content….
</p>
Internal Style
<head>
<title>Internal Style</title>
<style type="text/css">
h1 {margin-left: 20px; color: red;}
</style>
</head>
External Style
.h1 {
margin-left: 20px;
color: red;
}
<head>
<link rel="stylesheet" type="text/css" href="external-style.css" />
</head>
Which Method is Best?
It is very difficult to choose a single theme satisfying all your needs hence modifying existing CSS or adding new CSS is inevitable for webmasters to build a competitive site. This is one of the main reasons to avoid free site builder platforms offering free hosting without server access. After certain point of time, migrating the whole site to a new hosting company will become a hectic task.
Example
Move the cursor over the below image to see the horizontal flip effect with the text behind the image displayed and linked to another page.
Search engine optimization is a technique of making your site search engine friendly. Download free SEO guide here to improve your site's ranking...
Get the complete CSS and HTML for this widget here.
Leave a Reply
Your email is safe with us.