Adding css in html

Development
#1

I have linked the CSS file in my html code, but it is not making any changes in the website. Please help me.

#2

@pujitharoopa it may be a path issue. Can you please share your folder structure and code?

#3 
<!DOCTYPE html>  
<html>
   <head>
   	<title>Learning html</title>
   	<link rel="stlyesheet" type="text/css" href="coffeeshop.css">
   	
   </head>
   <body>
   	<div class ="available-coffee out-of-stack" id="mocha">
   		<h4>Mocha</h4>
         <img src="mocha.webp" class="div-img">
   	</div>
   	<div class="available-coffee in-stack">
   		<h4>Cappuccino</h4>
         <img src="cappuccino.webp" class="div-img">
   	</div>
   </body> 
</html>

.available-coffee{
	color:orange;
	height: 300px;
	width: 300px;
}
.out-of-stack{
	border: 2px dotted red;
}

.in-class{
	border: 4px double green;
}

.div-img{
	height: 80%;
	width: 100%;
}
#mocha{
	color:green;
}
#4

@pujitharoopa is the html and css file in the same folder? If possible, please share a screenshot of these files open in a code editor.

#5

check if both files are in same folder or the name you have linked in the href attribute has no spelling mistake .If the css file is in different folder then copy the relative path of it or root path (relative path recommended) and then paste it in href of your link tag.

1 Like
#6

The spelling of “stylesheet” is wrong.
In your HTML code it is written “stlyesheet”.
Correct it and refresh the page again, it should work.

#7

If you have linked a CSS file to your HTML code and the changes you’ve made in the CSS file are not reflecting on the website, here are some common reasons why this might be happening:

  1. Check the link to the CSS file: Make sure that you have specified the correct path to the CSS file in the href attribute of the link tag in your HTML code. If the path is incorrect or misspelled, the CSS file won’t load properly.
  2. Check the CSS syntax: Make sure that the CSS syntax in the file is correct and there are no errors. Even one small syntax error in your CSS code can prevent the entire file from working.
  3. Check the order of your CSS and HTML code: Make sure that the link tag to the CSS file appears before the closing </head> tag in your HTML code. If the link tag appears after the body tag, the CSS file may not be loaded properly.
  4. Check for caching issues: Your browser may be caching an older version of your CSS file, preventing your changes from showing up. To fix this, try clearing your browser’s cache and reloading the page.
  5. Check the specificity of your CSS selectors: If your CSS selectors are not specific enough, they may be overridden by other styles in your CSS file or in external stylesheets. Try using more specific selectors or using the !important declaration to give your styles more weight.
#8

Make sure that your CSS file really has the file name as “.css " and is located in the same folder as the HTML document
.

#9

It is working now. Thank you.

1 Like
#10

CSS can be added to HTML documents in 3 ways:

Inline- by using the style attribute inside HTML elements
Internal- by using a <style> element in the <head> section
External-by using a <link> element to link to an external CSS file

#11

Hi
Actually there are 3 ways to add css to your html file.

1.Internal- which means you can write the css code before writing the html code in the same page(we can only use this css file for the html code that you have written on that same page)

2.External- which means you can write a css in a separate file and save it with .css file extension. After that you can apply the name of the css file to your html file (it can used for multiple number of web pages without any control)

3.Inline- it is applicable only for a single line.We can mention the attributes with the respective tags…so we can see the changes in a particular line of a web page…