The CSS questions covering almost all the basic and advanced CSS categories are explained with examples.
CSS is one of the most essential features of Web development. It is a language by which we can describe the appearance of web pages.
Whether you’ve learned HTML through online courses or at college, you need to impress at the interview to land that coveted job. We’ve prepared these common HTML interview questions and answers for beginners, to help you do just that. If you’ve got the answers for the basics and can show your interviewer that you know how to keep your skills up to date, you’ll increase your chances of landing that job exponentially.
Let’s Start!!
Q 1) What is CSS?
CSS outlines the style of an HTML webpage. It is a language by which we can set the behavior of an HTML webpage. It describes how the HTML content will be shown on screen.
CSS controls the layout of several HTML web pages. CSS is referred to as the Cascading Style Sheet.
Q 2) Name all the modules which are used in the current version of CSS.
There are several modules in CSS as stated below:
- Selectors
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Animations
- Multiple Column Layout
- User Interface.
Q 3) Distinguish between CSS2 and CSS3.
The differences between CSS2 and CSS3 are as follows:
- CSS3 is divided into two various sections which are called a module. Whereas in CSS2 everything accedes into a single document with all the information in it.
- CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser.
- In CSS3, we will find that many graphics related characteristics have been introduced like Border-radius or box-shadow, flexbox.
- In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.
Q 4) Cite different types of CSS.
There are three types of CSS as mentioned below:
- External: These are written in separate files.
- Internal: These are cited at the top of the web page code document.
- Inline: These are written right next to the text.
Q 5) Why is the external style sheet useful?
External style sheet is very useful as we write all the styling codes in a single file and it can be used anywhere by just referring to the link of that external style sheet file.
So, if we do any changes in that external file, then the changes can also be observed on the webpage. Thus we can say that it is very useful and it makes your work easy while working on larger files.
Q 6) What are the uses of an embedded style sheet?
Embedded style sheet gives us the privilege to define styles in one place in an HTML document.
We can generate multiple classes using an embedded style sheet to use on multiple tag types of a web page and also there is no extra downloading required for importing the information.
Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
font-family: georgia, serif;
font-size: x-large;
color:#ff9900;
}
a:hover {
color: LimeGreen;
text-decoration: none;
}
</style>
</head>
<body>
<p>Embedded style sheet gives us the privilege to define styles at one place in a HTML document.
We can generate multiple classes using embedded style sheet to use on multiple tag types a web page
and also there is no extra downloading required importing the information.
</p>
</body>
</html>
Q 7) How to use CSS selector?
By using the CSS selector, we can choose the content which we want to style so that we can say that it is a bridge between the style sheet and the HTML files.
The syntax for CSS selector is “select” HTML elements created on their id, class, type, etc.
Q 8) Explain the concept of Tweening.
Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image.
It is mainly used for creating animation.
Q 9) Define CSS image scripts.
CSS image scripts are a group of images that are placed into one image. It reduces the load time and request number to the server while projecting multiple images into a single web page.
Q 10) Explain the term Responsive web design.
It is a method in which we design and develop a web page according to the user activities and conditions which are based on various components like the size of the screen, portability of the web page on the different devices, etc. It is done by using different flexible layouts and grids.
Q 11)What browsers support HTML5?
All modern browsers support HTML5, however some older browsers do not. Luckily, most browsers will simply handle the new elements as inline elements. You can then use CSS to change certain elements to be displayed as block-level elements where needed.
Q12) How do you apply CSS styles to a web page?
When you’ve got a good grasp of HTML, your interviewer may ask you some questions on how HTML works with CSS and JavaScript, to tie everything together. If you are planning on working as a front end developer, employers prefer some proficiency in all three languages.
CSS (Cascading Style Sheets) allows you to change the look of elements on the page, transforming it from a simple text document to a fully fledged website. We won’t go into too much detail on CSS here, but you can read our article on CSS interview questions for more.
There are three main ways to apply CSS styles to a webpage:
Inline styles
You can add a style attribute to almost any tag. Inside this attribute you can write your CSS rules.
<div style="background-color: red;">A container with a red background.</div>A style block
You are able to define one or more style blocks inside the head section of your HTML document. Inside these blocks you can write your CSS rules. You will have to specify which elements on the page you’d like to style. In the below example, we’re targeting the <body> tag and an element with a class attribute equal to .button.
<head>
<style>
body {
font-size: 16px;
}
.button {
padding: 10px;
}
</style>
</head>Link to a CSS file
By far the most recommended option is to link to a CSS file. This way you are able to keep the content (HTML) separate from the way you present that content (CSS). It also means you can use the same styles on multiple pages. To link to a CSS file, you will have to add a <link> tag to the <head> section in your document with an href attribute that specifies the location of the CSS file.
<head>
<link rel="stylesheet" href="styles.css">
</head>Q13) How do you apply JavaScript to a web page?
In order to add interactivity to your page, other than what’s already provided through HTML, you will need JavaScript. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three main ways of including JavaScript:
Inline
Certain HTML elements allow you to execute a piece of JavaScript when a certain event occurs. For example, a button allows you to run a script when you click on it. These events are accessed through attributes and differ based on the events that are available on each element. The following example shows an alert with a message when the user clicks on it.
<button onclick="alert('You clicked on me!');">Click me!</button>A script block
You can define a script block anywhere on the page, which will get executed as soon as the browser reaches that part of the document. Note that this can be inside the <head> or <body> section of your document.
<script>
var x = 5;
var y = 6;
var result = x + y;
alert(“X + Y is equal to " + result);
</script>Link to a JavaScript file
Again, as with CSS, this is the preferred way of including JavaScript. It allows you to keep the content of the page separate to how users interact with that content, and it allows you to load the same script on multiple pages. As with the script block, you can load a JavaScript file from the <head> or <body>, but keep in mind it will be loaded in the order you’ve structured your document.
<script src="my-code.js"></script>Q 14) What is HTML?
The odds are that you won’t be asked this directly, but it can’t hurt to remind yourself what HTML stands for: Hyper Text Markup Language. This means that an HTML document, written in plain text, is used to describe the structure and content of web pages, with links to other pages and resources. In its most basic form, you can define blocks of content, which are displayed depending on the type of block you used.
Q 15) What is the difference between HTML elements and tags?
Each part of a web page, such as a paragraph, an image, a link or anything else you can interact with, is an element. Each type of element has its own behavior – for example you can click on links, or type in text boxes.
Tags
An HTML document is a simple, plain text document, which you are able to open with any text editor on your computer. When you open one, you’ll see the document is made up of tags, which are keywords surrounded by angled brackets, each of which describes an HTML element. Here you can see HTML tags telling the browser how to render the text element inside:
<span>This text is surrounded by HTML tags!</span>Most tags have opening and closing tags. The opening tag is written with the tag name in angled brackets, like <tagname> whereas the closing tag adds a forward slash: </tagname>. Anything between these opening and closing tags is considered to be contents of that tag.
Some tags, like the <img> tag are self-closing. This means that they cannot have any content. For example, an image can’t contain additional HTML elements within it. The only way to change their behavior or appearance is through attributes or CSS.
<img src="https://placekitten.com/200/300" />Q 16) What are attributes and how do you use them?
Each tag can also have additional attributes, which change the way the tag behaves or is displayed. For example, an <input> tag has a type attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options.
Attributes are specified directly after the name of the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags – they can never be in closing tags. They are followed by an equals sign = and the chosen value in double quotes ". Take care not to include any spaces before and after the equals sign! Multiple attributes can be defined on a single tag, separated by a space.
<!-- Text field -->
<input type="text" />
<!-- Checkbox -->
<input type="checkbox" />
<!-- Radio button -->
<input type="radio" value="on" />There are some attributes that are available on every single tag – like the style attribute – however, most tags also have their own specific ones as those attributes simply wouldn’t make sense on tags of a different type (like an image source attribute on a paragraph tag).
Q 17) When should you use comments?
Sometimes it can be useful to add code comments to your HTML document. These will not be displayed in the browser, but they can be useful to leave notes for yourself and other developers as to what a section of HTML is for. The start of the comment is denoted by <!-- and the end is marked by -->. Anything in the middle will be completely ignored, even if it contains valid HTML.
<!-- This is a comment! -->
<!-- Comments can
span multiple
lines too -->
<!-- All of this is ignored. Even valid HTML like this: <span>Ska—doosh!</span> -->While comments are useful, try to keep them to a minimum. Only use them when something is not quite clear enough, or else your documents will become more ‘comment’ than code!
Q 18) What’s the difference between a block-level element and an inline element?
Each element in HTML is displayed in one of a few ways. By default, most tags are either displayed as block-level or inline. This value can be overridden using CSS.
Block
As the name suggests, a block-level element is drawn as a block that stretches to fill the full width available to it (the width of its container) and will always start on a new line.
Examples of elements that are block-level by default: <div>, <img>, <section>, <form>, <nav>.
Inline
Unlike the block-level elements, inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page. When a line of text gets to the end of the space available, it wraps onto the next line and happily keeps going. If you were to tack more text onto an existing line of text, it will stay on the same line, as if it was all part of the same text to begin with.
Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.
Q 19) Do you know what these tags are used for?
There are a lot of different HTML elements, which can be a little overwhelming. Luckily, they are also generally pretty intuitive! To help you prepare for a pop quiz in your next interview, we’ve organized some of the most common elements in sections below:
Text
| Tag | Description |
|---|---|
| p | Paragraph block. Has margin above and below by default. |
| span | Inline text, no distinguishing styling by default. Generally used to style parts of a block of text differently (e.g. underlined, different background or font) |
| a | Anchor or link. The href attribute defines where it takes you upon clicking it. This can be a reference point on the same page or a different page. |
| button | A clickable element styled differently depending on the browser and operating system (e.g. Windows, Mac, Linux) used, though these can be overridden. What happens upon click is up to you to decide! |
| strong, b | Renders a piece of text bold. |
| i | Renders a piece of text italic. |
| h1, h2, …, h6 | These are headings of different levels. For example, you would generally have a single h1 tag, which can have multiple h2 tags inside of it. Each of those in turn can have multiple h3 tags inside them, and so on. |
| br | Denotes a line break. HTML ignores white space in your code when it becomes more than a single space. Therefore, to break text onto a different line, you can use this tag. Alternatively, you could put the different pieces of text in two separate block-level elements. |
Layout
| Tag | Description |
|---|---|
| div | This is your basic container element. It is a block-level element but has no additional styling by default. |
| ul | This stands for unordered list, also known as a bulleted list. Inside the ul element you can have any number of li elements. Using CSS you can define whether it displays as bullet points, empty circles or squares. |
| ol | Stands for ordered list. Each item inside this list will have an incremented number or symbol beside them (e.g. 1, 2, 3 or a, b, c). The symbols can be numbers, letters or roman numerals. |
| li | Stands for list item. These live inside ul or ol elements. Each li is a separate item in the list, denoted by bullet point, number or any other symbol chosen by you. |
| table | Sometimes you need to display related data in a table format. Hurray for tables! Just be sure not to use them for your page’s layout, or you might get a phone call from the 90s. |
| tr | Used to define table rows inside table elements. |
| td | Used to define table cells inside tr elements, which in turn are inside a table element. |
| thead | Optional (but recommended) part of your table. Use it to group a table row (tr) that contains the column titles of your table. |
| tbody | Like thead, this is optional. If you have a thead in your table, you should also include a tbody. It should contain all rows that are not in your thead. |
| section | Behaves like a div but it’s used to mark a specific section of a page. Each section can have its own h1 tag, whereas normally you should only have one h1 per page. Introduced in HTML5. |
| nav | Behaves like a ul but specifically for navigation items. Introduced in HTML5. |
Visual
| Tag | Description |
|---|---|
| img | Used to show images on your page. Use the src attribute to specify which file you’d like it to load. |
| video | Like img, this is used to display video on your page. If you don’t want to embed video from another source (like YouTube or Vimeo), then this is your best bet. Use source tags with the src attribute inside the video tag to specify which file to load, including backup options with different file types. Just make sure your video is small in file size or you might get some angry emails. You can specify whether you want it to show video controls (like a play/pause button) and whether it autoplays. Older browsers do not support this. |
| audio | Similar to the above elements, but of course this only loads audio. As with the video element, this will display audio controls if you specify so. As before, use source tags with the src attribute inside the audio tag to specify which file to load, including backup options with different file types. |
Forms
| Tag | Description |
|---|---|
| form | As the name suggests, this creates a form. Every input element inside a form tag belongs to that form. The action and method attributes are used to specify what to do when submitting the form. |
| input | These elements are very versatile and can take on many forms using the type attribute, from text fields and radio buttons, to date fields and Submit buttons. |
| textarea | These are larger than simple text fields and allow the user to enter line breaks as well. The size can be adjusted. |
| label | This defines a label for an input element. When using the for attribute, this can be clicked on to select its associated input field. |
| select | Your classic dropdown. Each item inside the dropdown list is defined using the option tag, nested inside the select tag. You can of course have many option tags inside a select. |
| option | An individual item in a dropdown list. |
Q 20) How is an HTML document structured?
DOCTYPE tag
While each page is different, there are a few rules around the overall structure of the HTML document. Let’s look at the structure below:
DOCTYPE is a special tag and must be the first one in an HTML document. It tells the browser what version of HTML you want to use. You can read more about this and the latest version (HTML5) in the next section. For now, you’ll likely want to use the following:
<!DOCTYPE html>HTML tag
Next, we have the <html> tag. Each document only has one <html> tag, and it serves as a ‘container’ for the rest of the page’s elements. You will place the rest of your html code for the page within the <html> tag.
<html>
<!-- The rest of your code -->
</html>Head tag
The first element inside the <html> tag is the <head> tag. Content inside this tag is only meant for the browser and is not visible on the page directly. Among other things, it contains the title of your page (as shown in your browser tab), the character set used to display content and more metadata (meaning data about data). This is also where you define CSS and load some JavaScript (more about that later).
<head>
<title>The title of your page</title>
<meta charset="UTF—8">
<meta name="description" content="A description of your page">
</head>Body tag
After the <head> tag, still inside the <html> tag, we have the <body> tag. It contains all the content that’s displayed in the browser.
<body>
<h1>Welcome to my website!</h1>
<p>This is where I'll put some content :)</p>
</body>All together now
With all of the above rules combined, we get something like this:
<!DOCTYPE html>
<html>
<head>
<title>The title of your page</title>
<meta charset="UTF-8">
<meta name="description" content="A description of your page">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is where I'll put some content :)</p>
</body>
</html>Q 21) What do you know about HTML5?
Throughout the history of the internet, there have been many versions of the HTML standard. The versions varied in features and how strict they were. In 2014, the official recommendation for HTML5 by the World Wide Web Consortium was released. It is a living standard, meaning new features can be added over time.
🎥 Your FREE eLEARNING Courses (Click Here)
Related Courses
Software Engineering-I HTML + CSS Practice Exam in Islamabad, Pakistan
MS Office – Excel Word PowerPoint Jobs Interview Question And Answers in Karachi, Pakistan, Dubai
