Cascading Style Sheets 3 – Part 2 PDF

Cascading Style Sheets 3 – Part 2 ISP465: Introduction to Front End Web Development  CSS Box-Model OUTLINE CSS Position CSS Grid CSS BOX MODEL Content: the inner content of your HTML element. Padding: a box that surrounds an HTML element's inner content. Border...

Cascading Style Sheets 3 – Part 2 ISP465: Introduction to Front End Web Development  CSS Box-Model OUTLINE CSS Position CSS Grid CSS BOX MODEL Content: the inner content of your HTML element. Padding: a box that surrounds an HTML element's inner content. Border: a box that surrounds an HTML element's padding. Margin: a functionally invisible box that surrounds an HTML element's border. The margin is meant to act as white space to separate HTML elements from each other. MARGIN Margins are transparent space and used to create space around elements - OUTSIDE its border. margin-top: The top margin size margin-right: The right margin size margin-bottom: The bottom margin size margin-left: The left margin size margin: Sets all four properties at once MARGIN:SUPPORTED VALUE All the margin properties can have the following values: auto - the browser calculates the margin. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins. length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Margin ALLOW its value to be a negative number.  MARGIN SHORTHAND MARGIN 4 VALUES MARGIN 3 VALUES MARGIN 2 VALUES MARGIN 1 VALUE Syntax margin: 25px 50px 75px margin: 25px 50px 75px; margin: 25px 50px; margin: 25px; 100px; Description top margin is 25px top margin is 25px top and bottom margins all four margins are 25px right margin is 50px right and left margins are are 25px bottom margin is 75px 50px right and left margins are left margin is 100px bottom margin is 75px 50px Margin 2 values Margin 4 values Margin 3 values Margin 1 value PADDING Padding is Paddings are used to generate space around the given element's content - INSIDE its border: padding-top: The top padding size padding-right: The right padding size padding-bottom: The bottom padding size padding-left: The left padding size padding: Sets all four properties at once Don't be afraid to use lots of padding PADDING:SUPPORTED VALUE length - specifies a padding in px, pt, cm, etc. % - specifies a padding in % of the width of the containing element inherit - specifies that the padding should be inherited from the parent element. Padding DISALLOW its value to be a negative number.  PADDING SHORTHAND PADDING 4 VALUES PADDING 3 VALUES PADDING 2 VALUES PADDING 1 VALUE Syntax padding: 25px 50px 75px padding: 25px 50px padding: 25px 50px; padding: 25px; 100px; 75px; Description top padding is 25px top padding is 25px top and bottom padding all four padding are 25px right padding is 50px right and left padding are are 25px bottom padding is 75px 50px right and left padding are left padding is 100px bottom padding is 75px 50px Padding 2 values Padding 1 value Padding 4 values Padding 3 values BOX-SIZING: PADDING WITHOUT BOX-SIZING The CSS box-sizing property allows us to include the padding and border. By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element der in an element's total width and height. BOX-SIZING: PADDING BOX-SIZING – border-box The box-sizing property allows us to include the padding and border in an element's total width and height. In this mode, the width and height properties include content, padding, and borders i.e if we set an element’s width to 300 pixels, that 300 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. BOX-SIZING: PADDING BOX-SIZING – content-box The box-sizing property allows us to include the padding and border in an element's total width and height. In this mode, the width and height properties include only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 300 pixels wide, and the width of any border or padding will be added to the final rendered width. BORDER The border is a (usually visible) border border-style: The type of border none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-color: The color of the border border-width: The width (thickness) of the border Border-radius: To add rounded borders to an element border: Sets all three at once All four borders can also be set separately border-xxx-style border-xxx-color border-xxx-width border-xxx Where xxx is one of left, right, top, bottom CSS POSITION The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). CSS POSITION: STATIC This is the default CSS position applicable to all HTML elements. This position place the HTML elements based on normal document flow. Using this position, top/right/bottom/left properties can not be applicable to elements (ie., static position elements don’t obey top/right/bottom/left properties). Page scrolling does affect this position. CSS POSITION: RELATIVE This position places the element relative to its normal position. This position is relative to normal document flow. Here top/right/bottom/left properties can be applied to elements. Page scrolling does affect this position. If position only applied without top/right/bottom/left properties, it will act like Static position. CSS POSITION: ABSOLUTE This position places the element at the exact position specified. This position is relative to its parent element position when parent element position is relative/absolute. document body (browser viewport) when parent element position is static. document body (browser viewport) when there is no parent element. Page scrolling does affect this position. This position element is completely removed from normal document flow. CSS POSITION: FIXED This position places the element at a fixed place relative to the viewport. Page scrolling does not affect this position. This position element is completely removed from normal document flow CSS GRID The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. To implement grid, we need at least two elements - a parent element called grid container and at least one child element called grid item. Adding display: grid makes the.container element a grid container. Property grid-template-columns to specify the number of columns and width of each.  CSS GRID CONTAINER An HTML element becomes a grid container when its display property is set to grid or inline-grid. Set the div class as grid- container Apply css and set display output output inline-grid Apply css and set display grid Grid-template-columns is set to 3 column with size is auto CSS GRID ITEM Inline-grid grid CSS GRID: grid-template-columns The property grid-template-columns is used to specify how many columns you need and of what size each. This is done by specifying the widths of each column in % , px , rem or any valid value for width separated by spaces. The number of individual values specify will be the number of columns created. EXAMPLE OF CSS GRID USAGE CSS POSITION VS CS GRID THANK YOU