what is the correct html for referring to an external style sheet? This is a topic that many people are looking for. voteyesons.org is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, voteyesons.org would like to introduce to you CSS video tutorial – 7 – External style sheet | link tag. Following along are instructions in the video below:
Friends welcome to css tutorial series. We are learning of placing styles. There are three three different ways of placing styles in our web.
Pages inline style embedded style and style already. We learnt inline style and embedded style. What our inline styles styles that are placed within the tag itself are called inline styles.
Whereas styles that are placed within the style tag are called as embedded styles. We use style attribute to place inline styles. Whereas.
We use style tag to place embedded styles. Very simple example within the opening tag. We use a style attribute and we provide declaration list.
All those styles are applied on the content. That is inline style for embedded style. We place the declaration block.
Within the style tag and the style tag. We place within the head tag also we understood limitations of inline styles. If we have many tags with a common style in the same page.
Then we have to copy paste. The entire declaration list to every other tag that increases. The webpage size to work on this limitation.
We use embedded style also we have seen the limitation of embedded styles itself. If we have many web. Pages with common styles.
Then we have to copy paste. All embedded declaration blocks or style tag itself to every. Other web.
Page. That increases.
The website size to overcome this limitation. We use external styles. One of the important point you need to remember is inline styles are used with respect to the specific content.
Whereas embedded styles are used with respect to a specific page. Lets proceed further and start. Learning.
External style sheets. External style sheet. Is basically a css file.
Containing list of declaration blocks. Css. File is linked to various web.
Pages to apply similar styles to linked html and css files. Together. We use link tags so there is a tag called as link tag.
We are going to use to link html pages and css files. And how that tag looks. We write link tag.
Then there is an attribute called as href h r. E f. Stands for hyperlink reference to that we give css file name with extension then we use the type attribute we assign a value takes down css that indicates that whatever the content.
We have within this file. It is going to be a plain text or css code. Next.
Attribute will be relation to relation or relationship. Attribute we give the value style sheet note link tag should be placed within the head tag and advantages of external style sheet or link tag is we can implement consistency throughout the website easily and we can reduce lot of code redundancy. We can maintain the codes or consistency.
Easily. Lets proceed and understand first of all what we need to do means.
We are going to create a css file. I go to start click on run button. And say here notepad and im going to save this file file save.
As this is going to be main dot css. So file name. I am.
Giving main dot css both side. I put double quotations and save it at desktop and if you see main dot css file got created to apply styles to all these pages. We have written in the previous code like we used a style tag and we written we selected the paragraph and applied many styles.
What we need to do now means. We are going to cut this from here ctrl x. I can say ctrl x.
I am. Going to cut that and paste. It in css file.
Simple. So here. We have paragraph tag and all the styles.
File save. I save this file. Now if as i remove the styles.
I am going to delete this style tag itself. And i say file save go to browser and refresh this default. Dot html page.
If i refresh this no styles are applied. Now. What we need to do means.
We need to link the default dot html page. Find the css file together.
If we link them. Then automatically all these styles are going to be applied to the link page that is df default dot. Html page.
So what i have to do in the default. Dot. Html page in the head section.
I have to write link li and kalyan hr f. Hyperlink reference and it is going to be ma. I and main dot css file.
I am going to link and the type of content. That is present in the main dot css is text or css. And what is the relationship that is rel is equal to in double quotation.
I am going to write style sheet. Then at the end we close the tag itself by writing this line of code. Our default dot.
Html page is linked to the main dot css file when we refresh our default dot html page. What happens means browser goes to main dot. Css and reads the information.
It remembers that okay i have to locate every paragraph within the current page and apply these styles. That said guys if i save file save go to browser and refresh you can see that all paragraphs got applied with the styles similarly to apply styles to other two html files. I need to link so i go to default to dot html page.
I delete this content from here. And i am going to copy this line of code. I copy this and paste here file save go to browser and refresh.
There is no change perfect similarly i have to link to style. 3. Demo also i go here.
I am going to delete this embedded style code. And i paste the link tag file save go to browser and refresh now if i need to maintain consistency.
Lets take i want to change the paragraph background color to black in every web page. All i need is i need to go to this main dot. Css file.
And change. The background color to black and save file save what happens means every link group page is going to be affected by modification that we made in the main dot css lets refresh. And see you can see that all paragraphs are black.
If i go here and refresh. All paragraphs are in black color background. If i refresh all paragraphs have a background color set to black.
So that is the advantage of maintaining external stylesheet and if i need to apply any new style to all these paragraphs. All i need is i need to go to main dot. Css file and add a new attribute or if i want i can put one more declaration list for some other tags all pages.
Which are linked are affected by the css code. So this is how we write the external style guys. This is how we create the external stylesheet and link the web pages what our limitations of external stylesheet.
If we make any changes in the css file. Then every other link html page will get affected. So we should be very careful before we make modification in the css file.
Because any page. Which is linked is going to be affected by that modification. So you should be very careful.
But one of the most important advantage of using external stylesheet is we can create design centric code. And consistency. We can maintain throughout the web pages.
We can reduce so much redundancy of code by using the external style sheets. So hope you guys have understood how the external style sheet. Works for this tutorial this much is enough friends in the next tutorial.
We get more information on css for more benefits. Please subscribe like comment and share. See you in the next tutorial.
Keep learning keep coding keep sharing. .
Thank you for watching all the articles on the topic CSS video tutorial – 7 – External style sheet | link tag. All shares of voteyesons.org are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.