Jump to content

Archived

This topic is now archived and is closed to further replies.

Leonardo da Vinci

class space

Recommended Posts

Leonardo da Vinci

Hi Guys,

 

Why some styles do not apply when but them in class space of any section ?

 

I tried to add font size and line hight to hightlight section and write this code in custom area :

.hltl {font-size: 25px; line-hight: 150%;}

and when I put (hltl) in class space of the highlight section , the line-hight applied but font-size dose not !

 

Please Can you tell my why this happens 

 

Thanks 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

This is because when you add a styling class, that class and its CSS get applied to the section and not the individual elements inside that section. So for you to increase the hightlight header and subheader text, you will need to do something like this:

 

.hltl {
.highlight-head {
  font-size: 25px;
  line-height: 150%;
}
}
 
So replace your custom CSS with the code above, then continue to keep the hltl in the styling classes field, you can do the same thing for the subheader too. Also, in your code line height is spelt incorrectly, you're missing an e in height

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Leonardo da Vinci

Ya , It's working now 

 

I rely thank you a lot , I learn much from your notes so  thanks again :)

 

You mean that when we have an object (any object) and this object has more then one element and we want to customize any element of these we should point what element we like to apply our customization on it 

 

.anyname { .element_name { font-size: 25px; line-height: 150%;} }
 
by the way how can I find the objects and their elements : like high light section has head and sub head ?
 
Thanks 

Share this post


Link to post
Share on other sites
Danny

No problem, happy to help!

 

What I mean is, when you add a class name to the styling classes field, that class gets added to the <section> tag, this means that if you want to simply add a background color then you can do this:

 

.red-bg { background-color: red; }

 

 

However, if you want to for example, change the font-size of the Highlight sections header text, you will need to do as I have done above. This process can be repeated any section. All you need to do is do the following:

 

.your-custom-class .element name { your CSS prooerties/values here } }

 

The elements class name can be found  by inspecting your HTML using your browsers developer tools. You can see the Highlight sections header and subheader classes here:

 

Header - http://d.pr/i/fbqA

Subheader - http://d.pr/i/SILO


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Leonardo da Vinci

Thanks , I understand now :)

Share this post


Link to post
Share on other sites
Danny

Cool.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×