Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
Good morning. I am starting with HTML but I did not find why we can use a few class names in one element like at this screenshot. Here's 3 class names in one element
You can have as many classes as you want, and they will show as long as there's a corresponding CSS declaration for it. If there isn't one, you can still assign class to the HTML
.square {
width: 120px;
height: 120px;
}
.blue {
color: blue;
}
.red {
background-color: red;
}
.bordered {
border: solid black 3px;
}
.round {
border-radius: 10px;
}
<div class="square blue red bordered round this-class-is-not-here">Hello there </div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 months ago.
Improve this question
I have this nested html
i want to access the second sibling, whose parent is div of class "x"
i tried using
.x div:nth-child(2) {
padding-bottom: 30px;
margin-bottom: 30px;
}
<div class="x">
<div>.....</div>
<div> The One i want to change it's style</div>
</div>
The code works.
Its working, please see below. I have also added a child selector > . But without that also it should work.
.x > div:nth-child(2) {
padding-bottom: 30px;
margin-bottom: 30px;
border: 1px solid red;
color:red;
}
<div class="x">
<div>.....</div>
<div> The One i want to change it's style</div>
<div>third div</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm currently stuck on a problem, I have tried using ".test" "#test" and "test" but nothing seems to select what I'm trying to work on. Below is the code I'm working on.
HTML
#test {
width: 40px;
height: 40px;
}
<div id="content">
<div id="test">
<img src="pictures/furniturepic1.jpg" alt="Furniture Picture" />
</div>
</div>
if your css file is linked properly with your html file. this one is going to work for you.
here is the css code:
div#content div#test {
width: 40px;
height: 40px;
}
or
#content #test {
background-color: blue;
width: 50px;
height: 50px;
}
both is going to work for you
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to create a partial border around these different font headings. How can i create these, please help. I have tried everything but nothing is working. Sorry, noob here
You can't do that with border-top: 10px but you can use pseudo elements like that:
div{
width: 150px;
height: 100px;
background-color: lightgrey;
border-bottom: 5px solid grey;
border-right: 5px solid grey;
}
div:before{
content: '';
width: 70px;
height: 5px;
background-color: grey;
position: absolute;
left: 90px;
}
<div></div>
To be more specific, add :after or :before on your div and add what I added on my example and you can change the height/width/color and make sure to add position:absolute and add some specific properties like top, left..., to position that line where you want.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
most modern sites have what I'm looking for. I want to be able to change the background of different areas of my site... like this for example: https://adwords.google.com/intl/en_uk/home/ Googles page goes from blue, to white to a different shade of white.
How do I do this?
Thanks in advance
What they do is create different sections, and set a different background-color per section.
div {
width: 100%;
height: 150px;
}
#section1 {
background-color: red;
}
#section2 {
background-color: blue;
}
#section3 {
background-color: yellow;
}
<div id="section1">Content for section 1</div>
<div id="section2">Content for section 2</div>
<div id="section3">Content for section 3</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Can some one explain the following css code I found in a web page and which element does the section.positioned affect?
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 500px;
box-shadow: 0 0 15px #333;
}
Part of web page code
<section class="">
<div class="container">
......
</div>
</section>
The section.positioned rule target an element like this:
<section class="positioned">
</section>
By changing the existing html section element's class from empty to "positioned", the section.positioned rule will apply to the element instead of the section rule.
Added:
What section.positioned really means is it target an element of type "section" which has a class named "positioned".
Further reading about css selectors:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
What does the dot mean in CSS?