Changes in my CSS aren't showing on the webpage, how do I link the classes properly-CodePudding

changed "div" tags into more semantic html tags to make a webpage more user friendly but unsure how to change CSS to make these new semantic tags inline on the webpage as well as change other styling aspects of the code. How do i make sure the right elements in my html is linked to the right css code. Sorry if im not using the terms correctly new to coding.

I tried changing the class names to the corresponding more semantic tags so that i could change the webpage style

CodePudding user response：

In HTML we can link css to the html file in the header like so:

<link rel="stylesheet" href="styles.css">

Where styles.css is the stylesheet file.

On your html tags for example

<div></div>

You are able to add classes which links these tags/containers to a specific style in your style sheet. For example In HTML:

<div ></div>

the class "myclass" is the linker towards this in your stylesheet:

.myclass:
   color: red;

the full stop signifies that you are linking this to a class in the html, you can also do this with id="myid" and using a # instead of full stop, however i prefer to keep my ID purely for scripting use and classes for styling

Read more and learn a bit more about this at w3: https://www.w3schools.com/html/html_css.asp

CodePudding user response：

Html elements and class attributes are two different things. Both can be targeted using CSS.

For example:

<html>
  <body>
    <div class=“name-of-class”></div
  </body
</html>

There are three html elements (html, body and a div). And the div has a class attribute of “name-of-class”.

You can target the elements as well as the classes with css:

body {
  background-color: black;
}

.name-of-class {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

To target the elements simply write the name of the tag without brackets. And to target the element with the class add a period before name of the class.

If you change an element or class name on your HTML, make sure to update your CSS styles or file to match.

Hope this helps, if you still have doubts paste some of your code to give it a check out.