Scribd
Upload
8 views

HTML Css Questions

Uploaded by

basaf54408
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

HTML Css Questions

Uploaded by

basaf54408
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

#### CSS

---

#### What is CSS?


* CSS stands for Cascading Style Sheet.
* Styles define how to display HTML elements
* Styles were added to HTML 4.0 to solve a problem
* External Style Sheets can save a lot of work
* External Style Sheets are stored in CSS files

---

#### Where to define styles? How can you integrate/import CSS


on a web page?
* Inline, used to style only a small piece of code
```
<p style="color:blue">
Hello CSS
</p>
```
* Internal/Embedded, style sheets are put between the
<head>...</head>
```
<style>
p{color:blue}
</style>
```
* External
```
<link rel="stylesheet" type="text/css" href="style.css"
```
---
#### What is Property?
* The style that you are applying to a selector, e.g. border.

---

#### What is Selector?


The way you declare which elements the styles should apply to.
There are different kinds of selectors:

* ```Class```: The most commonly used selector. E.g. “.cloudy”


to select an element with classname cloudy. There can be more
than 1 element with the same classname.

* ```ID```: Use this sparingly. You cannot reuse an ID within the


same page and used only to identify an element uniquely. E.g.
```<div id=lovelyweather></div>```

* ```Attribute Selector```: If you use any attribute other than class


or id to identify an element in a stylesheet, you would be using
Attribute Selectors. You can also do basic pattern matching
within an attribute selector (so if you would like to do basic
pattern matching for selectors using class or ID attributes, you
would want to use attribute selectors).

* ```Pseudo-Classes```: Classes that are applied to elements based


on information that is not present in the markup, e.g. :first-child
or :last-child. Do note that the selectors are parsed from right to
left (see the demo). You cannot use section ```article:first-child```
to select the first occurrence of article, if the first child of section
is h1 and not article. Likewise with the :nth-child, and :last-child
pseudo-classes.

* ```Pseudo-Elements```: Pseudo-elements differ from Pseudo-


Classes in that they actually create an element in the document
tree. This is almost the first instance of CSS modifying the
HTML document tree. You should ideally use pseudo-elements
with “::” instead of “:” (but most browsers accept “:” notation for
CSS 2.1 pseudo-elements). Pseudo-elements are: ```::first-line```,
```::first-letter```, ```::before```, ```::after``` (See the demo for how
pseudo-elements work).

---

#### What are Combinators?

The selection of an element based on its occurrence in relation to


another element (chosen by the choice of combinator:
whitespace, >, +, or ~). You can have:

* Descendant Combinator
* This is the most common usage, e.g. #lovelyweather h1.
* Child Combinator
* Select an element if it is a direct child of another element
(and not a grandchild of that element).
* Adjacent Sibling Combinator
* The element that is immediately adjacent to another element.
* General Sibling Combinator
* The element that is adjacent, but not immediately to another
element.
---

#### Why background and color are the separate properties if


they should always be set together?
Color is an inherited property while background is not. So this
can make confusion further.

---

#### What is the difference between class selectors and id


selectors?
An overall block is given to class selector while id selectors take
only a single element differing from other element

---

#### When working on a large codebase CSS it can quickly


become unwieldly and difficult to maintain. How do you
approach this problem? How do you architect your CSS (and
have you heard/used BEM, OOCS or SMACSS)?

---

#### What is CSS BEM

The BEM methodology is a naming convention for CSS classes


in order to keep CSS more maintainable by defining namespaces
to solve scoping issues. BEM stands for Block Element Modifier
which is an explanation for its structure. A Block is a standalone
component that is reusable across projects and acts as a
"namespace" for sub components (Elements). Modifiers are used
as flags when a Block or Element is in a certain state or is
different in structure or style.

```css
/* block component */
.block {
}

/* element */
.block__element {
}

/* modifier */
.block__element--modifier {
}

```

Here is an example with the class names on markup:

```css
<nav class="navbar">
<a href="/" class="navbar__link navbar__link--active"></a>
<a href="/" class="navbar__link"></a>
<a href="/" class="navbar__link"></a>
</nav>

```

In this case, ```navbar``` is the Block, ```navbar__link``` is an


Element that makes no sense outside of the navbar component,
and ```navbar__link--active``` is a Modifier that indicates a
different state for the ```navbar__link``` Element.

Since Modifiers are verbose, many opt to use ```is-*``` flags


instead as modifiers.

```css
<a href="/" class="navbar__link is-active"></a>
```

These must be chained to the Element and never alone however,


or there will be scope issues.

