InMotion Hosting Support Center

To add CSS styles to your website, you can use three different ways to insert the CSS. You can Use an "External Stylesheet", an "Internal Stylesheet", or in "Inline Style". The benefit for using each depends on what you are doing with the Style.The following table explains the difference between them.

Different CSS style linking
Internal Stylesheet An internal stylesheet holds the CSS code for the webpage in the head section of the particular file. This makes it easy to apply styles like classes or id's in order to reuse the code. The downside of using an internal stylesheet is that changes to the internal stylesheet only effect the page the code is inserted into.
External Stylesheet The External Stylesheet is a .css file that you link your website to. This makes it so that what ever you change in the .css sheet, will effect every page in your website. This prevents you from having to make many code changes in each page. This is for "global" site changes.
Inline Styles The Inline style is specific to the tag itself. The inline style uses the HTML "style" attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The Inline style is good for one an individual CSS change that you do not use repeatedly through the site.

Below are examples of what the code looks like for each type of CSS.

Internal CSS Stylesheet

When creating a stylesheet internally in the web page, you will need to use the HTML tags in the Head section of your webpage. All the code for the Internal CSS stylesheet is contained between the section of your websites code. Below is an example of what an Internal stylesheet looks like.

<head> <br />
 <style type="text/css">
h1 {color:blue;}
h2 {color:red;}
p {color:green;}
</style><br />
</head>


External CSS Stylesheet

When using an external stylesheet you must reference the stylesheet in the HTML page that is using it. You would add the code below to your HTML document to reference a stylesheet in the same location as the HTML page called "style.css". You can upload the "style.css" page can be located anywhere in your files. You can name your stylesheet whatever you like and link to as many as you like. You can simply link to it in your head section and every edit your make to the "style.css" sheet will be globally changed through out the site. Below is what teh code looks like.



Inline CSS Styles

The inline style uses the HTML "style" attribute. This allows CSS properties on a "per tag" basis. The following is an example of how the inline style is used.

This is a paragraph!

This inline style will change the color of the paragraph to red and make the font size 18 pixels.

This concludes the article on How to link your CSS to your webpage. Please check the next article on Using CSS in your Website. For more information on this course please visit Using & Understanding CSS.

Continued Education in Course 203: Using and Understanding CSS
You are viewing Section 3: Using External, Internal CSS Stylesheets and Inline Styles
Section 2: Introduction to CSS
Section 4: Using CSS in your Website

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

Social Media Login

   
Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2017-11-05 2:35 am

We've got BoldGrid on our site and are trying to use their tools to make a modification to the CSS.  I clicked Customize > CSS/HTML Editor and it brings up the theme's style.css.  After making my change, I click the Update File button at the bottom of the page and it tells me it was successful.  However, I'm not seeing any changes.  Save and Publish is not available from Customize, leading me to believe it's not seeing the changes I made.

I've tried adding a link at the top of one of the pages to the external CSS, but it doesn't appear to be seeing it, so I'm guessing I'm not getting the correct path.

When I look at Chrome's web development tools, it looks like I'm in the right spot. What do I need to do to make this change active on the pages on my website?

 

Thanks, Jeff

Staff
13,821 Points
2017-11-06 7:36 am
Hi Jeff,

We need a bit more information. Do you have a link to your site so we can take a look for you? Also, can you provide the code snippet you're trying to add? That way, we can see if, in fact, its loading in the CSS and maybe there's another conflict.
n/a Points
2017-11-07 2:38 am

The site is http://lincolnparkdance.net/.

The height in the snippet below was changed from 135 to 20:

Staff
10,059 Points
2017-11-07 10:06 am
Linking to an external stylesheet would be a separate process than using the built-in CSS editor that comes with the Customizer. Which method are you trying to use? If it is an external stylesheet, it will need to be "enqueued" in the WordPress theme, which is advanced and not recommended without creating a child theme. Is the problem that you are not seeing changes made in the CSS editor in the Customizer?
n/a Points
2017-11-10 1:34 am

