External Vs Inline CSS: Ways to use CSS with syntax

CSS Syntax basics

In this chapter, you will be given an idea of CSS syntax that will help you using the CSS with HTML elements/selectors in the coming chapters.

You can use inline CSS as well as external CSS in your web pages. Both of these ways are explained below.

>>An example of using inline CSS

CSS declaration

The general format of the CSS syntax is:

{property: value;}

For example:

{

font-size: 10px;

font-family: Aerial, Verdana;

color: 00FF00;

}

In the above syntax, the font-size, font-family, and color are the properties while 10px, “Aerial, Verdana”, 00FF00 are the respective values of each CSS property. The combination of the property: value is called ‘declaration’. CSS Declarations have to be enclosed in the curly braces.

A single line may contain more than one declarations as shown below:

{

font-size: 10px; font-family: Aerial, Verdana; color: 00FF00;

}

Each CSS declaration is ended with a semi-colon. Whereas property and value are separated by a colon ‘:

Applying CSS in HTML tags

There are different ways of applying the CSS in HTML tags of a web page.

Using CSS selectors in external files

In this way, a selector is assigned the properties/values at the page level. For example, if you want H1 tag in your document formatted as follows:

H1

{

font-weight: normal;

font-size: 20px;

line-height: 40px;

background: #000000;

padding: 5px 25px;

color: #355681;

box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);

font-family: ‘Muli’, sans-serif;

}

All H1 based headings in your document will be formatted on the basis of above specification.

Inline CSS

CSS can be applied within the HTML tags, called as inline CSS. You will use the <style> tag for inline CSS. To use CSS inline style you can include multiple CSS properties separated by the semi-colon. Following example shows how to use inline CSS in the <h1> tag.

See inline CSS Example Online


As you can see, the inlined style is used in <h1> tag of HTML with multiple properties.

Using external CSS file into HTML document

Generally, the external CSS files are used for the multi-page website. A separate external CSS file with .css extension is created that contains the HTML document display specification. See example below:

  • For this example, our external CSS file name is style.css
  • Place the external CSS file at the same directory where HTML file is placed.
  • Style.css (external CSS file) contains the following code:


The HTML file code:

See External CSS Example Online


You can see the line in <head> tag that includes the style.css, an external CSS file:

<link rel=”stylesheet” href=”style.css”>

Class and IDs

We also use Classes and IDs to apply CSS (inline or external) into HTML tags. These are explained in detail to their respective chapters along with examples.

Also see – CSS Class | CSS ID

Was this article helpful?

Related Articles

Leave A Comment?