CSS Selectors

Allan Sam — Sun, 16 Oct 2022 16:59:35 +0000

what is CSS selectors ?

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

-Simple selectors (select elements based on name, id, class)

Basic selectors

They select element/id/class. They are also used most often and easiest to remember.

Id selector: id It selects a given element.

<div id="app">
  <div class="container">
    <p class="hello">Hello</p>
  </div>
</div>

Element selector: element_name It selects any given element.

p { color: blue; }
div { color: magenta; }

Class selector: .class It selects all element containing given class name.

.hello {
  color: red;
}

ID selector: #id It selects the element containing given HTML ID.

#app {
  color: red;
}

Universal selector: * It selects all elements.

* {
  color: yellow;
}

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Attribute selectors :

This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:

a[href="https://example.com"]
{
}

I hope this blogs helps to understand CSS selectors.

How semantic elements are used in Html

Allan Sam — Sun, 16 Oct 2022 16:12:47 +0000

If your are already aware of semantic html then let me give you my view or if you are new to the idea how the semantic html work? Let's know about it.

What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.

Examples of semantic elements:

form
table
article

As you can see, these html elements provide explanation to the developer and browser what they do.

Examples of non-semantic elements:

_div and span _

Tells nothing about its content.

These are some of the examples of semantic and non-semantic elements in html.

In HTML, We can use the below semantic elements to describe the different parts of a page.

.header
.nav
.section
.article
.aside
.footer

HTML _header Element_

-The _header _element represents a container for introductory content or a set of navigational links.

A header element typically contains:

one or more heading elements {h1 - h6}
logo or icon
authorship information

HTML footer Element

-The footer element defines a footer for a document or section.

HTML_ nav_ Element

-The major block of navigation links is contained
within the nav element.
-It can include links to the same page as well as links
to different pages.

HTML _aside Element_

-The aside element defines some content aside from the content it is placed in (like a sidebar).Articles can be used to create blog posts, product cards, news articles, etc.

A footer element typically contains:

authorship information
back to top links

This how the sematic Element in Html does it's magic.

DEV Community: Allan Sam

CSS Selectors

How semantic elements are used in Html