Hmm...gremlins seem to have eaten my last reply.

 

Yes, I am not seeing changes made to the CSS file in the Customizer.

Staff
40,336 Points
2017-11-10 9:10 am
Did you make sure to clear your browser cache? If you still have the problem, first, try adding the changes to the CSS editor in the Customizer under Advanced. If that doesn't help, then look into creating a child theme with the changes that you have applied.
n/a Points
2017-11-01 9:56 am

Kindly explain CSS Overriding rules for:

External CSS

Internal CSS

Inline CSS

 

Thank u.

Staff
40,336 Points
2017-11-01 10:35 am
Overriding rules in External CSS and Internal CSS

The more specific style sheets override less specific ones. The more selectors that you use in a stylesheet, the more specific it is. If you look at this post, the solution that everyone agrees with suggests that you can use rules from one rule in another rule giving it greater specificity - which means it would override the previous rule. If you need more flexibility than that, then the recommendation is to use LESS or SASS.

Inline CSS

When you override inline styles, the decision to override isn't determined by a rule. It's more a technique used for overriding inline styles (using the !important tag) where you need to decide when your CSS rule must override the inline CSS. Bear in mind that inline CSS is used to override the Internal or External CSS being applied at that point. For example, in these posts, there is an external stylesheet that is applied. We must use inline changes in order to override the CSS rules in order to apply format changes like font or font color that are otherwise determined in the stylesheet.




n/a Points
2017-06-08 3:09 am

This tutorial was relly helpful to know the different types of css styles. It was helpful to creates my blog.

 

Thanks.,

n/a Points
2017-03-31 2:16 pm

what is the priority color it takes when we give three different colors for three different stylesheets internal,inline,external

Staff
2,858 Points
2017-03-31 2:20 pm
Anjan, the CSS that affects your element will typically be whichever is loaded most recently. If you have CSS declarations in your HEAD tag, those will typically be overwritten by local specifications in your BODY tag or even style specifics on the element itself.
n/a Points
2017-02-21 1:33 am

Good description&example

Staff
2,858 Points
2017-02-21 1:23 pm
Harisankar, we're glad you liked it!
n/a Points
2017-01-29 2:10 am

what is the main difference between inline and internal css

Staff
43,761 Points
2017-01-30 3:59 pm
The main difference is that inline takes precedence over Internal.
n/a Points
2016-10-25 5:06 am

Hi, where is more appropriate to use inline styles, if best practice is to write styles in external css file

Staff
13,821 Points
2016-10-25 8:10 am
External CSS is best practice whenever possible.
n/a Points
2016-05-03 2:05 pm

If all 3 types of CSS are used in a Web page, what is the priority order?

Staff
10,059 Points
2016-05-03 2:35 pm
Generally, inline takes precedent over internal, and internal takes precedent over external. However, certain elements, rules, and classes can cancel each other out. So it always best to know which rules are affecting which elements. You can also use the !important identifier in your stylesheet to override other rules, but you should only use this as a last resort.
n/a Points
2015-03-20 4:37 am

Hello, I just wanted to ask, about the color. If I need to use Internal CSS is that mean that the color will need to be like "red,orange,blue" it has to be their names? or its okay to use the hash with numbers? thanks 

 

Because my teacher instruct us to use Internal CSS and i forgot to ask him.

Staff
43,761 Points
2015-03-23 1:32 pm
Hello Cy,

The setting is the same, no matter whether using internal CSS or not. You can use the color name (red, blue) or the hash (#ff0000 for red, #0000ff for blue) Using the hash gives you access to many more colors as they do not have names for every hash combination.

Kindest Regards,
Scott M
n/a Points
2015-07-28 10:40 am

hey you can use the hash tage colors also, and it works i've tired it!

 

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

26 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!