What is CSS?
CSS stands for Cascading Style Sheet. CSS is a domain-specific, declarative programming language. It is a language that adds styles (colours, images or videos, borders, margin etc.) to your web site.
Can you explain CSS rule set? Or What is syntax of CSS3?
A CSS rule have two main parts: selector and declaration
CSS Syntax: selector { Property: Value; }
Selector: The selector points to the HTML5 element you want to style. It is used to find HTML elements based on their element name as: id, class, attribute, and more. Example: body {}, h1{} and p(), etc.
Declaration: how the selected element should be styled. Multiple declarations are separated by colon (;)
Example: { Property : Value ;}
Declaration split in two types: Property and value
Property: The property is the style attribute you want to change; they could be font-weight, colour, background colour, etc
Example:
{ border : __________ ;}
Value: A value is given to the property following a colon ( : ). Semi-colons are used to separate the properties.
Example:
{ : 10px or : blue ;}
Note : The property name and value are separated by a colon ( : )
CSS Example 1:
h1 {
color: blue;
text-align: center;
}
Example 2 :
body {
background-color: darkslategrey;
color: azure;
font-size: 12;
}
What are the different types of CSS?
Internal CSS or Embedded CSS: CSS styles are written in the HTML file in the <head> element using the <style> element.
External CSS: A separate file containing all the style information for a web site is called as an external CSS stylesheet. These files are commonly named style (dot) css file ( .css) and have a (dot)css extension (.css).
Inline CSS: Inline CSS is the style sheet information is applied directly to the specific HTML element. It is used for single line css.
How to set the value in CSS3?
Before setting a value, you must first decide on a property name. Then, prefix that name with –.
For example:
root {
-primary-colour: #752914;
-secondary-colour: #6397AF;
}
(Here, two properties are used: primary colour and secondary colour)
The next step is to use the property in the style sheet.
What’s the new in Advanced CSS?
Advanced CSS is a set of tools and techniques that help you create the modern new websites that employers and clients are looking for. These advanced skills help you make websites more responsive more easily so, whatever kind or size of device someone is using to view your site, it looks fantastic and works well.
What is Flexbox?
Flexbox can be used to arrange elements in columns or rows and align them on the page. It also has functions that automatically lay out content in response to different screen sizes and grow or shrink your content based on other elements on the page.
What are CSS3 Transitions?
CSS3 transitions allow to smoothly go from one element’s state to another.
- transition-property: which properties to animate
- transition-duration: how long the animation lasts
- transition-timing-function: how the intermediate states are calculated
- transition-delay: to start the animation after a certain amount of time
What are the keyframes?
Keyframes are the foundation of CSS animations. They define what the animation looks like at each stage of the animation timeline.
What are the different animation properties?
The animation property is a shorthand property for:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
What are the Pseudo classes and Pseudo elements?
Pseudo-classes create new classes (most of which are related to user input) that we can apply styles to.
Pseudo-elements allow us to add new elements in the document where they did not exist before.
What is the Box Model in CSS3?
The CSS box model is fundamental to understanding layout and sizing and such. It’s consisted of
- Margin: Outside the Border
- Width and height (or in the absence of that, default values and the content inside)
- Border: The border surrounds the padding and content
- Padding: It is the transparent space between the element’s content and border.
Example:
div {
width: 200px;
Height: 100px
border: 20px solid blue;
padding: 50px;
margin: 25px;
}
Can you explain Animation-timing-function with example?
It defines the speed curve or pace of the animation. You can specify the timing with the following predefined timing options: ease, ease-in, ease-out, ease-in-out, linear, initial, inherit. (For more timing functions using cubic-bezier curve.)
For example
The default value, if no other value is assigned, is ease, which starts out slow, speeds up, then slows down. You can read a description of each timing function here.
CSS syntax:
animation-timing-function: ease-in-out;
Animation shorthand syntax (recommended):
animation: [animation-name] [animation-duration] [animation-timing-function];
animation: bounceIn 2s ease-in-out;
What are the CSS Selectors and types?
CSS selectors define the elements to which a set of CSS rules apply.
Some important types of selectors:
Simple selectors: These selectors for selecting HTML pieces such as
*ns *,.elementname,div, #id, or .classname
Attribute selectors: these selectors to select elements with certain attributes
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Combinator selectors: Theses selectors are based off code relationships like a
“child” p > div or “adjacent sibling” div + div
Examples: AB,A>B,,A||B,A~B,A<B,A+B
Pseudo-class selectors: These selectors to select a specific state of an element such as
:hover, :first-child, or :nth-of-type
The : pseudo allow the selection of elements based on state information that is not contained in the document tree.
Pseudo-elements selectors: these selectors to select specific parts of an element such as
::after, ::selection, or ::first-letter. Note how these always use double colon notation:: versus pseudo-class selectors which use a single colon.
The :: pseudo represent entities that are not included in HTML
What is RWD?
RWD stands for Responsive Web Design. It is used to display the designed page perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. You don’t need to create a different page for each device.
What is the z-index in CSS3?
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.
What are CSS3 Sprites?
CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). This is how you could implement it:
- Use a sprite generator that packs multiple images into one and generates 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.
Which CSS property is used to disable a link?
You can use the CSS pointer-events property to disable a link.
Which CSS property is used to Vertically Align an Image inside a DIV?
You can use the CSS vertical-align Property.
Which CSS property is used to Change the Color of an <hr> Element?
You can use the CSS background-color Property
Which CSS property is used to Align Content of a DIV to the Bottom?
You can use the CSS position Property.
Which CSS property is used to change image on hover?
You can use the CSS background-image property.
Which CSS property is used to remove cell spacing from tables?
You can use the CSS border-collapse property.
Which one is used to create fixed header or footer?
You can use the CSS fixed positioning.
Which CSS property is used to create 3D flipping effect on mouse hover?
You can use the CSS backface-visibility property.
Which CSS property is used to CSS opacity in IE7 and IE8 browsers?
You can use the CSS Microsoft “alpha filter” property
Which CSS property is used to shadow effect on text?
You can use the CSS text-shadow property
Which CSS property is used to remove the extra white space underneath an image?
You can use the CSS display property
Which CSS property is used to remove dotted line around the links or linked images?
You can use the CSS outline property
How to create drop caps effect in CSS?
You can use the CSS:: first-letter pseudo-element.
What are em and ex units?
Em : It means current font-size
Ex : It menas x-height of the current font
List the font-related attributes in CSS3?
Below are the different font-related attributes available in CSS3:
- Font-style
- Font-variant
- Font-weight
- Font-size/line-height
- Font-family
- Caption
- Icon
What are the CSS libraries?
- CSS wand
- css
- css
- Atomize
- Spectrum css
- Animation library
- Wipe css
- css
- css
- css
- Font awesome
- Raisin
- Ionic
- css
What are the different CSS media types?
- All: For All media devices
- Aural: For speech and sound synthesizers.
- Braille: For braille tactile feedback devices.
- Embossed: For paged braille printers.
- Handheld: For small devices
- Print: For printers
- Projection: For presentations (Projectors)
- Screen: colour computer screens
- TTY: For media using a fixed-pitch character grid. for example: teletypes, terminals, or portable devices etc.
- TV: For television devices
What are the different ways to position a certain element in CSS3?
The position property specifies the type of positioning method used for an element.
There are five different position values:
- position: fixed;
- position: static;
- position: absolute;
- position: sticky;
- position: relative;
What is Block Formatting Context? How does it work?
BFC stands for Block Formatting Context. It is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with overflow other than visible (except when that value has been propagated to the viewport) establish new block formatting contexts.
What is Vendor-Prefixes?
Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers’ code during the standardization process. Developers should wait to include the unprefixed property until browser behaviour is standardized.
The major browsers use the following prefixes:
- -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
- -moz– (Firefox)
- -o– (Old, pre-WebKit, versions of Opera)
- -ms– (Internet Explorer and Microsoft Edge)
What is Outskirt Style?
Styling of fringes has been stretched out to pictures and adjusted outlines which incorporate making a picture of the fringes and after that naturally apply a picture to the outskirts through CSS. Outskirt span, picture source, picture cut, and the qualities for width beginning and extent have been included CSS3
What is user stylesheetsSection?
The user (or reader) of the web site can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user’s wishes.
What are functions/mixins?
Functions are blocks of code that return a single value of any Sass data type. A mixin is very similar to a function. The main difference between the two is that mixins output lines of Sass code that will compile directly into CSS styles, while functions return a value that can then become the value for a CSS property or become something that might be passed to another function or mixin.
Can you explain CSS visual Formatting?
It is the algorithm that is used to process the documents for visual media. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model.
What are the most used CSS frameworks?
Some most used frameworks are:
- Bootstrap
- Pure CSS
- Semantic UI
- Bulma
- Foundation
- UI kit
- Tailwind CSS
- Materialize css
- Skeleton
Write an example of Internal CSS?
Write an example of Inline CSS?
Write an example of external CSS?
