##BoxModel##
CSS box model is a box that wraps around every single element in HTML which includes the content, padding inside and then the border and then the margin.
====
The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
* { box-sizing: border-box } // Include padding and border in the element's total width and height:
If you want to make sure that all form elements in your design have the same height, just declare box-sizing: border-box
======
##specificity##
if your html has two conflicting styles for example if your element has style that is changing the background of the element and there is a second style rule that is also trying to the change the background, in this case the browser should decide which one to decide and it chooses based on the specificity. Specificity has some basic set of rules.
//1st rule
<div><div>
//css
div {
background-color: green;
}
div {
background-color: red; //the last style will be applied on the div
}
//2nd rule
<div class="mydiv"><div>
//css
div {
background-color: green;
}
div.mydiv { // it is more specific than the regular one, this style will apply
background-color: red;
}
//3rd rule
<div class="mydiv" id="name"><div>
//css
div#name { // id wins, becasue id has higher priority than class
background-color: green;
}
div.mydiv {
background-color: red;
}
//4th rule
<div class="mydiv" id="name"><div>
//css
div#name {
background-color: green;
}
div.mydiv {
background-color: red !important; //forcing this to pick with important
}
======
make a div center of another div
.outer {
width: 300px;
height: 300px;
background-color: yellow;
position: relative;
}
.in {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // this will move the div to center
}
=====
##diff between Static, Relative, Absolute and Fixed position##
Static:
it is the default type of positioning, these elements will stack in a standard one-after-another order.
Relative:
The relative positioning, if you just give an element position:relative it will initially seem to do nothing. when you give top/left/right/bottom values, the element will begin to move around its relatively positioned element, here two things happen. First, you will see the element move off from the side specified, so if you wrote top:50px; the element will move 50px off from the top, or basically down. When you do this though, it doesn’t effect any other static elements around it. so the environment will not disturb.
Absolute:
An absolutely positioned element is actually removed from the DOM and positioned based on its nearest relatively positioned parent element. unlike a relatively positioned element it will effect the environment, when you give an element position:absolute its like it no longer exists. This means that other static elements will move up to fill in the space. The position of the absolute element is determined by its parent elements. If all of the parent elements are either static, or there are none, then the element is positioned based on the <body>.
Fixed:
Fixed elements are completely independent of everything else on the web page. Regardless of any parents, a fixed position element will always be positioned based on the browser window. The interesting thing about fixed position elements is that when the page is scrolled, the element stays “fixed” and is always visible.
=====
CSS3 supports responsive design, supports media queries.
it can split into modules.
3D transformations, transitions, and animations , rounded image corners
alignment problems can be fixed by the Box-Sizing in css3
The width or height of an element =
actual visible width or height of the content
+ padding
+ border
Margin: the top most layer, the overall structure is shown
Border: the padding and content option with a border around it is shown. Background color affects the border.
Padding: Space is shown. Background colour affects the border.
Content: Actual content is shown.
Inline: Style attribute can be used to have CSS applied HTML elements.
Embedded: The Head element can have a Style element within which the code can be placed.
Linked/ Imported: CSS can be placed in an external file and linked via link element.
material design
absolute
fixed
inherit
relative
static
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)
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
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"]
counter-reset: heading;
counter-increment: heading;
content: counter(heading)"." counter(subheading)") ";
counter-increment: subheading;
graceful degradation - In case the image is unavailable for viewing, text is shown with the alt tag
CSS Pseudo Elements
::after
::before
::first-letter
::first-line
::selection
CSS Pseudo Classes
:nth-child(n)
:active
:checked
:disabled
The object-fit property is used to specify how an image or video should be resized to fit its container.
Transitions in CSS3 allows you to change property values from one value to another, over a given duration. so you need to specify the value and the duration time for the effect
The 'transform' property is used to make particular section rotate for certain degrees.
css functions
attr()
calc()
cubic-bezier()
hsl()
hsla()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rgba()
var()
What is CSS flexbox?
----------------------------
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Answer: It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially.
Flexbox is a very useful layout tool, especially for smaller areas within the site. Its main features are to align items in horizontal or vertical axes, space them out automatically, invert the order in which they’re displayed, along with a few other layout options.
CSS Grid is more of a layout tool for the entire page. While Flexbox excels in laying out items along a single axis, Grid is better for layouts with both horizontal and vertical axes, i.e. grids!
properties of flex
----------------------
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
The flex-direction property defines in which direction the container wants to stack the flex items.
.flex-container {
display: flex;
flex-direction: column; // stacks the flex items vertically
# column-reverse;" stacks the flex items vertically (but from bottom to top)
# row; value stacks the flex items horizontally (from left to right):
# row-reverse value stacks the flex items horizontally (but from right to left):
}
Media Queries
------------------
The most common approach is the mobile-first one. All styles outside of media queries are targeted at mobile devices. Then, through progressively larger media queries, you can style larger screens one step at a time.
/* mobile styles */
body {
font-size: 1em;
}
/* desktop styles */
@media only screen and (min-width: 768px) {
body {
font-size: 1.5em;
}
}
@media only screen and (orientation: landscape) {
What are variables used for?
------------------------------------
Variables are super useful for things like colors, fonts, font sizes, and certain dimensions, as you can be sure you’re always using the same ones, not 4 different versions of roughly the same color.
$primary-font-stack: 'Helvetica', sans-serif;
$primary-color: #fccd48;
body {
color: $primary-color;
font-family: $primary-font-stack;
}
What are functions/mixins?
-----------------------------
Mixins are a very handy way of adding a number of styles, based on a particular input parameter. For example, you might always want to add fallback styles when adding border-radius, but you don’t necessarily know what value you might want.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
CSS box model is a box that wraps around every single element in HTML which includes the content, padding inside and then the border and then the margin.
====
The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
* { box-sizing: border-box } // Include padding and border in the element's total width and height:
If you want to make sure that all form elements in your design have the same height, just declare box-sizing: border-box
======
##specificity##
if your html has two conflicting styles for example if your element has style that is changing the background of the element and there is a second style rule that is also trying to the change the background, in this case the browser should decide which one to decide and it chooses based on the specificity. Specificity has some basic set of rules.
//1st rule
<div><div>
//css
div {
background-color: green;
}
div {
background-color: red; //the last style will be applied on the div
}
//2nd rule
<div class="mydiv"><div>
//css
div {
background-color: green;
}
div.mydiv { // it is more specific than the regular one, this style will apply
background-color: red;
}
//3rd rule
<div class="mydiv" id="name"><div>
//css
div#name { // id wins, becasue id has higher priority than class
background-color: green;
}
div.mydiv {
background-color: red;
}
//4th rule
<div class="mydiv" id="name"><div>
//css
div#name {
background-color: green;
}
div.mydiv {
background-color: red !important; //forcing this to pick with important
}
======
make a div center of another div
.outer {
width: 300px;
height: 300px;
background-color: yellow;
position: relative;
}
.in {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // this will move the div to center
}
=====
##diff between Static, Relative, Absolute and Fixed position##
Static:
it is the default type of positioning, these elements will stack in a standard one-after-another order.
Relative:
The relative positioning, if you just give an element position:relative it will initially seem to do nothing. when you give top/left/right/bottom values, the element will begin to move around its relatively positioned element, here two things happen. First, you will see the element move off from the side specified, so if you wrote top:50px; the element will move 50px off from the top, or basically down. When you do this though, it doesn’t effect any other static elements around it. so the environment will not disturb.
Absolute:
An absolutely positioned element is actually removed from the DOM and positioned based on its nearest relatively positioned parent element. unlike a relatively positioned element it will effect the environment, when you give an element position:absolute its like it no longer exists. This means that other static elements will move up to fill in the space. The position of the absolute element is determined by its parent elements. If all of the parent elements are either static, or there are none, then the element is positioned based on the <body>.
Fixed:
Fixed elements are completely independent of everything else on the web page. Regardless of any parents, a fixed position element will always be positioned based on the browser window. The interesting thing about fixed position elements is that when the page is scrolled, the element stays “fixed” and is always visible.
=====
CSS3 supports responsive design, supports media queries.
it can split into modules.
3D transformations, transitions, and animations , rounded image corners
alignment problems can be fixed by the Box-Sizing in css3
The width or height of an element =
actual visible width or height of the content
+ padding
+ border
Margin: the top most layer, the overall structure is shown
Border: the padding and content option with a border around it is shown. Background color affects the border.
Padding: Space is shown. Background colour affects the border.
Content: Actual content is shown.
Inline: Style attribute can be used to have CSS applied HTML elements.
Embedded: The Head element can have a Style element within which the code can be placed.
Linked/ Imported: CSS can be placed in an external file and linked via link element.
material design
absolute
fixed
inherit
relative
static
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)
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
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"]
counter-reset: heading;
counter-increment: heading;
content: counter(heading)"." counter(subheading)") ";
counter-increment: subheading;
graceful degradation - In case the image is unavailable for viewing, text is shown with the alt tag
CSS Pseudo Elements
::after
::before
::first-letter
::first-line
::selection
CSS Pseudo Classes
:nth-child(n)
:active
:checked
:disabled
The object-fit property is used to specify how an image or video should be resized to fit its container.
Transitions in CSS3 allows you to change property values from one value to another, over a given duration. so you need to specify the value and the duration time for the effect
The 'transform' property is used to make particular section rotate for certain degrees.
css functions
attr()
calc()
cubic-bezier()
hsl()
hsla()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rgba()
var()
What is CSS flexbox?
----------------------------
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
Answer: It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially.
Flexbox is a very useful layout tool, especially for smaller areas within the site. Its main features are to align items in horizontal or vertical axes, space them out automatically, invert the order in which they’re displayed, along with a few other layout options.
CSS Grid is more of a layout tool for the entire page. While Flexbox excels in laying out items along a single axis, Grid is better for layouts with both horizontal and vertical axes, i.e. grids!
properties of flex
----------------------
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
The flex-direction property defines in which direction the container wants to stack the flex items.
.flex-container {
display: flex;
flex-direction: column; // stacks the flex items vertically
# column-reverse;" stacks the flex items vertically (but from bottom to top)
# row; value stacks the flex items horizontally (from left to right):
# row-reverse value stacks the flex items horizontally (but from right to left):
}
Media Queries
------------------
The most common approach is the mobile-first one. All styles outside of media queries are targeted at mobile devices. Then, through progressively larger media queries, you can style larger screens one step at a time.
/* mobile styles */
body {
font-size: 1em;
}
/* desktop styles */
@media only screen and (min-width: 768px) {
body {
font-size: 1.5em;
}
}
@media only screen and (orientation: landscape) {
What are variables used for?
------------------------------------
Variables are super useful for things like colors, fonts, font sizes, and certain dimensions, as you can be sure you’re always using the same ones, not 4 different versions of roughly the same color.
$primary-font-stack: 'Helvetica', sans-serif;
$primary-color: #fccd48;
body {
color: $primary-color;
font-family: $primary-font-stack;
}
What are functions/mixins?
-----------------------------
Mixins are a very handy way of adding a number of styles, based on a particular input parameter. For example, you might always want to add fallback styles when adding border-radius, but you don’t necessarily know what value you might want.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
--------------------------------------
Flex box
.d-flex {
display: flex;
}
<div class="d-flex"></div>div {
display: flex;
justify-content: flex-start;
}flex-start- justifies the content to left for horizontal orientation or to top for vertical orientationflex-end- justifies the content to right for horizontal orientation or to bottom for vertical orientationcenter- justifies the content to centerspace-between- when there are multiple flex items in a flex container, they will be justified evenly, however, the first and last item won't have space on their outer edgesspace-around- when there are multiple flex items in a flex container, they will be justified evenly.
CSS - Horizontal direction
div {
display: flex;
justify-content: space-around;
}
CSS - Vertical direction
div {
display: flex;
justify-direction: column;
justify-content: spacing-around;
}.container {
display: flex;
flex-direction: row;
}
.container2 {
display: flex;
flex-direction: row-reverse;
}
.container3 {
display: flex;
flex-direction: column;
}
.container4 {
display: flex;
flex-direction: column-reverse;
}explicitly reorder items
CSS
.container {
display: flex;
flex-direction: row;
}
.a {
order: 1;
}
.b {
order: 10;
}
.c {
order: -10;
}
HTML
<div class="container">
<div class="a">Two</div>
<div class="b">Three</div>
<div class="c">One</div>
</div>The
flex-flow property is a shorthand property for flex-direction property and flex-wrap property.The flex-flow property is often used for styling navigations and menus or other lists that can items - product cards or application tiles.
The flex-wrap property defines how the flex container items will be wrapped if they don't fit on one line (or column).
div {
display: flex;
flex-flow: row wrap;
}The flex-wrap property affects how the flex container items will be wrapped.
It can have the following values:
nowrap- this makes all the flex items stay on the one row (for row direction) or column (for column direction)wrap- this makes all the flex items that don't fit on one row (for row direction) or column (for column direction) wrap to another row/column.wrap-reverse- this has the same value aswrap, except the items wrap to the other side.
The align-items defines the alignment of the flex items within the flex-container when the items are wrapped/when there are multiple rows (or columns) on the main axis.
The property can have the following values:
stretch- items are stretched to fit the containercenter- items are positioned at the center of the containerflex-start- items are positioned at the beginning of the containerflex-end- items are positioned at the end of the containerbaseline- items are positioned at baseline of the container
How can you make flex container items that flow from left to right to fill all space from top to bottom?
div {
display: flex;
flex-direction: row;
align-content: stretch;
align-items: stretch;
}How can you define rows and columns for your grid?
You can define rows and columns for your grid by using the CSS properties ‘grid-template-columns’ and ‘grid-template-rows’.
Bootstrap Grid System
Bootstrap's grid system allows up to 12 columns across the page.
Grid Classes
The Bootstrap grid system has four classes:
xs(for phones - screens less than 768px wide)sm(for tablets - screens equal to or greater than 768px wide)md(for small laptops - screens equal to or greater than 992px wide)lg(for laptops and desktops - screens equal to or greater than 1200px wide)
Three Equal Columns
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Three Unequal Columns
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Mixed: Mobile, Tablet And Desktop
div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>