css issues

[MashalMohammed]

inline css is working fine for both bg image and color.

i cant put background image or background color, via home.css:

body
{
  padding-left: 0px;
  padding-right: 0px;
  background-color:#555555;
}

this too , not working: background-image:url(/assets/images/bg.bmp);

btw, me newbie

[ebeyabraham]

yeah the body class is not working for me too. You make a different class. Ex

#bodyBG
{
//Content
}

and then in the html tag you give < body id="bodyBG" >

[ParadoxZero]

@Poirot1729 while I am not exactly sure, #bodyBG makes styles an id, .bodyBG styles a class 😅

[bineeth923]

Try background-image:url("assets/images/bg.bmp");
Are you sure the linking this css file into the html is correct?

[bineeth923]

Using of id's and class wisely saves time a lot.

Id's are unique. They can be used only once in that HTML page (strictly speaking). Classes can be used at multiple times.

Like if you want to create a card like thing.. and if there are several sections,

HTML

<div id="section-1" class="card">
//some data
</div>
<div id="section-2" class="card">
//some data
</div>
<div id="section-3" class="card">
//some data
</div>

//... continues till .. say 20.

And for styling it, if one is using id's only then CSS

#section-1 , #section-2 , #section-3 , ... , #section-20{
   border : solid #555555 1px;
   padding : 1em 2em;
   margin : auto;
   border-radius : 5px;
   // rest..
}

With the use of class, it simplifies to CSS

.card{
   border : solid #555555 1px;
   padding : 1em 2em;
   margin : auto;
   border-radius : 5px;
   // rest..
}

Another advantage is that if you want to add one more section , just give it class "card" . No need of editing CSS everytime.

[MashalMohammed]

The ID Selectors You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

#black {
    color: #000000;
}

This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example:

h1#black {
     color: #000000;
}

This rule renders the content in black for only <h1> elements with id attribute set to black. The true power of id selectors is when they are used as the foundation for descendant selectors. For example:

#black h2 {
     color: #000000;
}

In this example, all level 2 headings will be displayed in black color when those headings will lie within tags having id attribute set to black.

Something I just read.

[MashalMohammed]

@bineeth923 tried background-image:url("assets/images/bg.bmp"); not working. Note that neither background-color:#555555; is working.

[bineeth923]

@MashalMohamed In html, there are no "errors" statements ..but only "invalid" statements IDs should be unique.. not must. Some of the problems that might arise if you use id multiple times

• Serious unexpected behaviour will occur when you use JS . Like getelementbyid() expects a object not a array

• Its confuses things.. because IDs are used to uniquely identify a element in a html page. Using multiple times same name doesn't make sense! For this purpose, classes are there. In your case, #black{..} should uniquely select only one element in that html page. You can use html validator of W3C to check the html page. There you can see the warning. But anyways the site will render.

Now you are just creating a static site, so there won't be much problem. But as the time progresses both editing and documentation of this site will be very difficult.

[bineeth923]

@MashalMohamed the html you are working with.. it's in pushed in GitHub right?

[bineeth923]

I just went through the project. The background-image:url("assets/images/bg.bmp"); doesn't worked because the home.css file is in the CSS folder and the img you want to access is in assets folder. The URL property works with relative addressing. Since the assets folder is not in CSS folder, you can't access that file from CSS. @MashalMohamed I recommend restructuring the project as its good practice to keep the style sheets and HTML separate.

[MashalMohammed]

I have tried absolute pathing. Doesn't work. @bineeth923 y isn't background-color working? Were you able to fix these 2 cases. If so, share the code.

[bineeth923]

In your body tag, an inline CSS is present style="background: url(assets/images/bg.bmp) fixed;" Instead of background property, try background-image there. Then add background-color property for body in css. It will work. NB: when you have background-image with repeat set (by default it is inherit, which in this case is repeat.), the background-color will not be seen as it comes behind the image.

<body style="background: url(assets/images/bg.bmp) fixed;"> The reason for not working with background-color in the CSS file is that background is a shorthand for all the properties related to the background (including background-image). Since CSS is last come serve type, default value inherit will be taken for background-image because the inline CSS loads last. Use developer tools of the browser. It comes handy for such scenarios.

I'm attaching a demo, check it out.

[ebeyabraham]

There is one more issue. We are using 2 css file for the same page, one from bootstrap and other one we made, that is why there is issues in CSS? Any workaround? Or should we merge it into the bootstrap css?

[bineeth923]

Cascading Style Sheets.

"Cascading" means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.

So @Poirot1729 , just load the bootstrap CSS first, then load your CSS file. And if you want to change any property of bootstrap's, then change it in your CSS.

Just for a note... even the simplest HTML document may have three or more style sheets associated with it including:

• The browser's style sheet
• The user's style sheet
• The author's style sheet