my inline CSS under a box (segment) of my webpage is affecting other parts of the same page

Question

I am using this software (Swiiit Website Builder) purchased by my company, im doing intranet page for my department (im a total learn on the job dude being tasked to do this) please help!

<style><!--
<html>
<head>
<style>

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0; 
    list-style-type: none;
}

a {
    float: center;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: #000080;
    padding: 0.6em 4.5em;
    border-right: 1px solid white;
}

a:hover {
    background-color: #0000cd;
}

li {
    display: inline;
}
--></style>

the style will affect other area of the page; how do i edit it?

i tried to understand this Apply different css stylesheet for different parts of the same web page but im still cracking my head...

I have amended according to the recommendation (see below) and turn out great!!! Thanks!! doesnt affect other parts of page now, but now the space between blocks of links are so wide apart when i launch the code... looks fine in preview mode though... please assist :)

.something ul { 
float: left;
width: 100%;
padding: 0;
margin: 0; 
list-style-type: none; 

}

.something li {
    display: inline;
}

.something a {
    float: center;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: #000080;
    padding: 0.6em 4.5em;
    border-right: 1px solid green;
}

.something a:hover {
    background-color: #0000cd;
}

<div class="something">
<ul>
<li><a href="#">Organisation</a></li>
<li><a href="#">XXX</a></li>
<li><a href="#">Organisational Chart</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<p><img style="display: block; text-align: center; vertical-align: top;" src="/wbn/slot/u3733/Org%20Chart.png" alt="" width="800" height="473" /></p>

What are the `` tags doing at the start and end of your snippet? — James Donnelly, Jan 06 '15 at 11:15

score 1 · Answer 1 · edited Jan 06 '15 at 12:03

1

Set class for every ul, a and li otherwise

<div class="something">
<ul>
<li>....</li>
<li>....</li>
</ul>
<a href="">...</a>
</div>

Give styles using the class name like,

.something ul { }
.something li { }
.something a { }

edited Jan 06 '15 at 12:03

Ulrich Schwarz

7,598
1
36
48

answered Jan 06 '15 at 11:42

Vignesh Bala

889
6
25

awesome thank as mentioned above... right now there is this issue of white space between the blocks... i understand that i could deploy the method mentioned in [link]http://css-tricks.com/fighting-the-space-between-inline-block-elements/[link] (adjust html or css) which one would be better in my case? – yennie Jan 23 '15 at 03:24

score 0 · Answer 2 · answered Jan 06 '15 at 11:16

0

Set specific class or id to the elements like

<a href=" " id="a">text</a>

You can style this a in your css by

#a{
style
}

answered Jan 06 '15 at 11:16

Akshay

14,138
5
46
70

when you said style a in my css, do you mean style it in my css sheet? or within the html coding area? – yennie Jan 22 '15 at 13:18
@yennie You can do it anywhere – Akshay Jan 22 '15 at 14:26

jbutler483 · Answer 3 · 2015-01-06T11:32:55.697

Rather than adding styling to your elements, add them to a class or id

class definition:

html

<div class="myClassIsReusableToAllWithThisClass"></div>

css

.myClassIsReusableToAllWithThisClass{
/*add styling to all which have a class called 'myClassIsReusableToAllWithThisClass'*/
}

ID definition:

html

<div id="uniqueID"></div>

css

#uniqueID{
 /*add styling to only one element*/
}

element definition: (what you're doing presently)

html

<div></div>

css

div{
 /*add styling to all 'div' elements*/
}

As @James Donnelly has already mentioned, you should also remove these:

<!--   and -->

as these are 'comments' in html, and will render all within them void/ go unnoticed by your browser.

DEMO:

#myID {
  color: red;
}
.myClass {
  background: blue;
}
a {
  font-weight: bold;
}

<div >I'm just a div</div>
<br/>

<div id="myID">I have a specific id</div>
<br/>
<div class="myClass">I have a specific class which is reusable to all with this class</div>
<br/>


<div class="myClass">I have the myClass class</div>
<br/>

<a>I'm an a tag with no class or id. But all 'a' tags will have this styling</a>

for the , i deleted them, closed and saved. then open to check... this stupid programme added it back again... — yennie, Jan 22 '15 at 13:19
@yennie: does that first style tag have a closing tag? since that very first style tag could be removed completely. — jbutler483, Jan 22 '15 at 13:27

my inline CSS under a box (segment) of my webpage is affecting other parts of the same page

3 Answers3

DEMO: