HTML & CSS II Flashcards
How does CSS3 differ from CSS?
CSS3 is the most recent version of CSS. It has introduced a bunch of new tags to give a better user experience. Some of the features are rounded corners, animation, custom layouts, and media queries.
How does CSS3 support responsive web designing?
CSS3 has come up with a media query feature. It supports RWD (Responsive Web Design) and does help in making a website responsive.
What is a CSS selector?
A CSS selector is an expression following the CSS rules and is used to select the element we want to style. And, CSS selector syntax means how we write or use those selectors in the CSS editor.
What are the different types of CSS?
Below are the different types of CSS.
Embedded – It adds the CSS styles using the <style> attribute; Embedded CSS refers to the use of a <style> element within the <head> section of an HTML document.</style></style>
Inline – It adds CSS to the HTML elements; You use the style attribute within an HTML tag
Linked/External – It adds an external CSS file to the HTML document.
What is an ID selector?
The ID selector uses the “ID” attribute of the target HTML element to select it. The constraint to work is that the ID should be unique within a page so that the selector can point it out correctly.
To build an ID selector expression, start with a hash (#) character, followed by the id of the element.
What is Grouping in CSS3?
Grouping makes it possible to apply the same style to multiple HTML elements (Classes/Tag/ID) within a single declaration. It happens by specifying all the selectors separated by commas.
What are Child Selectors in CSS?
A child selector looks up for the child of some element. To form a child selector, we need two or more selectors separated by the “greater than” symbol.
Let’s take an example. We have a <ul> tag inside a paragraph. Here, <ul> is the child of the paragraph element. So, to apply the CSS styles, we can use the following syntax.
What is Webkit in CSS3? And why is it used?
Webkit is a core software component that is responsible for rendering HTML and CSS in browsers like Safari and Chrome. There are other similar rendering engines like Gecko for Mozilla, Presto for Opera, and Edge for IE.
What is CSS Box Model and what are its components?
The CSS Box Model represents a box that confines every HTML element such as a text box, a menu, or a button. It has primarily four core components.
Margin – It refers to the topmost layer of the box.
Border – The padding and content options work around the Border. Changing the background color can also affect the Border.
Padding – It defines spacing around the box.
Content – It represents the actual content to be shown.
What are media queries in CSS3 and why do you use them?
Media queries are one of the latest features of CSS3 used to define responsive styles for devices of different shapes and sizes.
They are powerful CSS tool that makes it easy to create a responsive design for tablets, desktop, and mobile devices. They can help to adjust the Height, Width, Viewport, Orientation, and Resolution
What are Pseudo-Classes in CSS?
A Pseudo-Class is a CSS technique to set the style when the element changes its state.
For example
Edit the style upon mouse hover event.
Set the style when an element gets focused.
Apply different styles for visited/unvisited links.
What is the use of float property in CSS?
With the help of the float property, we can control the position and layout of elements on a web page.
For example, it can define the placement of a <div> either to the right or left side.
Which property do you use to modify the face of a font in CSS?
First of all, please note that both the terms <@font-face> and <font-family> refer to changing the font of an HTML element. However, there is a slight difference between the two.</font-family>
- The <@font-face> is a CSS rule that facilitates the use of custom fonts on a web page.
- The <font-family> is a CSS property that specifies the font for a web element.</font-family>
What is Z-index and how does it work?
The z-index is a CSS property that defines the stack order of web elements. Higher-order elements will appear before any lower-order element.
What does float do?
float pushes an element to the sides of a page with text wrapped around it. you can create entire page or a smaller area by using float. if size of a floated element changes, text around it will re-flow to accommodate the changes. You can have float left, right, none or inherit.
if you set, ‘float: left;’ for an image, it will move to the left until the margin, padding or border of another block-level element is reached. The normal flow will wrap around on the right side.
How can you clear sides of a floating element?
If you clear a slide of an element, floating elements will not be accepted on that side. With ‘clear’ set to ‘left’, an element will be moved below any floating element on the left side. clear is used to stop wrap of an element around a floating element.
Does css properties are case sensitive?
no
Why css selectors mixed up with cases don’t apply the styles?
html ID and classes are case sensitive.
Does margin-top or margin-bottom has effect on inline element?
Does padding-top or padding-bottom has effect on inline element?
No
Does padding-left or padding-right or margin-left or margin-right has effect on inline element?
yes
Which one would you prefer among px, em % or pt and why?
px gives fine grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade, this means if parent font-size is 20px and child 16px. child would be 16px.
em maintains relative size. you can have responsive fonts. em is the width of the letter ‘m’ in the selected typeface. However, this concept is tricky. 1em is equal to the current font-size of the element or the browser default. if u sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px). em is cascade
% sets font-size relative to the font size of the body. Hence, you have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px.
pt(points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.
How absolute, relative, fixed and static position differ?
absolute, place an element exactly where you want to place it. absolute position is actually set relative to the element’s parent. if no parent available then relatively place to the page itself.
relative, is position an element relative to itself (from where the element would be placed, if u don’t apply relative positioning). for example, if u set position relative to an element and set top: 10px, it will move 10px down from where it would be normally.
fixed, element is positioned relative to viewport or the browser window itself. viewport doesn’t changed if u scroll and hence fixed element will stay right in the same position.
static, element will be positioned based on the normal flow of the document. usually, u will use position static to remove other position might be applied to an element.
What are the differences between visibility hidden and display none?
display:** none removes the element from the normal layout flow and allow other elements to fill in**.
visibility: hidden tag is rendered, it takes space in the normal flow but doesn’t show it.
What are the differences between inline, block and inline-block?
inline, elements do not break the flow. think of span it fits in the line. Important points about inline elements, margin/ padding will push other elements horizontally not vertically. Moreover, inline elements ignores height and width.
block, breaks the flow and dont sits inline. they are usually container like div, section, ul and also text p, h1, etc.
inline-block, will be similar to inline and will go with the flow of the page. Only differences is this this will take height and width.
Interview questions
, in this the ‘align’ is the attribute using which we will align the paragraph to show in the center of the view.