Can I connect a css style to a specific section?

I have a question. Copied 3 sections from another site. Want to put on your, when you connect the css file interrupted my styles. So is there any way to connect it to a specific section? Or maybe there are other options. Two days already scratching their head, styles interrupted and all, can not do anything... thanks in Advance for your answers.
March 19th 20 at 08:37
2 answers
March 19th 20 at 08:39
Solution
is there any way to connect it to a specific section?

Two days already scratching their head

And to specify the desired item id is not? And in styles to specify the same.
And how to understand where there is a conflict with my styles to put on these styles of id? Sorry for stupid questions, in the development of the recently. - Hanna33 commented on March 19th 20 at 08:42
@Hanna33,
And how to understand where there is a conflict with my styles

<section id="mysection"></section>
#mysection /*selector, if necessary*/ {
/*styles*/
}
- Marley.Frami75 commented on March 19th 20 at 08:45
Did as you wrote, this does not translate into a cascade id mysection. What am I doing wrong?(
@Marley.Frami75,
#mysection {

section{display: block;
}

a
{
 background-color: transparent;
 -webkit-text-decoration-skip: objects;
}

img
{
 border-style: none;
}

*,*:before,*:after
{
 box-sizing: inherit;
}

.row:after
{
 content: "";
 display: table;
 clear: both;
}

.h3
{
 font-size: 2.25 rem;
 margin: 1.2 rem auto;
}

p
{
 margin: 1rem auto;
 line-height: 1.5;
}

h6
{
 font-size: 1.25 rem;
 margin: 1rem auto;
 font-weight: normal;
}

a
{
 text-decoration: none;
 outline: none;
 transition: all 0.4 s;
 -webkit-transition: all 0.4 s;
 -o-transition: all 0.4 s;
 -moz-transition: all 0.4 s;
}

a:hover
{
 text-decoration: none;
 transition: all 0.4 s;
 -webkit-transition: all 0.4 s;
 -o-transition: all 0.4 s;
 -moz-transition: all 0.4 s;
}

a.link
{
 color: #2e2e2e;
 text-decoration: underline;
}

.text-center
{
 text-align: center;
}

.col
{
 float: left;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 0;
 min-height: 1px;
}

.col.x5
{
 width: 20%;
}

.container
{
 margin: 0 auto;
 max-width: 1190px;
}

.title
{
 text-transform: uppercase;
 font-weight: bold;
}

.row
{
 margin: 20px auto;
}

section
{
 min-height: 200px;
 padding: 50px 0;
}

section.why
{
 margin-bottom: 100px;
 padding: 0;
}

section.why .h3
{
 margin-bottom: 100px;
}

section.why .why-icons .why-icon .line
{
 border: 2px #ffcf01 solid;
 width: 50%;
 margin: 0 auto 1rem;
}

section.why .why-icons .why-icon .why-icon-desc
{
 padding: 0 1.5 rem;
}

section.why .more
{
 display: none;
 text-align: left;
 margin-left: 82px;
}
} 

@media only screen and (max-width: 1190px)
{
.container
{
 max-width: 1000px;
}

section.why
{
 margin-bottom: 0;
}

 section.why .why-icons .why-icon .title
{
 width: 145px;
}
}

@media only screen and (max-width: 1023px)
{
section
{
 padding: 10px 0 20px;
 background-attachment: scroll!important;
}

.h3
{
 font-size: 1.875 rem;
}

.container
{
 max-width: 620px;
}

 section.why .h3
{
 margin-bottom: 50px;
}

 section.why .why-icons .why-icon
{
 width: 50%;
 height: 260px;
}

 section.why .why-icons .why-icon:last-child
{
 width: 100%;
}

 section.why .why-icons .why-icon:last-child .line
{
 width: 155px;
}

 section.why .why-icons .why-icon:last-child .why-icon-desc
{
 width: 310px;
}
}

@media screen and (max-width: 639px)
{
.container
{
 max-width: 90%;
}

 section.why .container .row .row .why-icon img
{
 width: 58px;
 float: left;
}

 section.why .container .row .row .why-icon h6
{
 margin-left: 77px;
 font-size: 1.1 rem;
 width: 205px;
 text-align: left;
}

 section.why .container .row .row .why-icon .line
{
 margin-left: 78px;
 width: 80px;
}

 section.why .container .row .row .why-icon .why-icon-desc
{
 margin-left: 77px;
 width: 193px;
 text-align: left;
 padding: 0;
}

 section.why .container .row .row
{
 margin: 20px 5px;
}

 section.why .container .row .row .why-icon:nth-child(3)
{
 display: none;
}

 section.why .container .row .row .why-icon:nth-child(4)
{
 display: none;
}

 section.why .container .row .row .why-icon:nth-child(5)
{
 display: none;
}

 section.why .more
{
 display: block;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
}

 section.why .container .row .row .why-icon.col.x5
{
 float: none;
 width: 50%;
 height: auto;
 margin: auto;
}
}

@media screen and (max-width: 500px)
{
 section.why .container .row .row .why-icon.col.x5
{
 width: 100%;
}
}
- Hanna33 commented on March 19th 20 at 08:48
@Hanna33,
this cascade does not turn

You really are too lazy to Google, Yes? CSS nesting selectors like this is not working. Try and use some kind of preprocessor or handles #mysection attribute at the start of each selector )) - Marley.Frami75 commented on March 19th 20 at 08:51
@Marley.Frami75, Bad Google, apparently, thank you very much, I will try - Hanna33 commented on March 19th 20 at 08:54
March 19th 20 at 08:41
!important

Find more questions by tags LayoutHTMLCSS