CSS Types

Types of CSS: Cascading Style Sheets

CSS can be used with your HTML page by using the following three methods, also known as CSS types: 

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. For Example:

<p style="color:red;font-size:200%">Hello</p>

Note: Not recommended as it creates confusion and you have to style every tag specifically. Repeating the same CSS every time will only increase the size of your code and make your site super-slow

Internal CSS

An internal style sheet may be used if one single page has a unique style.

The internal CSS can be defined using the <style> tag inside the <head> section of your page. For example:

Applies the same colors to every <p> element present in the page. The style can be specified up to particular elements by using class and id selectors.

<head>
<style>
p {
  color: red;
font-size: 200%;
}
</style>
</head>

External CSS

Another way of storing your CSS is to do it completely off the page that you are working on.

While in the internal CSS all of the styling that we’re using remains right there in the code. But there are a couple of reasons why that is not a great idea. Though it’s very helpful when you’re making a site because everything is together but in production, it means that you have to have your CSS content on every page which isn’t a very great idea. You could find yourself updating it several times and you’ll definitely have a slightly slower site. Because the users will have to download the CSS information every time they load a new page. So the general solution for this is external CSS.

To create external CSS

Create a file with extension filename.CSS in the same directory where your webpages are. Create a folder by name CSS. That’s where you can keep all your CSS files and all of them will remain organized in one place. Now all you have to do is, reference your CSS file in your HTML file and using the following code. It will bring in all the CSS styles.

<link rel="stylesheet" type="text/css" href="css/filename.css">

It tells the HTML that you are linking to a separate style sheet. We have clarified the type here, and the standard for stylesheets is text/css.

If your .css file is stored at any other location on WWW you can just put the web address/absolute link, of that location.

<link rel="stylesheet" type="text/css" href="www.webaddress...../filename.css">

Here is an example of how you can add a Bootstrap stylesheet to your page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

That’s how the external CSS work and we would prefer the external CSS every time when you are working on a live site.

Cascading Order: What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section, whichever is declared at last will override the declaration made by the first)
  3. Browser default

To get an introduction to CSS, Click Here.

Reference:

https://www.w3schools.com/css/css_howto.asp

To read more of our blogs please visit the Fitness, Stories, and Tips for Work section.

Leave a Reply

Your email address will not be published. Required fields are marked *