```css
.navbar__link.is-active {
}

```

###### References
* https://css-tricks.com/bem-101/
---

#### How do you organize CSS files?

---

#### What are the advantages of External Style Sheets?


* You can create classes for reusing it in many documents.
* By using it, you can control the styles of multiple documents
from one file.
* In complex situations, you can use selectors and grouping
methods to apply styles.

---

#### What is RWD (Responsive web design) ?


This technique is used to display the designed page perfectly on
every screen size and device. For example: Mobile, Tablet,
desktop, laptop etc. You don't need to create a different page for
each device.

---

#### Explain CSS sprites, and how you would implement them
on a page or site. How do you go about creating them? What are
possible alternatives to sprites?

CSS sprites combine multiple images into one single larger


image. It is a commonly-used technique for icons. How to
implement 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.

**Advantages:**
* Reduce the number of ```HTTP``` requests for multiple images
(only one single request is required per spritesheet). But with
```HTTP2```, loading multiple images is no longer much of an
issue.
* Advance downloading of assets that won't be downloaded until
needed, such as images that only appear upon `:hover` pseudo-
states. Blinking wouldn't be seen.

* 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.

**Alternatives:**

* Data URIs - allow you to embed the image data directly into a
stylesheet. This avoids additional HTTP requests for images,
making it essentially the same thing as a sprite, without the fancy
positioning.

* Icon Fonts

* SVGs

---

#### What are the benefits of CSS sprites?


If a web page has large no. of images that takes a longer time to
load because each image separately sends out an ```HTTP```
request. The concept of CSS sprites is used to reduce the loading
time for a web page because it combines the various small
images into one image. It reduces the number of ```HTTP```
requests and hence the loading time.

CSS sprites combine multiple images into one image, limiting the
number of HTTP requests a browser has to make, thus improving
load times. Even under the new HTTP/2 protocol, this remains
true.

However, according to benchmark results, although HTTP/2


offers 50% improvement over HTTP/1.1, in most cases the sprite
set is still faster to load than individual images.

To utilize a spritesheet in CSS, one would use certain properties,


such as ```background-image```, ```background-position``` and
```background-size``` to ultimately alter the background of an
element.

---

#### What is the CSS Box model and what are its elements?
* The CSS box model is used to define the design and layout of
elements of CSS.
* The elements are:
* Margin
* Border
* Padding
* Content
---

#### What is the float property and what float do.


* The CSS float property is used to move the image to the right
or left along with the texts to be wrapped around it. It doesn't
change the property of the elements used before it

* 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.

---

#### What is tweening?

* It is the process of generating intermediate frames between two


images.
* It gives the impression that the first image has smoothly
evolved into the second one.

* It is an important method used in all types of animations.

* In CSS3, Transforms (matrix, translate, rotate, scale etc.)


module can be used to achieve tweening.

---

#### Who maintains the CSS specifications? What do you


understand by W3C?
W3C stands for World Wide Web Consortium. The mission of
the W3C is to lead the Web to its full potential by developing
relevant protocols and guidelines.This is achieved primarily by
creating and publishing Web standards. By adopting the Web
standards created by the W3C, hardware manufacturers and
software developers can ensure their equipment and programs
work with the latest Web technologies. For example, most Web
browsers incorporate several W3C standards, which allows them
to interpret the latest versions of HTML and CSS code. When
browsers conform to the W3C standards, it also helps Web pages
appear consistent across different browsers.

---

#### Explain the difference between ```visibility: hidden;``` and


```display: none;```? What are the pros and cons of using
```display:none```?
* ```visibility: hidden``` simply hides the element but it will
occupy space and affect the layout of the document.

* ```display: none``` removes the element from the normal layout


flow (causes DOM reflow). It will not affect the layout of the
document nor occupy space.

---

#### What is the purpose of the ```z-index``` and how is it used?

* The ```z-index``` helps specify the stack order of positioned


elements that may overlap one another. The ```z-index``` default
value is zero, and can take on either a positive or negative
number.

* An element with a higher ```z-index``` is always stacked above


than a lower index.

* ```z-index``` can take the following values:

* Auto: Sets the stack order equal to its parents.


* Number: Orders the stack order.
* Initial: Sets this property to its default value (0).
* Inherit: Inherits this property from its parent element.

---

#### What existing CSS frameworks have you used locally, or in


production? How would you change/improve them?

---
#### What are CSS frameworks? What CSS frameworks have
you used
It is a pre-planned libraries, which allows easier and more
standards-compliant webpage styling, using CSS language.

---

#### How works absolute / relative / fixed / static position?

