There are three different methods to apply Cascading Style Sheets (CSS) to your website: External Stylesheet, Inline Style, and Internal Style. The advantage of using one over the other is dependent upon how you need to style your web page.
| Inline Style | An inline style applies directly to the code within an HTML document. The HTMl tag "style" is used to specify the formatting applied to HTML code in the webpage. This method of providing CSS formatting is considered inefficient because the formatting must be done repeatedly through out the website. |
|---|---|
| Internal Stylesheet | Internal stylesheets also add formatting directly into the web page, but instead of being present throughout the code, there is a central section at the head of the document for all of the style settings. This is better than the inline style because it centralizes all of the CSS into one part of a web page, but still only affects the page into which the CSS code has been applied. |
| External Stylesheet | The External Stylesheet uses a .css file specific for formatting that can apply to multiple pages. Its main advantage is that affects all the pages in the website so that you centralize the formatting. |
Inline CSS
Inline style formatting code is embedded in the HTML code using the "style" attribute. Here's an example of STYLE in action:
<p style="color:blue;font-size:12px">Hello world! Look a this sample text!</p>
The style applied in the paragraph tag will change the color blue and the size of the font size to 12 pixels.
Internal CSS
The <style></style> HTML tags will need to be in the Head section for each webpage. The CSS code will only be between the <head></head> tags on the web page. All other CSS code would be considered inline. Here's an example of an internal stylesheet:
<head>
<style type="text/css"> h1 {text-align:center;} h2 {color:red;} p {color:blue;text-align:justify;} </style>
</head>
External CSS
An external stylesheet must be referenced in the HTML page that is using it. Typically, you would see a file like style.css used to store all of the CSS settings. The style.css page can be located anywhere in your files. You can name the file any name, but you will need to link to it so that all changes made through the style.css would globally change the formatting through the website. Here's an example of the link that would used for the external CSS stylesheet:
<head>
<link rel="stylesheet" type="text/css" href="/help/style.css" />
</head>
This completes the tutorial on adding CSS to your website. Consider what best works for the development of your site, or use a combination of the options in order meet your website development needs.
| Email: | support@WebHostingHub.com | Ticket: | Submit a Support Ticket |
|---|---|---|---|
| Call: | 757-416-6627 | Chat: | Click To Chat Now |
We value your feedback!
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!