CSS Important Question Answer
How is the float property implemented in CSS?
- Floats allow an element to be positioned horizontally, allowing elements below the floated element to flow around it. Several floating elements can be placed together to make a gallery type layout.
- Floats can only accept a left or right value.
- e.g.)
img {
float: right;
width: 50px;
margin: 5px;
}
float: right;
width: 50px;
margin: 5px;
}
- To prevent subsequent elements from flowing around the floated element, pass in the clear property, followed by the side you wish to disable (i.e., ‘left’, ‘right’, ‘both’).
What is the CSS Box Model used for? What are the elements that it includes?
- CSS box model is made up of margins, borders, padding, and content.
- Box model provides a structured way to space elements in relationship to each other.
How to restore the default property value using CSS?
- In short, there’s no easy way to restore to default values to whatever a browser uses . The closest option is to use the ‘initial’ property value, which will restore it to the default CSS values, rather than the browser’s default styles.
What is the purpose of pseudo-elements and how are they made?
- Pseudo elements are made using a double colon (::) followed by the name of the pseudo element.
- Pseudo-elements are used to add special effects to some selectors, and can only be applied to block-level elements.
- Most commonly used pseudo-elements are ::first_line, ::first_letter, ::before, ::after
How are inline and block elements different from each other?
- A block element is an element that takes up the full width available, and has a line break before and after it. <h1>, <p>, <li>, and <div> are all examples of block elements.
- An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. <a> and <span> are examples of inline elements.
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 one with 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 are the advantages and disadvantages of External Style Sheets?
- The biggest advantages of external style sheets are that they can be applied to multiple documents while being managed from a single style sheet. This keeps code DRY and improves efficiency and convenience.
- The disadvantages are that it may decrease loading time in some situations. It may also not be practical if there are not enough styling conditions to justify an external sheet.
List the main CSS style sheet properties:
- Background
- Text
- Font
- Border
- Outline
- Margin
- Padding
- List
- Table
Which online resources do you refer to when having issues with CSS?
- No real correct answer here, save for being able to discuss your favorite online CSS community forums and resources. e.g. Mozilla Developer Network, StackOverflow, etc.
- This is just your opportunity to discuss larger CSS issues and show how plugged-in you are to the community.
What are the various techniques for clearing floats?
Explain the difference between visibility:hidden and display:none
- visibility:hidden simply hides the element, while it will still take up space and affect the layout of the document.
- display:none also hides the element, but will not take up space and the page will appear as if the element is not present.
What are some of the new features and properties in CSS3?
- Box model
- New Web fonts
- Rounded corners
- Border Images
- Box Shadows, Text Shadows
- New Color schemes (RGBA)
- Transform property
- New Pseudo-classes
- Multi-column layout
- New Gradients
Why shouldn’t I use fixed sized fonts ?
- Often times, fixed font sizes will show up incorrectly on the user end and will prohibit responsiveness. Using relative sizing will keep fonts proportionate in their relationships to each other and will allow for greater end user flexibility.
Which font names are available on all platforms ?
- Only five basic font families( serif, sans-serif, cursive, fantasy, and monsospace) are recognized across platforms, rather than specific fonts.
- Specific font name recognitions will vary by browser.
Do you use grid systems, and if so, what do you prefer?
- Again, no correct answer here. Just be able to discuss the pros and cons of different grid systems, mobile-first, fluid and responsive web design issues.
What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)
- Here is another opportunity to discuss your personal preferences on use of CSS preprocessors and why.
- While there’s no right or wrong answer here, below are some commonly cited pros and cons of using preprocessors:
Benefits: Ability to use nested sytax, define variables and mixins, use of mathematical and operational functions, and the ability to join multiple files into a single one.
Disadvantages: Difficulties tracking file size, maintenance and updating issues, difficulties debugging.
Why and how are shorthand properties used? Give examples.
- Using shorthand properties can improve page load times and reduce file size.
- Can be done with background, font, border, padding, outline, and list-style properties.
- Shorthanding is accomplished by listing the property values on a single line, in a specific order.
e.g.) Code snippet ‘a’ gets shorthanded into code snippet ‘b’ by condensing the property values (in order) onto a single line:
a)
b)
No comments:
Post a Comment