Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Selectors : Select by Element Name

An HTML element can be styled by selecting the element name (example: div, p, h1-h6, span, ul, li, img) and then setting a property and giving it a value.

Selecting by element name is often done during development to test results quickly. Things like the paragraph tag and headers are usually fine having their CSS defined this way. But when it comes to elements like list items or images - unless you want every single one of those on your website to have the same style, it would be best to not select these by element names but instead by a class id or class name.

Element Name Selectors

HTML

html element names

CSS

css select by element name

RESULTS

elements selected by class name

NOTE

When you define your CSS to select an element, keep in mind that it will select every element on the page (or website) with that name. Elements are defined once in the stylesheet (preferably the external style sheet) and then every element on the entire website can be changed by re-defining the properties in the stylesheet.

You can see by looking at the CSS that every item in the bullet list is set to lowercase even though it was written in uppercase in the HTML. The CSS will override how the text was written in HTML.

You can see by looking at the CSS that the IMG element is styled to have a green border with rounded corners around it and therefore all three images have the same style.


Do you believe you understand how to select elements by name? If yes, hit the next button below and continue learning more about CSS.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved