CSS
Explain the three main ways to apply CSS styles to a web page
1) Inline style attribute on an element 2) using a <style> block in the <head> section of your HTML. 3)loading an external css file using the <link> tag
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.
How could you apply css rules specific to a media?
@media (max-width: 700px){...} means you want to apply rules to those media whose max-width is 700 px. this means every smaller device will have this rule. @media (max-width: 700px) and (orientation: landscape){...} will apply rules for media smaller than 700px and in landscape orientation.
Explain CSS sprites, and how you would implement them on a page or site.
CSS sprites combine multiple images into one single larger image. It is commonly used technique for icons (Gmail uses it). Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it. Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined. To use that image, add the corresponding class to your element.
What is CSS?
CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.
False
The translate() function can move the position of an element on the z-axis.
False (ONLY ON X and Y)
Describe Floats and how they work.
Float is a CSS positioning property. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. Note: Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed.
What is the difference between classes and IDs in CSS?
IDs: Meant to be unique within the document. Can be used to identify an element when linking using a fragment identifier. Elements can only have one id attribute. Classes: Can be reused on multiple elements within the document. Mainly for styling and targeting elements.
How do you optimize css selectors?
If i order selectors in terms of render speed it would be like id, class, tag, siblings, child, descendant, universal, attribute, pseudo. Speed of ID and class is very close. However your code should be readable, maintainable and DRY along with highly performant. The best practices in general are: avoid universal selectors, don't repeat yourself, remove redundant selectors, be as specific as possible, and keep learning.
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 margin-top or margin-bottom has effect on inline element?
No
If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?
No
List out the data types that Sass supports
Numbers - most of the time they are accompanied by a unit of some sort but they are still technically numbers. You can perform basic mathematical operations on these values. Strings - just like CSS, accepts both quoted and unquoted strings, even if they contain spaces Colors - CSS color expressions come under the color data type. You can refer to the colors in hexadecimal notation, as rgb, rgba, hsl and hsla values or use native keywords like pink, blue, etc. Booleans - has only two possible values: true and false Null - is commonly used to define an empty state, neither true or false. This is typically the value you want to set when defining a variable without a value, only to prevent the parser from crashing. Lists - are just the Sass version of arrays. You can store multiple types of values in a list. Maps - Sass maps are like associative arrays. A map stores both keys and values associated with those keys.
What is Sass?
Sass or Syntactically Awesome StyleSheets is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly. A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.
What is the DOM and how is it linked to CSS?
The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. The DOM specifies interfaces which may be used to manage XML or HTML documents. When a browser displays a document, it must combine the document's content with its style information. The browser converts HTML and CSS into the DOM. The DOM represents the document in the computer's memory. It combines the document's content with its style.
How to use variables in Sass?
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.
In a HTML document, the pseudo class :root always refers to the <html> element.
True
What is a CSS rule?
Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from: A set of properties, which have values set to update how the HTML content is displayed. A selector, which selects the element(s) you want to apply the updated property values to. A set of CSS rules contained within a stylesheet determines how a webpage should look.
Does padding-left or padding-right or margin-left or margin-right has effect on inline element?
Yes
Does overflow: hidden create a new block formatting context?
Yes; overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).
What is specificity? How do u calculate specificity?
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.
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.
Why css selectors mixed up with cases don't apply the styles?
because, html ID and classes are case sensitive.
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. show example
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. if u want to say it smartly, display: none causes DOM reflow where is visibility: hidden doesn't. btw, what is re-flow? answer. sorry i wont tell you, google 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.
Does css properties are case sensitive?
no
Does padding-top or padding-bottom has effect on inline element?
no
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.
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 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)
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 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 are the properties related to box model?
Technically, height, width, padding and border are part of box model and margin is related to it.
Explain the CSS "box model" and the layout components that it consists of
The CSS box model is a rectangual layout paradigm for HTML elements that consists of the following... Content - The content of the box, where text and images appear Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content) Border - A border surrounding the padding (if any) and content Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)
