CSS Selectors

  • soulluciani01

    (@soulluciani01)


    10 years, 7 months ago

    Hi,

    I’m in the process of building a new site and there are a few things that are unclear to me. When I am in my web inspector looking for the element I would like to style, how do I know what class or id to use to style that specific element?

    For example, I am trying to change the color of the footer on my page, I inspected the element and I see this class div.be-section.clearfix I tried a bunch of different variations and have had no luck. I looked at the dom tree and tried a bunch of variations but nothing works.

    The site is http://iamtheram.com (its a work in progress) I am trying to change the color of the turquoise footer background.

    If someone could help me understand how to select classes and ids I would be very greatful.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • bemdesign

    (@bemdesign)

    10 years, 7 months ago

    A brief intro to CSS selectors:

    div{ color: red; } – styles all <div> html elements with red text.

    #main{ color: blue; } – styles all elements with the ID of ‘main’, i.e. any html element with the ‘id=”main”‘. Per the standards, there can only be one element on the page with that ID – basically an ID should be unique on that page. But IDs can be reused across pages.

    .nav-item{ color: green; } – styles all elements with the class of ‘nav-item’, i.e. any html element with ‘class=”nav-item”‘.

    For more CSS knowledge, there’s tons of information, tutorials, and training available on the internet.

    Thread Starter soulluciani01

    (@soulluciani01)

    10 years, 7 months ago

    I understand how to style elements. What I am trying to understand is when I am using my web inspector to find out what element to style how do I choose the proper element?

    In my example above I used what appeared to be the proper element but it didn’t work, I tried a ton of variations of that element and it still didn’t work.

    When in my inspector I went to the element and changed the color in my browser so I know it’s the right element but when I add the CSS to my style sheet nothing happens.

    bemdesign

    (@bemdesign)

    10 years, 7 months ago

    So to use the web inspector to select the right element – open up the developer tools (I’ll use Firefox as the browser example – translate to your preferred browser of choice).

    Click the ‘Pick an element from the page’ – looks like an arrow entering a box.

    Now inside the browser window click on the item you want to inspect.

    The item will be selected in the Inspector view (shows the source html code) and to the right, it will show all the CSS styles that are being applied to that particular element.

    Hope this helps.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Selectors’ is closed to new replies.

Tags