Chapter 1. Once
I wanted to add a specific class to every div, but all the tutorials out there tell you to use classes inside style sheets. I want to do it in a separate stylesheet.
I want to set it to:
* width: 100%
* height: auto
* margin-bottom: 20px
I cannot use an id, because I do not want it to be unique.
Is this possible?
(I am not using Django, I am just using PHP and HTML.)
The code I have now is:
I am not sure if I should put all the above in one .css or if it is better to keep it in one div. This does not work for me.
A:
You should use css to identify the element's type and id when you know it.
So you can use:
div.intro {
width: 100%;
height: auto;
margin-bottom: 20px;
}
#about {
height: auto;
width: 80%;
margin-bottom: 20px;
background-color: #e8612b;
}
Or if you like, you can use classes.
div.intro {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.about {
height: auto;
width: 80%;
margin-bottom: 20px;
background-color: #e8612b;
}
A:
#about {
height: auto;
width: 80%;
margin-bottom: 20px;
background-color: #e8612b;
}
This selector is working for the div element that has an id equal to about.
If you want to target ALL the divs with the class about you can use the following selector:
.about {
height: auto;
width: 80%;
margin-bottom: 20px;
background-color: #e8612b;
}
A:
if you want to target all of them
#about {
height: auto;
width: 80%;
margin-bottom: 20px;
background-color: #e8612b;
}
if you want to target only one of them (in your case it will be the first)
.intro {
height: auto;
width: 100%;
margin-bottom: 20px;
}
if you want to target some of them (in your case it will be all)
.intro, #about {
height: auto;
width: 100%;
margin-bottom: 20px;
}
And if you want to target only one inside another:
.intro .intro {
height: auto;
width: 100%;
margin-bottom: 20px;
}
Hope that will be helpfull
NOTE:
For the latter example I want to say that .intro is not a valid selector. You need to use .intro .intro if you want to apply a style for divs inside another div named intro (inside div named intro), but there are some ways to solve this.
One of them is add this styles in the parent div of all the inner divs (so all the inner divs are inside the same wrapper), like that:
.wrapper .intro {
height: auto;
width: 100%;
margin-bottom: 20px;
}
and then apply all your styles to wrapper like this:
//some contents
//some other contents
I hope this will be helpfull
EDIT:
You can try this:
.intro {
height: auto;
width: 100%;
margin-bottom: 20px;
}
#about {
height: auto;
width: 80%;
margin-bottom: 20px;
background-color: #e8612b;
}
If I'm not wrong the width: 100% will add a margin-left and margin-right to each div and will set the width to the sum of this values: the width of the content + margin-left and margin-right.
I just find out that this behaviour is also causing that my text-align: center; text-align: center; does not work inside of the #about element even if my #about has the property text-align: center;
If this is the behaviour you are looking for, this is the code that will remove it:
.intro {
height: auto;
width: 100%;
margin-bottom: 20px;
}
#about {
height: auto;
width: 80%;
margin-bottom: 20px;
background-color: #e8612b;
}
.wrapper {
text-align: center;
}
//some contents
//some other contents
This way, text-align: center; will work inside of the #about div. However, I must say this is not the best way to do this, since it is possible that some user can put some css rule to override the text-align: center; behaviour
