Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to target headings for a specific div ID?

I am trying to style all the headings in my header with a different font-family than the headings on the rest of the page but I am having trouble getting the style to only apply to the specific header ID.

Here is what I tried:

#header h1,h2,h3,h4 {
    font-family:'Helvetica';
}

But this causes all h1/2/3/4 tags to use the Helvetica font regardless of if they are in the header div or not. I'm sure I am missing something simple, can anyone help? Thanks!

like image 839
user3101431 Avatar asked Jan 10 '14 18:01

user3101431


People also ask

Can we give ID to heading tag?

The id attribute assigns an identifier to the <header> element. The id allows JavaScript to easily access the <header> element. It is also used to point to a specific id selector in a style sheet. Tip: id is a global attribute that can be applied to any HTML element.

How do you target an element inside an ID in CSS?

The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Can we give ID to div tag?

The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag!


2 Answers

I think you must do so:

#header h1,#header h2, #header h3, #header h4 {
    font-family:'Helvetica';
}
like image 51
chris Avatar answered Oct 19 '22 15:10

chris


You need to target all hN with the ID.

#header h1, 
#header h2, 
#header h3, 
#header h4 {
    font-family:'Helvetica';
}

See Fiddle

like image 21
putvande Avatar answered Oct 19 '22 15:10

putvande