```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 (it
will default all the way back up to the <html> element).

```relative```, means "relative to itself". Setting position: relative;


on an element and no other positioning attributes, it will no effect
on it's positioning. It allows the use of ```z-index``` on the
element and it limits the scope of absolutely positioned child
elements. Any child element will be absolutely positioned within
that block.

```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``` default for every single page element. The only


reason you would ever set an element to position: static is to
forcefully-remove some positioning that got applied to an
element outside of your control.
* ```sticky``` - Sticky positioning is a hybrid of relative and fixed
positioning. The element is treated as `relative` positioned until it
crosses a specified threshold, at which point it is treated as `fixed`
positioned.
---

#### How is behave absolute element if it is inside fixed


element/relative/absolute element

---

#### What are the pros and cons of using absolute positioning?

---

#### The difference between block / inline / inline-block element

* Elements with ```display: inline-block``` are like ```display:


inline elements```, but they can have a width and a height.
That means that you can use an ```inline-block``` element as a
block while flowing it within text or other elements.

* ```block```:
* respect all of those
* force a line break after the block element
* breaks the flow

* ```inline```:
* respect left & right margins and padding, but not top &
bottom
* cannot have a width and height set
* margin and padding will push other elements horizontally
not vertically
* allow other elements to sit to their left and right.
* elements do not break the flow

* ```inline-block```:
* allow other elements to sit to their left and right
* respect top & bottom margins and padding
* respect height and width
---
* No

---

#### Multiple Class / ID and Class Selectors

* https://css-tricks.com/multiple-class-id-selectors

---

#### Why CSS selectors mixed up with cases (uppercase and


lowercase) don't apply the styles?

* because HTML IDs and Classes are case sensetive.

---

#### Does margin-top or margin-bottom has effect on inline


element?

* No

---
#### Does padding-top or padding-bottom has effect on inline
element?

* No

---

#### Which one would you prefer among px, em % or pt and


why?

it depends on what you are trying to do.

* ```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.
---

#### Does padding-left or padding-right or margin-left or


margin-right has effect on inline element?

* Yes

---

#### If you have a <p> element with font-size: 10rem, will the
text be responsive when the user resizes / drags the browser
window?

* No

---

#### Describe pseudo-elements and discuss what they are used


for.
* https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-
elements

* A CSS pseudo-element is used to style specified parts of an


element.

For example, it can be used to:

Style the first letter, or line, of an element


Insert content before, or after, the content of an element

```css
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
```

---

#### In a HTML document, the pseudo class :root always refers


to the <html> element

* True

---

#### What is pseudo element? what is pseudo class?

* pseudo elements helps you to add cosmetics contents. pseudo


elements generates content where as pseudo class deals with state
of the element. for example, you can style ```:first-letter``` of
every paragraph. similarly, ```:first-line``` and fancy stuff with
```:before```, ```:after```

---

#### The pseudo class :checked will select inputs with type radio
or checkbox, but not <option> elements.

* False

---

#### How to center align a paragraph?


#### Explain the CSS “box model” and the layout components
that it consists of. Provide some usage examples.
* The CSS box model is a rectangular 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)

```css
/* top right bottom left */
padding: 25px 50px 75px 100px;

/* same padding on all 4 sides: */


padding: 25px;

/* top/bottom padding 25px; right/left padding 50px */


padding: 25px 50px;

/* top padding 25px; right/left padding 50px; bottom padding


75px */
padding: 25px 50px 75px;
```
---

#### Explain what elements will match each of the following


CSS selectors:
* div, ```p``` Selects all ```<div>``` elements and all <p>
elements
* div ```p``` Selects all ```<p>``` elements that are anywhere
inside a <div> element
* div > ```p``` Selects all ```<p>``` elements where the immediate
parent is a <div> element
* div + ```p``` Selects all ```<p>``` elements that are placed
immediately after a <div> element
* div ~ ```p``` Selects all ```<p>``` elements that are anywhere
preceded by a <div> element

---

#### Explain the meaning of each of these CSS units for


expressing length:
```cm``` centimeters
```em``` elements (i.e., relative to the font-size of the element;
e.g., 2 em means 2 times the current font size)
```in``` inches
```mm``` millimeters
```pc``` picas (1 pc = 12 pt = 1/6th of an inch)
```pt``` points (1 pt = 1/72nd of an inch)
```px``` pixels (1 px = 1/96th of an inch)

---

#### Which values (units) could be used for width?


---

#### In CSS3, how would you select:

* Every ```<a>``` element whose href attribute value begins with


“https”.
* a[href^="https"]

