CODEWITHSUNDEEP
htmlcss
magicpana
magicpana

Reputation: 1

How to move some basic CSS styling to an external stylesheet

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.

Image

Upvotes: 0

Views: 79

Answers (2)

Afshar Sharifi
Afshar Sharifi

Reputation: 152

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 class="your-class-name">
    <h1>Welcome to the WebSystem</h1>
</div>

CSS

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

Upvotes: 1

Lokesh Suman
Lokesh Suman

Reputation: 503

Add a class attribute to the div

<div class="my_class_name">
    <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!

Upvotes: 1

Related Questions