Siksha Sarovar

Siksha Sarovar (sikshasarovar.com) is a free educational web application that helps students in India learn programming and prepare for academic and competitive exams. The platform offers structured coding courses (C, C++, Python, Java, HTML, CSS, PHP, Power BI, AI, Machine Learning, Data Science), complete university curriculum notes for BCA/MCA students with previous year question papers, Class 10 and Class 12 CBSE/HBSE school notes, and dedicated preparation material for SSC, UPSC, Banking, Railway and other government exams. Browsing the site is completely free and requires no account. Users may optionally sign in with Google solely to save their learning progress, quiz scores and personal preferences across devices.

Privacy Policy | Terms of Service | Contact Siksha Sarovar | About Siksha Sarovar

v4.0.9 · PWA
Siksha Sarovar logo
Siksha Sarovar
Your Learning Universe

Siksha Sarovar is a free e-learning platform for coding courses, BCA university notes and competitive exam preparation. Optional Google sign-in saves your learning progress across devices.

Privacy Policy · Terms of Service · Contact

Initializing knowledge base…
Compiling modules 0%

3. CSS - Inclusion

Lesson 3 of 34 in the free CSS Customization: Zero to Hero notes on Siksha Sarovar, written by Rohit Jangra.

Ways to Associate Style

There are four ways to associate styles with your HTML document.

1. Embedded CSS - The <style> Element

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head> tags.

<head>
<style type="text/css">
  h1 { color: #36C; }
</style>
</head>

2. Inline CSS - The style Attribute

You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only.

<h1 style="color:#36C;"> This is inline CSS </h1>

3. External CSS - The <link> Element

The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with .css extension.

<head>
<link type="text/css" href="mystyle.css" media="all" />
</head>

4. Imported CSS - @import Rule

@import is used to import an external stylesheet in a manner similar to the <link> element.

<style>
@import url("mystyle.css");
</style>

CSS Rules Overriding

  • Inline style takes the highest priority.
  • Embedded styles (<style>) override external style sheets.
  • External style sheets take the lowest priority (unless marked !important).