DEV Community: Anshul Kumar

An introduction to CSS Selectors

Anshul Kumar — Mon, 15 May 2023 07:01:44 +0000

CSS

CSS stands for Cascading Style Sheet, CSS is used to style the webpage which is structured using HTML.

CSS Selectors

While styling the HTML page we often have to select the different parts of the page, we select parts of the page by using selectors. Selectors can be of different types such as ID selector, universal selector, class selector, etc.

Types of Selectors

There are many types of selectors but in this article we are going to focus only on the most used ones.

Universal selector The Universal selector targets all the elements of the HTML document. Universal selector is used using the * symbol only.

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

ID selector The ID selector can target an HTML element with the specified ID attribute, and an element with ID is selected using the # symbol as a prefix. The ID selector can only be used only once in an HTML document.

#idName {
    /* this will seleect the id named idName */
}

Class selector The class selector can target an element with the given class attribute. The element with the class selector can be selected using the . symbol.

.className {
    /* this will select the class named className */
}

Individual selector The Type selector targets only the selected element of the HTML document. A individual selector is used using the element name. For example -

p {
    /* this will select the <p> element */
}

img {
    /* this will select the <img> element */
}

Now we will look at some CSS Combinators -

CSS Combinators are the relationship between two or more selectors which we can combine according to our requirements

Descendant selector

The descendant selector selects all the children of the specified element. This selector is represented with a single space (" ").

Child Selector The Direct child selector selects only the direct child of the element. And it is represented with a ( > ) sign.

ul > li {
    /* this will select all the <li>
    elements which are the direct children
    of the list */
}

Adjacent sibling selector The sibling selector will target the immediate next element of the specified element which share the same parent. This selector is represented with a ( + ) sign

img + p {
    /* this will select the immediate next <p>  
        element which is next to the
       <img> element  */
}

General Sibling Selector This type of sibling selector will target all the next sibling elements of the specified elements, which share the same parents. This selector is represented with a ( ~ ) sign.

img + p {
    /* this will select the all the <p>
        elements which are next to the
        <img> element  */
}

CSS Grid

Anshul Kumar — Thu, 13 Apr 2023 10:56:31 +0000

CSS Grid Layout

Grid or CSS Grid is a layout system which uses rows and columns to to design the web page layout, it is also called two-dimensional layout because of the usage of rows and columns together. With grid layout system it is very easy to design the web page layouts, because before grid, the float and positioning system was used to design web pages and that weren't doing a very good job because for example the aligning items together in center wasn't an easy job.

CSS Grid basics

The HTML layout used in this article.

<body>
    <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
   </div>
</body>

Grid Container

The parent div/element on which the display: grid property is applied is called grid container.

.parent {
    display: grid;
}

Grid Item

All the direct child divs/elements of the parent grid container are called grid items. In this case all the divs with class child are grid items.

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
 </div>

Grid Gap

The space applied between grid items is called grid gap.

 gap: 20px;

Grid Rows

The grid items aligned in the horizontal way are called grid rows.

Grid Columns

The grid items aligned in the vertical way are called grid columns.

Grid Area

The total space composed of rows and columns is called grid area.

Grid Lines

The dividing lines between rows and columns is called grid lines,
the lines dividing the columns are called 1. The column lines and the lines dividing the rows are called 2. The row lines.

CSS Grid properties

Now let's take a look at some widely used Grid properties.

column gap - Specifies the gap between columns of grid.
row gap - Specifies the gap between rows of the grid layout.
grid-row-start - Specifies the row line of a grid item's starting position.
grid-row-end - Specifies the on which row line the grid item will end and it also used to tell how much rows an item can span.
grid-column-start - Specifies the position of a grid item on the column line.
grid-column-end - Specifies the on which column line position the grid item will end and it also used to tell how much columns an item will span.
grid-area - This property is a shorthand for grid-row-start, grid-row-end, grid-column-start and grid-column-end.
grid-template-columns - This property tells that how many columns can be in the grid layout and also specifies the size of columns.
grid-template-rows - This property tells that how many rows can be in the grid layout and also specifies the size of rows.

Conclusion

In this article we learnt about the basics of the Grid system and some or the most used grid properties. But there is a lot to learn about grid than this. Hope you liked this article helpfull.

Input Elements in HTML

Anshul Kumar — Tue, 21 Mar 2023 14:04:26 +0000

The Input Element

The <input /> element in HTML is used to receive data from the user. The tag creates an area where the user can enter the data. There are several attributes which change the behavior of the input element based on the selected attribute. The input element is used with the HTML Form element. We can also use <label> element with input to associate a name with the input field.

The Label Element

The <label> element is used to label the accompanying <input /> element. The label is connected to the input element by using for attribute of the label element which contains the id for the input element. The label element also used to work with screen readers for accessibility purposes.

<label for="name">First name:</label>

General Syntax

<input type="text" id="name">

Some frequently used attributes of the input element.

Input type text

With type="text", you gets a filed in which you can enter some text. This is the most frequently used attribute, this is generally used for user-name field. The field type text doesn't mean that you can only insert text in the field.

<label for="txt">Type text</label>
<input type="text" id="txt">

Input type password

As the name suggests, this field is used to get the password from the user as an input. The difference between type="text" and type="password" is than when you enter your password or any text for the matter in the password field, the password is turned into star symbol or dots, depending on the browser so that others can't read your password.

<label for="pass">Type password</label>
<input type="password" id="pass" />

Input type number

In type="number", you can enter numbers by default, in some browsers e.g. in Firefox you can also enter text into this field. You can use certain attributes to define the value entered. E.g. step="20",min="10", max="110" etc. With these values the input box will take the number values from 10 to 110 with 20 numbers gap between.

<label for="num">Type number</label>
<input type="number" name="" id="num" step="20" min="10" max="110">

Input type checkbox

With type="checkbox" you get checkboxes which you can label with the label element. The checkbox have two states, checked or unchecked. The checkbox is unchecked by default.

<label for="red">Red</label>
<input type="checkbox" name="" id="red">

<label for="blue">Blue</label>
<input type="checkbox" name="" id="blue">

<label for="green">Green</label>
<input type="checkbox" name="" id="green">

Input type radio

In <input type="radio" />, you get radio buttons with accompanying options. The radio button have two states, selected or not selected. The checkbox is not selected by default .By default you can select any number of radio buttons you want just like the checkboxes, but you can change this behavior by giving the radio buttons with same name value. In the below code I've given name="colors" so I can select only one radio button at a time.

<input type="radio" name="colors" id="red" />
<label for="red">Red</label>

<input type="radio" name="colors" id=blue"">
<label for="red">Blue</label>

<input type="radio" name="colors" id="green" />
<label for="red">Green</label>

Input type range

In <input type="range" />, you get a slider, the slider have the values on it from 0 to 100. You can customize the number of steps by using the step attribute, for example in the code below the slider will move 10 steps at a time, like 0-10, 10-20 and so on.

<label for="range">10 step scale</label>
<input type="range" step="10">

Conclusion

There is a lot more I can write about the input element but in this article I've given you the basic introdunction of the input tag and some of the most common attributes which are used with the <input> element.

Hope you liked the article.