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.
What are the properties related to box model?
Technically, height, width, padding and border are part of box model and margin is related to it.
Everything in a web page is a box where you can control size, position, background, etc. Each box/ content area is optionally surrounded by padding, border and margin. When you set height and width of an element, you set content height and width.
What are the some pseudo classed u have used?
pseudo class tells you specific state of an element. allow to style element dynamically. The most popular one is :hover. Besides i have used :visited, :focus, :nth-child, nth-of-type, :link, etc.
pseudo classes is better if you don’t want to mess up with javaScript however, pseudo-classes is slow to process and apply rules.
How do you align a p center-center inside a div?
text-align: center will do the horizontal alignment but **vertical-align: **middle will not work here. there are couple of different ways to solve this problem and one of them are positioning. You make the parent as relative position and child as absolute positioning.
And then define all position parameter as sero and width 50% and height 30% (sounds messy look at the example and read ref)
How can you load css resources conditionally?
@import allows you to load/ import stylesheet by using a path (uri) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.
Why would you use sprites?
When you have multiple images/ icons, browser makes separate call to the server for each one of them.
sprite is a technique to combine all/ some of them (usually similar one in terms of type of image. For example, you will put jpg in one sprite) in one image.
To display the icon you set height, width and background position.
popular libraries like bootstrap use this technique. If you repeat the image. want to scale you have to be careful with sprite.
What is specificity? How do u calculate specificity?
is a process of determining which css rule will be applied to an element. it actually determines which rules will take precedence.
inline style usually wins then ID then class value (or pseudo-class or attribute selector), universal selector (*) has no specificity.
What is shadow DOM?
encapsulate part of a DOM.
hide subtree. you can have same ID in different shadow DOM. Polymers uses it. This way your DOM becomes reusable.
What do you know about transition?
transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma separation
What are the different css filter you can use?
css filter allows u to render DOM element, image, or video. u can choose from: grayscale, blur, opacity, brightness, contrast.
What are the reasons to use preprocessor?
you write css in high level with some** special syntax (declaring variable, nested syntax, mathematical operations, etc.)** and that is compiled to css. Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.
What is HTML?
HTML stands for HyperText Markup Language. It is a standard text formatting language used for developing web pages released in 1993. HTML is a language that is interpreted by the browser and it tells the browser what to display and how to display.
What are tags and attributes in HTML?
Tags are the primary component of the HTML that defines how the content will be structured/ formatted, whereas Attributes are used along with the HTML tags to define the characteristics of the element. For example, <p align=” center”>Interview questions</p>, in this the ‘align’ is the attribute using which we will align the paragraph to show in the center of the view.
Can we display a web page inside a web page or Is nesting of webpages possible?
Yes, we can display a web page inside another HTML web page. HTML provides a tag <iframe> using which we can achieve this functionality.
<iframe src=”url of the web page to embed” />
What are void elements in HTML?
HTML elements which do not have closing tags or do not need to be closed are Void elements. For Example <br></br>, <img></img>, <hr />, etc.
What is the advantage of collapsing white space?
In HTML, a blank sequence of whitespace characters is treated as a single space character, Because the browser collapses multiple spaces into a single space character and this helps a developer to indent lines of text without worrying about multiple spaces and maintain readability and understandability of HTML codes
What are HTML Entities?
In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. To use these characters in our webpage we need to use the character entities called HTML Entities. Below are a few mapping between the reserved character and its respective entity character to be used.
What are different types of lists in HTML?
<ul> unordered list
<ol> ordered list
</ol></ul>
What is the ‘class’ attribute in HTML?
The class attribute is used to specify the class name for an HTML element. Multiple elements in HTML can have the same class value. Also, it is mainly used to associate the styles written in the stylesheet with the HTML elements.
How to optimize website assets loading?
To optimize website load time we need to optimize its asset loading and for that:
**CDN hosting **- A CDN or content delivery network is geographically distributed servers to help reduce latency.
File compression - This is a method that helps to reduce the size of an asset to reduce the data transfer
**File concatenation **- This reduces the number of HTTP calls
Minify scripts - This reduces the overall file size of js and CSS files
Parallel downloads - Hosting assets in multiple subdomains can help to bypass the download limit of 6 assets per domain of all modern browsers. This can be configured but most general users never modify these settings.
Lazy Loading - Instead of loading all the assets at once, the non-critical assets can be loaded on a need basis.
What are the various formatting tags in HTML?
HTML has various formatting tags:
<b> - makes text bold
<i> - makes text italic
<em> - makes text italic but with added semantics importance
<big> - increases the font size of the text by one unit
<small> - decreases the font size of the text by one unit
- makes the text a subscript
- makes the text a superscript
<del> - displays as strike out text
<strong> - marks the text as important
<mark> - highlights the text
<ins> - displays as added text</ins></mark></strong></del></small></big></em></i></b>
