How to move some basic CSS styling to an external stylesheet-CodePudding

For a university project, I am creating a basic website. I used in-line styling to create the website but recently the subject coordinator changed the requirements so that we are only permitted to use an external CSS stylesheet. I've transferred most of my project across but I'm struggling with this div section (attached).

How can I convert this CSS styling so that it fits nicely into my CSS stylesheet. I'm not a coding expert by any means but it seems that maybe the multiple div entries in my CSS are overriding each other.

CodePudding user response：

Add a class attribute to the div

<div >
    <h1>Welcome to the Websystems</h1>
</div>

Now, In your external stylesheet add the following CSS

.my_class_name
{
    background-color:#000000;
    padding: 15px;
    text-align: center;
}

That's it!

CodePudding user response：

Are you familiar with CSS Selectors? There are a lot of ways to do this.

You can use a class or id to do this. You can set a class name for your div and in your css file style that div like this:

HTML

<div >
    <h1>Welcome to the WebSystem</h1>
</div>

CSS

.your-class-name {
    background-color: #000000;
    padding: 15px;
    text-align: center;
}