DEV Community

Mark Tony
Mark Tony

Posted on

HTML, CSS - Interview Questions

1. What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure web pages. HTML defines the different elements on a webpage, such as headings, paragraphs, images, links, buttons, tables, and forms. HTML provides the basic structure of a website, while CSS is used for styling and JavaScript is used for functionality.

2. What is CSS?

CSS stands for Cascading Style Sheets. It is used to style and design HTML elements on a webpage. With CSS, we can change colors, fonts, sizes, spacing, borders, backgrounds, and layouts. CSS also helps us make websites responsive, so they can work properly on different screen sizes like desktops, tablets, and mobile phones. We can use CSS with layouts such as Flexbox and Grid to arrange elements.

3. What are HTML Attributes?

HTML attributes provide additional information about HTML elements. They are written inside the opening tag and usually have a name and value. For example, in an image tag, src specifies the image location and alt provides alternative text. Other common attributes are id, class, href, style, and title. Attributes help us control or provide additional information about how an HTML element behaves or is identified.

4.What is CSS Grid?

CSS Grid is a two-dimensional layout system in CSS. It allows us to arrange elements using rows and columns. It is especially useful when creating complex webpage layouts. For example, we can create a layout with a header, sidebar, main content, and footer using Grid. We can define columns and rows using properties like grid-template-columns and grid-template-rows. Grid is useful when we need precise control over both horizontal and vertical layouts.

5.What is Flexbox?

Flexbox, or Flexible Box Layout, is a CSS layout system used to arrange elements in one direction at a time, either horizontally or vertically. It makes it easy to align, distribute, and resize elements within a container. Some commonly used properties are display: flex, justify-content, align-items, flex-direction, and gap. Flexbox is commonly used for navigation bars, buttons, cards, and other simple layouts.

6.What are Ordered and Unordered Lists?

HTML provides two common types of lists: ordered lists and unordered lists. An ordered list uses the <ol> tag, and its items are displayed with numbers or letters. An unordered list uses the <ul> tag, and its items are normally displayed using bullet points. In both cases, individual items are written using the<li> tag. Ordered lists are useful when the order is important, while unordered lists are useful when the order doesn't matter.

7.What are Main Axis and Cross Axis in Flexbox?

In Flexbox, there are two important directions called the main axis and cross axis. The main axis is the direction in which the flex items are arranged. The cross axis is perpendicular to the main axis. By default, Flexbox uses flex-direction: row, so the main axis is horizontal and the cross axis is vertical. justify-content generally controls alignment along the main axis, while align-items controls alignment along the cross axis.

8. What is Box Sizing?

box-sizing is a CSS property that determines how the width and height of an element are calculated. There are two common values: content-box and border-box. By default, the value is content-box, where padding and border are added to the specified width and height. With border-box, the specified width and height include the content, padding, and border. Many developers use box-sizing: border-box because it makes sizing elements easier and more predictable.

Top comments (0)