DEV Community: vidhya murali

HTML and CSS

vidhya murali — Fri, 15 May 2026 03:14:34 +0000

SEMANTIC TAGS

A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: div and span - Tells nothing about its content.
Examples of semantic elements: img, table, article - Clearly defines its content.

CSS DISPLAY PROPERTY
The display property specifies the display behavior (the type of rendering box) of an element.

CSS Flexbox (Flexible Box Layout)

Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way.
Flexbox makes it easy to design a flexible and responsive layout, without using float or positioning.

A flexbox always consists of:

A Flex Container - The parent (container) element, where the display property is set to flex or inline-flex
One or more Flex Items - The direct children of the flex container automatically becomes flex items

CSS justify-content Property

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

CSS align-items Property

The align-items property specifies the default alignment for items inside a flexbox or grid container.

In a flexbox container, the flexbox items are aligned on the cross axis, which is vertical by default (opposite of flex-direction).
In a grid container, the grid items are aligned in the block direction. For pages in English, block direction is downward and inline direction is left to right.
For this property to have any alignment effect, the items need available space around themselves in the appropriate direction. Tip: Use the align-self property of each item to override the align-items property.

Reference : https://www.w3schools.com/html/html5_semantic_elements.asp

DAY 2- CSS

vidhya murali — Thu, 14 May 2026 03:25:43 +0000

What is CSS?

CSS is the language we use to style a Web page.
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

*CSS Syntax *:

A CSS rule consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

The CSS Box Model

In CSS, the term "box model" is used when talking about web design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
Every box consists of four parts: content, padding, borders and margins.

The image below illustrates the CSS box model

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

Reference : https://www.w3schools.com/css/css_background.asp

Day1 - HTML

vidhya murali — Wed, 13 May 2026 03:24:26 +0000

Hi all. Today I Learnt about HTML.

What is HTML ?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph".

What is Markup Language?

A markup language is a text-encoding system that uses tags or symbols to define the structure, formatting, or relationships within a document, allowing computers to interpret and display content properly. It separates content from presentation, defining elements like headings and links rather than performing logic.

What is Elements ?
The HTML element is everything from the start tag to the end tag with Content.

What is metaData ?

The tag defines metadata about an HTML document. Metadata is data (information) about data.
tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the tag (See "Setting The Viewport" example below).

Linux

vidhya murali — Mon, 11 May 2026 13:34:56 +0000

Hi all,

Today I learnt about Linux Basics.

what is Linux - Linux is a Free Open Source Operating System used in Servers, Laptops, Phones.

Why - Free to use, Secure , Fast and Lightweight, Customizable ,98% companies and developers using Linux.

Basic Linux Commands :

1, To check Current Directory - pwd
2,To list files - ls
3,To change Directory - cd
4,Go back - cd..
5,To create new Folder - mkdir
6,To create File - touch