Embedded Cascading Style Sheets Tutorial

By Digamber Rawat Last updated on
I will teach you how you can embed cascading style sheets in your web or mobile app project to provide style. CSS, Cascading Style Sheets and Style Sheets – all these stands for the same; modern way to define the look and feel of your website. You define the layout and design of the web pages with the help of CSS. With the help of CSS, you will be able to get rid of all the deprecated attributes and tags. The FONT tag is the perfect example we can take here. We will also learn about the embedded style sheet here.

Here in this tutorial, we intend to teach you about how you can change the look and feel of your web pages. You will play with the look of tables, background, link colors, text colors, borders, headings, and many other aspects which are associated with the look and feel of the web pages.

Thanks to CSS, you can either:

  • You will be able to define the style of an element. There are many popular tags including td, tr, table, p, h1-h6, div, body, etc.
  • Alternatively, you can create an entirely new style as per your needs.

Embedded Cascading Style Sheets

How to define a style?

We need 2 sections to define a style. You need selectors and corresponding declarations. You will be enclosing declarations in curly brackets {}.

We are going to look at the syntax where we have a single selector and one declaration. (property: value; pair}.

selector {
 property: value;
}

As far as each declaration is concerned, it comes with the pair, property: Value.

h1 {
   color: blue
}

CSS Syntax

In the above example, we have used a single selector (h1) and 2 declarations which are enclosed in {}. Remember {} are essential.

Defining an HTML Tag:

  • Here we redefine the HTML element h6, which is the selector. We are trying to assign size value 20px.
  • We must only use the curly brackets.
  • We must use the colon (:) to separate value and property.
h6 {
 font-size: 20px
}

Using Multiple Selectors

We are going to look at the example of using more than one Selector.

h2, h4, p {
  color: #000000
}

In the above example, black color will be used for elements h2, h3, and p.

Using Multiple Declarations

Let’s look at an example below:

p {
  font-size: 30px;
}

p {
  color: orange;
}

But the same thing can be written in a shorter manner as shown below:

selector {
  property: value;
  property: value;
}

p {
  font-size: 30px;
  color: orange;
}
 
body {
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: 30px;
  background-color: #cccccc;
  color: #000000;
}

We have used a semicolon as a separator.

All that we need is one line to write this code. However, to improve the readability, we have opted for more white spaces.

How To Apply Style Sheets?

We are dealing with 3 types of style sheets. Where you apply the style and where you define the style make all the difference.

Inline style sheet – Here we are only referring to the particular occurrence of the tag in the code.

Embedded/internal style sheet – Here we define the style sheet in the head section of the page. Only applicable inside that page.

External style sheet – Here the style sheet will be defined in an external file. It applies to all the files.

You need to understand the fact that more than one type of style sheet can be included on a page. Moreover, you have the liberty to link more than one external styles sheets to a single page.

1. Inline style sheet – Appears within a tag

Use for

You go for inline style sheet if the particular style you have opted for will not be repeated anywhere else on the site or page.

Where should we define?

We define it in the body section of the HTML code. You must define it every time you intend to use it.

Syntax

As far as the syntax of the inline style is concerned, it is simpler compared to External and Internal styles. Here you will not be able to rely on curly brackets or selector.

<element style="property:value">

2. Internal style sheet

Where should be defined?

We define the Internal style sheet in the head section of a page, only once. However, if you want the same page in more than one page, you need to define it on each page.

Use for

As we have already said, it is applicable only on a single page.
If you wish to have the same style repeated on other pages, then you need to define it on each page.

We define it in the head section, as show below:

<head>
 <style type="text/css">
    Your style goes here
  </style>
</head>

Example:
<head>
  <style type="text/css">
    body {
        background-color: blue;
        color: #000000;
    }
    h1 {
        margin-left: 12px
    }
  </style>
</head>

3. External style sheet

Use for

If you wish to have this style typical to several pages, then it is better to define it on an external file.

Where should we define?

You write the style definition just once. You save it on an external file. If a particular page wishes to use this style definition, then it must be accessed in the HEAD section by providing a link to the file.

Use tag to link the style file

You need to use the following link tag inside the section of your source code. Moreover, you need to replace yourStyleFileName.css with your CSS file name.

Note: You need to keep in mind that the link tag doesn’t have a closing tag in HTML.

CSS external file

You need to keep in mind that CSS files are ordinary text files. All that you need is a notepad to write a CSS file. However, you must give .css extension to the file name.

Cascading

We use the term Cascading if we wish to have more than one style sheet on a single page.

Precedence order

If you have the same style defined in different style sheets with different values, then this will be the order of precedence:

  • Inline Style Sheets
  • Internal Style Sheets
  • External style sheets

BODY tag

The Body tag is significant. It comes with properties and values. Let’s have a look at an example code below:

body {
     font-family: “Open Sans”, Helvetica, sans-serif;
     font-size: 26px;
     background-color: #cccccc;
     color: #222222;
}

Font-family:

As far as the font family is used, it has to be in the computer of the users. Else, you will not be able to show them. Therefore, you should be careful to stick to favorite fonts. As a safety measure, you may define more than a font. This will help pick alternative fonts in case the first font is unavailable.

It is always recommended that you should mention more than one font. The selection should always end with a generic font.
If the font name has spaces in their names, then you must place the name in quotes. For instance, “Open Sans”

Example:

font-family: “Open Sans”, Helvetica, sans-serif;

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.