* Every ```<a>``` element whose href attribute value ends with


“.pdf”.
* a[href$=".pdf"]

* Every ```<a>``` element whose href attribute value contains the


substring “css”.
* a[href*="css"]

#### What is CSS preprocessor and why to user one?

* A CSS preprocessor is a program that lets you generate CSS


from the preprocessor's own unique syntax. There are many CSS
preprocessors to choose from, however most CSS preprocessors
will add some features that don't exist in pure CSS, such as mixin,
nesting selector, inheritance selector, and so on. These features
make the CSS structure more readable and easier to maintain.

* Here are a few of the most popular CSS preprocessors:

* SASS (SCSS)
* LESS
* Stylus
* PostCSS

---

#### What are the advantages/disadvantages of using CSS


preprocessors?

*Advantages:*

* CSS is made more maintainable.


* Easy to write nested selectors.
* Variables for consistent theming. Can share theme files
across different projects.
* Mixins to generate repeated CSS.
* Splitting your code into multiple files. CSS files can be split
up too but doing so will require an HTTP request to download
each CSS file.

*Disadvantages:*

* Requires tools for preprocessing. Re-compilation time can be


slow.

* Advantages of SASS/LESS: Use of variables, mixins, nesting,


looping, partials and more.

* Advantages POSTCSS: Use of future syntax. Ability to select


only the plugins you need for a particular project. Writing plain
CSS and applying the plugin to output necessary syntax that suits
your needs – which in turn allows for the ability to remove or
update that plugin if at any time it is not useful anymore. In other
words, POSTCSS offers a lot of flexibility AND all of the
features SASS/LESS offer. Versions of POSTCSS have been
developed for both Grunt and Gulp.

* Disadvantage POSTCSS: Keeping track of plugins for older


projects could get hairy, though you have a package.json to
reference.

* Disdvantages of SASS/LESS: They are monolithic, and you


need to learn a new language.

---

#### What preprocessor do you use? (Sass, LESS, Stylus) Why


do people use them? How does something like Compass relate to
Sass?
* They are CSS preprocessors. They are a special
syntax/language that compile down into CSS.
They make managing CSS easier, with things like variables
and mixins to handle vendor prefixes (among other things).
They make doing best practices easier, like concatenating and
compressing CSS.
.

---

#### Describe Floats and how they work.

Float is a CSS positioning property. Floated elements remain a


part of the flow of the page, and will affect the positioning of
other elements (e.g. text will flow around floated elements),
unlike `position: absolute` elements, which are removed from the
flow of the page.`.
---

#### 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 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.

---

#### Describe pseudo-elements and discuss what they are used


for.

A CSS pseudo-element is a keyword added to a selector that lets


you style a specific part of the selected element(s). They can be
used for decoration (`:first-line`, `:first-letter`) or adding elements
to the markup (combined with `content: ...`) without having to
modify the markup (`:before`, `:after`).

* `:first-line` and `:first-letter` can be used to decorate text.


* Used in the `.clearfix` hack as shown above to add a zero-space
element with `clear: both`.
* Triangular arrows in tooltips use `:before` and `:after`.
Encourages separation of concerns because the triangle is
considered part of styling and not really the DOM. It's not really
possible to draw a triangle with just CSS styles without using an
additional HTML element.

#### 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.

---

#### Explain your understanding of the box model and how you
would tell the browser in CSS to render your layout in different
box models.
* The content of the space taken by an element. Each element has
an inner and outer height/width calculated based on the content,
padding, border and margin.
```content-box``` default. Excludes padding, border and margin
from the inner dimensions.
```border-box``` includes the padding and border, but not the
margin in the inner dimension.

The CSS box model describes the rectangular boxes that are
generated for elements in the document tree and laid out
according to the visual formatting model. Each box has a content
area (e.g. text, an image, etc.) and optional surrounding `padding`,
`border`, and `margin` areas.

The CSS box model is responsible for calculating:

* How much space a block element takes up.


* Whether or not borders and/or margins overlap, or collapse.
* A box's dimensions.

The box model has the following rules:

* The dimensions of a block element are calculated by `width`,


`height`, `padding`, `border`s, and `margin`s.
* If no `height` is specified, a block element will be as high as the
content it contains, plus `padding` (unless there are floats, for
which see below).
* If no `width` is specified, a non-floated block element will
expand to fit the width of its parent minus `padding`.
* The `height` of an element is calculated by the content's
`height`.
* The `width` of an element is calculated by the content's `width`.
* By default, `padding`s and `border`s are not part of the `width`
and `height` of an element.

You might also like