Scribd
Upload
4 views

Cascading in CSS -Notes Lyst8633

The document discusses the use of external CSS, which allows for styling multiple web pages from a single stylesheet, enhancing efficiency in web design. It explains how to link an external CSS file to HTML documents using the <link> tag and introduces the @import rule as an alternative method. Additionally, the document covers the concept of cascading in CSS, illustrating how different styles can have varying precedence based on their source.

Uploaded by

policharlagurukishor1431
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Cascading in CSS -Notes Lyst8633

The document discusses the use of external CSS, which allows for styling multiple web pages from a single stylesheet, enhancing efficiency in web design. It explains how to link an external CSS file to HTML documents using the <link> tag and introduces the @import rule as an alternative method. Additionally, the document covers the concept of cascading in CSS, illustrating how different styles can have varying precedence based on their source.

Uploaded by

policharlagurukishor1431
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Front End Technologies

CSS - Day 2

Agenda
▪ EXTERNAL CSS
▪ Cascading in CSS

External CSS:
External CSS contains separate CSS file which contains only style
property with the help of tag attributes. CSS property written in a
separate file with .css extension and should be linked to the HTML
document using link tag. The advantage of external stylesheets is that
it can be created once and the rules applied to multiple web pages. If
we need to make widespread changes to your site design, you can make
a single change in the stylesheet and it will be applied to all linked
pages, saving time and effort as it prevents you from having to make
many code changes in each page.
Let us now understand with an example how to make use of external
css. Assume we have 3 html files index.html, index1.html, index2.html
and we have to apply same styling for all these files then the concept of
External css comes where styling should be done in one CSS file and
linked to all html files.

Full Stack Web Development HTML TapAcademy


index.html

index1.html

Full Stack Web Development HTML TapAcademy


index2.html

style.css

Full Stack Web Development HTML TapAcademy


Output:

Full Stack Web Development HTML TapAcademy


As we can see in the above output styling has been reflected to all
web pages. So, by using external css it will be easy to stylemultiple
pages at the same time. In the above example styling for index.html,
index1.html and index2.html is done in the style.css file and is linked
to all the html files using <link> tag. The <link> tag can be used in
an HTML document to tell the browser where to find the CSS file used
to style the page. It is an empty element and it lives inside the element.
It should use three attributes i.e rel, type and href. The rel attribute
specifies the relationship between the HTML page and the file it is
linked to. The value should be stylesheet when linking to a CSS file.
type attribute specifies the type of document being linked to. The value
should be text/css. href specifies the path tothe css file.
Let us now see an alternative way of using external stylesheet
using @import with the same example.

Full Stack Web Development HTML TapAcademy


index.html

index1.html

Full Stack Web Development HTML TapAcademy


index2.html

style.css

Full Stack Web Development HTML TapAcademy


As we can see clearly from the above example there is no change in
style.css file changes are done in html files. The @import is used to
import style rules from other style sheets and <url>() representing the
location of the resource to import. Certainly the output remains same
you can try by yourself and cross verify by changing the styling.

Let us understand the meaning of cascading in CSS with an example.


index.html

index.css

Full Stack Web Development HTML TapAcademy


Output:

As we can see in the above example all three ways of css is applied to
h1 tag and clearly we can see in the output by default inline css has
been given higher precedence compared to internal and external css.
Now we will see if we remove inline css and only internal and external
css is applied which will get higher precedence.

Full Stack Web Development HTML TapAcademy


Output:

As we can clearly see from the output now precedence is given to


internal css i.e it is going downwards and checking whether internal
styling is there or not, going downwards is nothing but cascading. This
is not the case always if inline styling is not there precedence is given
to internal css, if in case external css code is placed afterinternal css
precedence is given to external css.
Example: Without inline and internal css

Full Stack Web Development HTML TapAcademy


Output:

Example: External css code is placed after internal css

Full Stack Web Development HTML TapAcademy


Output:

Full Stack Web Development HTML TapAcademy

You might also like