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?

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…

12

make sure your file name same as use in html code and you do not use inline css in your html code because first of css is inline css. And make sure all syntex are true.

13

To add CSS to an HTML document, you have a few options:

  1. External CSS: Create a separate CSS file (e.g., styles.css) and link it to your HTML document using the <link> tag within the <head> section:

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- Your HTML content here -->
</body>
</html>

  2. Internal CSS: Use the <style> tag within the <head> section of your HTML document:

    <!DOCTYPE html>
<html>
<head>
    <style>
        /* Your CSS rules here */
    </style>
</head>
<body>
    <!-- Your HTML content here -->
</body>
</html>

  3. Inline CSS: Apply CSS directly to HTML elements using the style attribute:

    <!DOCTYPE html>
<html>
<body>
    <div style="color: red; font-size: 20px;"> This is a red text with font size 20px.</div>
</body>
</html>

Choose the method that best suits your needs and workflow.

14

You are probably making this mistake while trying to link external CSS to html. Easiest way to avoid it is by right clicking on the CSS file and copying either the file path or the relative file path to the place of href in the above link.

Hope it helps.

16

The html class in-stack doesn’t correspond to the css rule .in-class change .in-class to .in-stack for correct styling of the coffee & the spelling of stylesheet is incorrect in your html it’s written as stlyesheet.

17

Hi @pujitharoopa
The spelling is not correct of the stylesheet attribute in the tag. It should be stylesheet instead of stlyesheet.
You can refer the code below:

Learning HTML

Mocha

Cappuccino

18
Learning HTML

Mocha

Cappuccino

19

If your CSS file is linked correctly in your HTML but isn’t affecting your website’s appearance, several common issues might be causing this. First, ensure that the <link> tag in your HTML <head> section correctly points to your CSS file (href="styles.css"). Verify that the path to styles.css is accurate relative to your HTML file’s location.

Next, clear your browser’s cache to ensure it’s not holding onto older versions of your CSS file. You can do this by pressing Ctrl + F5 (Windows/Linux) or Cmd + Shift + R (Mac) to perform a hard refresh.

20

@pujitharoopa Hii
There is a spelling mistake in stlyesheet, it should be stylesheet.
The correct code for adding CSS file will be -

Learning html
21

Hey there!

I noticed you’re having some trouble getting your CSS to work with your HTML. No worries, this is a common issue, and it’s great that you’re reaching out for help. Here are some steps you can follow to fix the problem:

  1. Fix the Typo in the link Tag:
  • It looks like there’s a small typo in your link tag. Instead of stlyesheet, it should be stylesheet. Just change that, and it should start picking up the CSS file.
  1. Ensure the CSS File is Named and Placed Correctly:
  • Double-check that your CSS file is named coffeeshop.css and is in the same folder as your HTML file. If it’s in a different folder, make sure to update the path accordingly in your link tag.
  1. Update Your HTML File:
  • Make sure your HTML file has the corrected link tag. This will ensure your HTML is properly linked to your CSS file.
  1. Verify Your CSS File Content:
  • Go through your coffeeshop.css file and ensure that the CSS rules are written correctly. Sometimes a small typo can cause styles not to apply.
  1. Clear Your Browser Cache:
  • If you’ve made the changes and don’t see any updates, try clearing your browser cache or do a hard refresh (Ctrl + F5 on Windows/Linux or Cmd + Shift + R on Mac). Browsers sometimes keep an old version of your files to load pages faster.

Follow these steps, and you should see your styles applied correctly. If you still run into issues, feel free to reach out again. Happy coding, and keep up the great work!

22

*Ensure that the file path to your CSS file is correct. If the CSS file is in the same directory as your HTML file, the path should be just the file name.

But if it’s in a subdirectory, the path should include that subdirectory.

*Ensure your <link> tag is placed within the <head> section of your HTML document.

*Ensure that your CSS file contains valid CSS rules and that there are no syntax errors.

Hope this helps.