Table of Contents
- 1 Introduction
- 1.1 Question 1: What is CSS?
- 1.2 Question 2: What’s the difference between CSS and HTML?
- 1.3 Question 3: How can you apply CSS styles on a webpage?
- 1.4 Question 4: How many types of CSS are there?
- 1.5 Question 5: What’s a CSS ‘framework’?
- 1.6 Question 6: What is ‘element targeting’?
- 1.7 Question 7: How would you specify a color in CSS?
- 1.8 Question 8: What are ‘pseudo elements’?
- 1.9 Question 9: What are ‘pseudo classes’?
- 1.10 Question 10: How can you integrate CSS into a website?
- 2 CSS interview questions – Advanced
- 2.1 Question 1: Explain the concept of ‘specificity’.
- 2.2 Question 2: Explain ‘web-safe’ and ‘fallback’ fonts.
- 2.3 Question 3: What’s ‘file splitting’?
- 2.4 Question 4: What is ‘opacity’?
- 2.5 Question 5: Define a ‘rule set’.
- 2.6 Question 6: Define ‘universal selector’ and give an example.
- 2.7 Question 7: What do ‘class’ and ‘ID’ selectors pick when they are issued?
- 2.8 Question 8: What’s ‘float’ is CSS?
- 2.9 Question 9: What is a ‘Z index’?
- 2.10 Question 10: Why use import on the top of the file?
- 3 Tips for the Interview
- 4 Conclusions
IntroductionThis first part will mostly be made out of some basic and more general questions concerning CSS. These are going to be the types of questions that employers would ask you towards the beginning of the job interview, just to see if you even know what CSS is. On that note, let’s go straight to the first question.
Question 1: What is CSS?Cascading Style Sheets (most often simply referred to as CSS) is a language that is used to explain and describe the way that things that are written by markup languages (such as HTML) should be presented. Quite a mouthful, isn’t it? To put it simply, CSS is used to visualize the things that are written using HTML, such as images, fonts, backgrounds and so on.
Question 2: What’s the difference between CSS and HTML?You would be surprised how many people don’t actually know the difference between these two languages. The actual difference itself is quite simple: HTML is used to write and create content on the webpage, while CSS is used for the design part – this includes background designs, fonts, images, etc.
Question 3: How can you apply CSS styles on a webpage?In total, there are three ways you can apply styles by using CSS. The
linkcommand is the method that’s most used – you simply load another CSS file (with its attributes) into the one that you’re currently working on. This is very convenient because you’ll definitely be reusing the same files over and over again. You can also use the
styleattribute if you only want to alter one single element (you would use the attribute in the same line with the element), or you can simply use
styleon top of your HTML file, where
Question 4: How many types of CSS are there?In total, there are currently five types of CSS: CSS 1, CSS 2, CSS 2.1, CSS 3 and CSS 4. You are most likely to get a lot of CSS3 interview questions, for it is one of the most commonly used versions.
Question 5: What’s a CSS ‘framework’?
Question 6: What is ‘element targeting’?This is a good example of some of the CSS interview questions that you’ll probably get during your job interview – at least in the beginning. Asking to explain certain specific elements from a program or a programming language is common practice between employers around the globe. Element targeting is when you specify certain elements that you want to style or alter in any other way. In total, there are three ways you could do this – by tagging, class or by the ID of the element that you’ve specified in the HTML.
Question 7: How would you specify a color in CSS?There are two ways of specifying colors in CSS – the RGB one and the hexadecimal color code one. RGB stands for red, green and blue. Various different combinations of these colors (depending on the percentage of each one used) can create many different hues. A hexadecimal color code is a code representing a specific color. These codes are made up of six different letters and numbers (each combination represents a different color).
Question 8: What are ‘pseudo elements’?If a paragraph of text was your element, yet you would only want to style the first letter of that paragraph, you would have to use a pseudo element for this task. These elements are used by placing a double colon in front of the part of the main element that you want to style.
Question 9: What are ‘pseudo classes’?Pseudo classes work almost identically as pseudo elements, but the one main difference is that they alter the appearance of an element when it is in a specific state.
Question 10: How can you integrate CSS into a website?A final example of the more basic CSS interview questions, there are actually three ways you could achieve this task – inline, embedded and imported integrations. The inline method of integration is used to insert a CSS style sheet into an HTML document. Embedded allows you to insert unique styles into a single document, while the imported method lets you make changes on multiple documents.
CSS interview questions – AdvancedDon’t get intimidated by the word “advanced” in that subtitle. Advanced CSS interview questions simply mean that your interviewers are going to expect more detailed answers and explanations for their questions. By doing so, they are going to assess just how much you really do know about CSS.
Question 1: Explain the concept of ‘specificity’.This might be one of the trickier CSS interview questions because your employers might expect you to not only explain the concept itself, but to also rate the types of specificity in CSS. The concept itself simply means that certain CSS rules replace (override) others by being more specific. This is a tricky concept because it might cause some issues later on – employing too many high-specificity types of rules can make it really difficult when you actually see that you need to change something after you’ve finished working. There are three levels of specificity – type, class and ID. The type selector is of the lowest specificity, while the ID one is the highest.
Question 2: Explain ‘web-safe’ and ‘fallback’ fonts.When you try to pick fonts for your website, you should keep in mind that not every web browser can recognize all of the different varieties of fonts – this is where web-safe fonts come in. These fonts are the most commonly used and well-known ones, like Times New Roman, Arial or Calibri. If for some reason your web browser does not recognize these fonts (though that shouldn’t be the case), there are fallback fonts – these are the fonts that your browser will pick automatically for you.
Question 3: What’s ‘file splitting’?One of the more self-explanatory CSS interview questions, file splitting allows you to split your big files into smaller ones for the sake of helping the program run faster and smoother. In order to be able to split files, you are going to need a CSS preprocessor. The files can be split in any way that you want, but it is advisable to keep it tidy and think the splitting through. This will help you manage your website faster, without the need to wait for the excess style sheets to load.
Question 4: What is ‘opacity’?Out of all of the CSS interview questions and answers that you could think of, this one might seem like the easiest one – opacity in CSS is the level of transparency that an image possesses. Now, you might think: This isn’t even close to advanced CSS interview questions! Well, the catch here is that your interviewers might ask you to demonstrate how you can configure opacity with CSS. You may find an example of how to do that below:
Question 5: Define a ‘rule set’.
Question 6: Define ‘universal selector’ and give an example.Universal selectors are those who let you pick all of the files with the same name (no matter what type of an element it is) instead of picking out specifically typed ones. An example of a universal selector would be:
Question 7: What do ‘class’ and ‘ID’ selectors pick when they are issued?A class selector will pick an entire block of information, while the ID selector lets you pick a specific element that possesses a unique type of an ID number. We went over classes and IDs a bit earlier on, but this is truly one of the more important CSS interview questions. Knowing the differences and varying features between classes, types and IDs can be the turning point of any CSS-based job interview.
Question 8: What’s ‘float’ is CSS?The float property allows you to move images through a wall of text within your HTML document without actually breaking the text. Same as in Google Docs, the text is able to wrap around the image.
Question 9: What is a ‘Z index’?A Z index in CSS highlights any and all parts that are overlapping between your CSS styling file and the actual HTML document. Since overlapping is a common issue when styling and adjusting images in CSS, this is indeed quite useful.
Question 10: Why use
import on the top of the file?
importis most commonly used on the top of the file since there is a big fear of overriding already-existing sets of rules. By placing
importon the top, this issue is usually avoided.