.png)
Mobiprep has created last-minute notes for all topics of CSS to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on CSS.
Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.
Lecture
Question 1 - What is CSS?
Answer - CSS stands for Cascading Style Sheets with an emphasis placed on “Style.” Cascading Style Sheets (CSS) is a markup language responsible for how your web pages will look like.
CSS comes through and specifies document’s style—page layouts, colors, and fonts are all determined with CSS.
Question 2 - What are the different ways in which the CSS stylesheet can be inserted into the HTML Document?
Answer - There are three ways you can use to implement CSS: internal, external, and inline styles. Let’s break them down.
Internal CSS
Internal or embedded CSS requires you to add <style> tag in the <head> section of your HTML document. This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules to every page of your website.
External CSS
With external CSS, you’ll link your web pages to an external .css file, which can be created by any text editor in your device (e.g., Notepad +).This CSS type is a more efficient method, especially for styling a large website. By editing one .css file, you can change your entire site at once.
Inline CSS
Inline CSS is used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using selectors.This CSS type is not really recommended, as each HTML tag needs to be styled individually. Managing your website may become too hard if you only use inline CSS.However, inline CSS in HTML can be useful in some situations. For example, in cases where you don’t have access to CSS files or need to apply styles for a single element only.
Question 3 - What are the advantages of using External Style Sheets?
Answer - Advantages of using external style sheets are as follows :
Since the CSS code is in a separate document, HTML files will have a cleaner structure and are smaller in size.
It can use the same .css file for multiple pages.
Question 4 - Distinguish between embedded style sheet and external style sheet.
Answer - Embedded Styles
Embedded styles are set in the HEAD section of your web page. Similar to an inline style rule, embedded styles allow you to override the rules of an external style sheet. The difference is that with an embedded rule, you don't have to create a rule with each use of an HTML element. An H1 heading given the color red in an embedded style rule will render the H1 heading in red every time you use it on the page without having to code the rule into each heading tag as you must do with inline rules or with HTML attributes.
External Styles
External styles (sometimes called linked styles or remote styles) are the least important in the cascading order*, but the most powerful! An external style is simply a link placed in the HEAD section of your web page to a separate file containing your style rules. The primary advantage of using external styles is thatyou can change that one external file, and have that change reflected on every page of your site that links to the external CSS file. Any or all methods of implementing CSS can be used on the same page.
Question 5 - What are the different models used in CSS?
Answer - When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
Question 6 - Define Padding.
Answer - The padding property in CSS defines the innermost portion of the box model, creating space around an element’s content, inside of any defined margins and/or borders.
Question 7 - What are the padding properties in CSS?
Answer - Padding properties in CSS are as follows :
The padding-bottom Property: The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.
The padding-top Property: The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.
The padding-left Property: The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.
The padding-right Property: The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.
The Padding Property: It is a shorthand padding property that sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.
Question 8 - What are the margin properties in CSS?
Answer - The CSS margin property can be expressed with one, two, three or four values provided. And each value can be expressed as either a fixed value or as a percentage.
One Value:
The syntax for the CSS margin property (with 1 value) is:margin: all; When one single value is provided, the margin value will apply to all four sides of the element (ie: top, right, bottom, left).
Two Values:
The syntax for the CSS margin property (with 2 values) is:margin: top_bottom left_right; When two values are provided, the first value will apply to the top and bottom of the element. The second value will apply to the left and right sides of the element.
Three Values:
The syntax for the CSS margin property (with 3 values) is:margin: top right_left bottom; When three values are provided, the first value will apply to the top of the element. The second value will apply to the right and left sides of the element. The third value will apply to the bottom of the element.
Four Values:
The syntax for the CSS margin property (with 4 values) is:margin: top right bottom left; When four values are provided, the first value will apply to the top of the element. The second value will apply to the right side of the element. The third value will apply to the bottom of the element. The fourth value will apply to the left side of the element.
Question 9 - What are the CSS height and width properties?
Answer - CSS height and width properties are explained below:
1) max-height and max-width Properties:
Enables you to constrain the height and/or width of an element to a maximum value.
Example :
<!DOCTYPE html>
<title>Example</title>
<style>
div {
max-height: 150px;
max-width: 75px;
background-color: gold;
}
</style>
<div> This div has 'max-height' and 'max-width' applied. </div>
2) min-height and min-width Properties:
Enables you to constrain the height and/or width of an element to a minimum value.
Example :
<! DOCTYPE html>
<title>Example</title>
<style>
div {
min-height: 150px;
min-width: 75px;
background-color: gold;
}
</style>
<div> This div has 'min-height' and 'min-width' applied. </div>Question 10 - Explain the basic CSS syntax.
Answer - The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value.
Syntax:
selector { property: value }The selector represents the HTML element that you want to style.
Example:
h1 { color: blue } This code tells the browser to render all occurences of the HTML <h1> element in blue.
Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a comma.
h1, h2, h3, h4, h5, h6 { color: blue }
Applying Multiple Properties
o apply more than one property separate each declaration with a semi-colon.
h1 { color:blue;
font-family: arial, helvetica, "sans serif"}
Readability
You can make your CSS code more readable by spreading your style declarations across multiple lines. You can also indent your code if you like. This doesn't affect how your code is rendered - it just makes it easier for you to read.
H1 {
color: blue;
font-family: arial, helvetica, "sans serif";
font-size: 150%;
}