CSS
Given the following HTML: <div id="page"> <h1>Heading Title</h1> <h2>Subheading Title</h2> <h2>Subheading Title</h2> <h1>Heading Title</h1> <h2>Subheading Title</h2> <h1>Heading Title</h1> </div> How could you use CSS to achieve the following automatic numbering: 1) Heading Title1.1) Subheading Title1.2) Subheading Title2) Heading Title2.1) Subheading Title3) Heading Title
/* Set "my-sec-counter" to 0 */ counter-reset: my-sec-counter; counter-increment: my-sec-counter; content: "my-counter " counter(my-sec-counter) ". "; The following CSS will achieve this type of automatic numbering: #page { counter-reset: heading; } h1:before { content: counter(heading)") "; counter-increment: heading; } h1 { counter-reset: subheading; } h2:before { content: counter(heading)"." counter(subheading)") "; counter-increment: subheading; }
Different ways you could integrate CSS
1) <link rel="stylesheet" href="styles.css"> 2)inline style="background-image: url(background.gif);" 3)<head> <style> body { background-image: url("paper.gif"); background-color: #cccccc; } </style> </head>
Name a few prominent CSS frameworks.
1)Bootstrap Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites. Bootstrap 4 is the newest version of Bootstrap 2)Foundation Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. 3)Semantic UI Semantic UI is a modern front-end development framework, powered by LESS(CSS-preprocessor) and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience. 4)Ulkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
How do style sheets cascade?
1)Elements - The same CSS style can be applied to multiple elements to achieve the same style. 2)Multiple Style One Element - Multiple styles can be applied to a particular HTML element to achieve a unique style. 3)Same style, Multiple Pages - The same stylesheet can be applied to different HTML pages altogether to achieve a template styling very quickly.
What are the ways to assign a certain colour to an element in CSS?
1)Hexadecimal notation begins with the character "#". After that, the hexadecimal digits of the colour code is written. The string is case-insensitive 2)RGB functional notation RGB (Red/Green/Blue) ranging from 0 to 256 function RGB() 3)HSL functional notation (Hue/Saturation/Luminosity) HSL() CSS function
Lazy loading
<img src="image.jpg" alt="..." loading="lazy"> --- image <iframe src="video-player.html" title="..." loading="lazy"></iframe> --- iframe <link rel="preload"> -- font Css <link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> the usage media types and queries are advised to unblock rendering Use of native JavaScript modules is dependent on the import and export statements;
pseudo-elements in CSS?
A CSS pseudo-element is used to style specified parts of an element.(first letter or line of an element, insert content before/after the content of element) selector::pseudo-element {property: value;} p::first-line {color: #ff0000;font-variant: small-caps;}
What are the various font-related attributes in CSS?
Below are the different font-related attributes available in CSS: Font-style Font-variant Font-weight Font-size/line-height Font-family Caption Icon
How does a browser determine what elements match a CSS selector?
Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. For example with this selector p span, browsers firstly find all the <span> elements and traverse up its parent all the way up to the root to find the <p> element. For a particular <span>, as soon as it finds a <p>, it knows that the <span> matches and can stop its matching.
What are the different units used in CSS?
CSS has two types of lengths. Relative length and absolute length. Different units are used for them. Relative Length UNITDESCRIPTIONemRelative to the font-size of the element (2em means 2 times the size of the current font)exRelative to the x-height of the current font (rarely used)chRelative to the width of the "0" (zero)remRelative to font-size of the root elementvwRelative to 1% of the width of the viewport*vhRelative to 1% of the height of the viewport*vminRelative to 1% of viewport's* smaller dimensionvmaxRelative to 1% of viewport's* larger dimension%Relative to the parent element Absolute Length UNITDESCRIPTIONCMcentimetresMMmillimetresINinches (1in = 96px = 2.54cm)PXpixels (1px = 1/96th of 1in)PTpoints (1pt = 1/72 of 1in)PCpicas (1pc = 12 pt)
CSS Sprites?
CSS sprites combine multiple images into one single larger image. 1)Use a sprite generator that packs multiple images into one and generates the appropriate CSS for it. 2)Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined. 3)To use that image, add the corresponding class to your element. Reduce the number of HTTP requests for multiple images assets that won't be downloaded until needed.Blinking wouldn't be seen
What is the full form of CSS?
Cascading Style Sheets. Developed by developed W3C
css modules
Css modules allow you to write scoped css kinda like function scoped variables in javascript Js Import styles from "./styles.css"; element.innerHTML='<section class="${styles.zebra}"></section>'; After web pack build HTML <section class="styles__zebra_8457"></section> Css .styles__zebra_8457{ background:red; } A CSS Module is just a css file. You call it a "CSS Module" if you plan on using it with a CSS Module compiler.
What is the difference between the usage of an ID and a Class?
ID - An ID is unique. A particular ID can be only assigned to a single element <div id="submit"> #submit{ position:absolute; } Class - class is a collective way of targetting HTML elements for styling.Multiple elements can have same class name <div class="button"> .button{ font-color:yellow; }
In CSS3, how would you select: Every <a> element whose href attribute value begins with "https". Every <a> element whose href attribute value ends with ".pdf". Every <a> element whose href attribute value contains the substring "css".
Select every <a> element whose href attribute value begins with "https": a[href^="https"] Select every <a> element whose href attribute value ends with ".pdf": a[href$=".pdf"] Select every <a> element whose href attribute value contains the substring "css": a[href*="css"]
Explain the concept of specificity in CSS.
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied
Explain the CSS Box Model and its different elements.
The CSS box model describes the rectangular boxes that are generated for elements Each box has a content area (e.g. text, an image, etc.) and an optional surrounding padding, border, and margin areas The CSS box model is responsible for calculating: a)How much space a block element takes up. b)Whether or not borders and/or margins overlap, or collapse. c)A box's dimensions. The box model has the following rules: 1)The dimensions of a block element are calculated by width, height, padding, borders, and margin. 2)If no height is specified, a block element will be as high as the content it contains, plus padding. 3)If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding. 4)The height of an element is calculated by the content's height. 5)The width of an element is calculated by the content's width. 6)By default, padding and border are not part of the width and height of an element.
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) Each of these properties can be specified independently for each side of the element (i.e., top, right, bottom, left) or fewer values can be specified to apply to multiple sides. For example: /* 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;
What is the use of box-shadow in CSS?
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box-shadow is described by X and Y offsets relative to the element, color, blur and spread radii. Below are a few implementations of box-shadow box-shadow: none | h-offset v-offset blur spread color | | inset | initial | inherit; box-shadow: 10px 5px 5px red; box-shadow: 60px -16px teal; box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); box-shadow: inset 5em 1em gold;
What is the float property used for in CSS?
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though it still remains a part of the flow (in contrast to absolute positioning). Below is the usage of float float: none; float: left; float: right;
What is the overflow property in CSS used f
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The overflow property has the following values: visible - Default. The overflow is not clipped. The content renders outside the element's box hidden - The overflow is clipped, and the rest of the content will be invisible scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content auto - Similar to scroll, but it adds scrollbars only when necessary
z-index in CSS?
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 are the different media types allowed by CSS?
There are four types of @media properties (including screen): all - for all media type devices print - for printers speech - for screenreaders that "reads" the page out loud screen - for computer screens, tablets, smart-phones etc. Here is an example of print-media type's usage: @media print { h1 { background-color: yellow; } }
Explain the difference in approach when designing a responsive website over a mobile-first strategy?
These two approaches are not exclusive. Making a website responsive means some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries. For example, making the font size smaller on smaller devices. @media (min-width: 601px) { .my-class { font-size: 24px;
What is CSS flexbox?
This flexbox layout should be used for small application components, while the new CSS Grid Layout Module is emerging to handle the large scale layouts. The flexbox layout officially called CSS flexible box layout module is a new layout module in CSS3. It is made to improve the items align, directions and order in the container even when they are with dynamic, or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes. Many designers and developers find this flexbox layout easier to use, as the positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to a simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while the new CSS Grid Layout Module is emerging to handle the large scale layouts.
Explain the scenario you would use translate() instead of absolute positioning?
Translate is a value of CSS transform. Changing transform or opacity does not trigger browser reflow or repaint but does trigger compositions; whereas changing the absolute positioning triggers reflow. Transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence translate() is more efficient and will result in shorter paint times for smoother animations. When using translate(), the element still occupies its original space (sort of like position: relative), unlike in changing the absolute positioning
How would you style an image or element to have rounded corners?
Use the border-radius property to add rounded corners to an image. 50% will make the image circular. border-radius: 50%;
What will this piece of CSS code do to an element? .container { margin: 0 auto; }
When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within its parent container. Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0. margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto; Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there's 50px of free space to share between margin-left and margin-right: var freeSpace = 100 - 50;var equalShare = freeSpace / 2; Which would give: margin-left:25; margin-right:25;
How will you target an h2 and h3 with the same styling?
You can target multiple elements by separating the separators with a comma (,) h2, h3 { color: blue; }
How do you control image repetition using CSS?
You can use the background-repeat property to control image. h1 { background-repeat: none; }
What is the property that is used for controlling image-scroll?
background-attachment: fixed Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect background-attachment: scroll; ---Turn off parallax scrolling
Explain the meaning of each of these CSS units for expressing length: cm em in mm pc pt px
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)
Pseudo-classes?
define a special state of an element.(mouseover,visited,unvisited link,focus) selector:pseudo-class {property: value;} a:link {color: #FF0000;} pseudo-classes can be combined with CSS classes: a.highlight:hover {color: #ff0000;}
What is the difference between {visibility: hidden} and {display: none}?
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the DOM). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
Explain what elements will match each of the following CSS selectors: div, p div p div > p div + p div ~ p
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 (COME BEFORE )by a <div> element
em's and rem's
em's have a compounding problem. depends on parents element. rem root element looks at HTML or ::root html{ font-size:16px; } both can be used for margin padding etc. .col--em h1{ font-size: 5em; margin-bottom:1em; ---- this is dependent on font size:5em; this is for em , but its in proportion to the font size . its relative to font size of the button } root em the margin padding is always look for root so its consistenet
