Web Development Book PDF

BOXES In CSS, boxes generally fit into two types: block and inline. Each type behaves differently in terms of layout. BLOCK BOXES If a box has a block display type like or : It starts on a new line It respects the width and height property Padding, margin, and border push other e...

BOXES In CSS, boxes generally fit into two types: block and inline. Each type behaves differently in terms of layout. BLOCK BOXES If a box has a block display type like or : It starts on a new line It respects the width and height property Padding, margin, and border push other elements away If no width is set, it stretches to fill its container (usually 100% width) INLINE BOXES If a box has an inline display type like or : It stays on the same line as other inline elements width and height properties don’t apply Top and bottom padding, margins, and borders won’t push other elements away. Left and right padding, margins, and borders will push other inline elements away. RRR You can change the display type of any element using the display property. FOR EXAMPLE, let’s say we have following list of ’s: My Social Networks Instagram Snapchat Github Right now, the browser would display them in one line: Instagram Snapchat Github However, if we change the display type to “block”, each element will take up 100% width of each line: a{ display: block; } Instagram Snapchat Github LLL BOX DIMENSIONS By default a box is sized just big enough to hold its contents. To set your own dimensions for a box you can use the width and height properties. We can specify the size of a box with pixels, rem, em, % and more which we will learn soon. In the example below, there’s a container that’s 300 pixels wide and 300 pixels high. Inside it, there’s a paragraph that’s set to 75% of the container’s width and height, making it 225 pixels wide and 225 pixels high. HTML As of recent data, about 43% of all websites use the website builder WordPress. CSS div.container { height: 300px; width: 300px; background-color: #ffbc00; } p{ height: 75%; width: 75%; background-color: #e8e8e8; } RRR Result As of recent data, about 43% of all websites use the website builder WordPress. LIMITING DIMENSIONS Some page designs adjust to the screen size. The min-width property sets the smallest size a box can be when the window is narrow, while max-width limits how wide a box can get when the window is wide. These properties help keep content readable, especially on small screens. FOR EXAMPLE, we can use max-width to prevent text lines from becoming too wide on large screens, and min-width to stop them from getting too narrow on small screens..article { min-width: 300px; max-width: 700px; LLL background-color: #ffcc00; }  HTML: Understanding CSS min-width and max-width... Result: Empty 800px space You can also limit the height of elements. The min-height property sets the smallest height an element can be. The max-height ensures that an element doesn’t stretch beyond a certain height. “An investment in education gives the best retuns.” RRR DEALING WITH OVERFLOW The overflow property tells the browser how to handle content that’s too large to fit inside a box. It has a few possible values: hidden hides any extra content that does not fit in the box. visible is the default and shows any extra content that does not fit in the box. scroll adds a scrollbar to the box so that users can scroll to see the missing content. auto adds a scrollbar to a box only if the content LLL is too big to fit. In the example below, there’s a container that’s 400 pixels wide, at least 100 pixels and at most 200 pixels tall. If the text is too long, you will see what overflow does. HTML... CSS.article { width: 300px; min-height: 100px; max-height: 200px; overflow: auto; background: #EEE; } Result RRR We can also control overflow on a single axis using the overflow-x property for horizontal overflow or the overflow-y property for vertical overflow. This way, you can add a scrollbar in just one direction if needed. CSS BOX MODEL The box model is a box that surrounds every HTML element. It consists of: content, padding, borders and margins. Margin Border Padding Content CONTENT This is the actual content inside the box, like text or images. It's the central area where your content appears. LLL PADDING The padding is the space between the content and the border. It gives breathing room around the content, making it look less cramped. You can specify different values for each side of a box: HTML Example without padding Example with a padding of 20px CSS p { background: #ffcb06; } p.info { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } Result Example without padding Example with a padding of 20px RRR To shorten the code, it is possible to specify all the padding properties in one property: padding: 10px 5px 20px 8px; The padding property can also take 3 values: padding: 10px 5px 20px ;... it can also take 2 values: padding: 10px 20px ;... and even just one value for every direction: padding: 10px ; BORDER The border wraps around the padding and content. You can style it with different widths, colors, and styles to create a visible boundary around the box. The border-width property is used to control the width of a border. The value of this property can be set with px, em, rem (not % though) or using one of the following values: thin, medium, thick. LLL You can specify different values for each width of a border: HTML Here is a nice border. CSS p{ padding: 10px; border-top-width: 20px; border-right-width: 20px; border-bottom-width: 20px; border-left-width: 20px; } Result If you followed along, you may have realized that no border is being displayed. This is because we have not set the border-width property yet. RRR border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; border-style: none; border-style: hidden; We can also mix a border style for specific sides using border-style-left, border-style-top,... or like setting the shorthands like with the padding property on border-style. The border-color property specifies the color of a border. border-top-color: red; border-right-color: red; border-bottom-color: red; border-left-color: red; LLL Use the border shorthand to set all properties in one line. HTML Here is a colored border. CSS p{ padding: 10px; border: 10px solid red; } Result Here is a colored border. We can also round the corners of an element’s border with the border-radius property: border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; Corner radius (10px) RRR Let’s create a red circle with text in it with border-radius: HTML You can call me schorli CSS.circle { width: 200px; height: 200px; background: red; color: white; text-align: center; line-height: 200px; border-radius: 50%; } Result Centering text via line-height works but is not considered You can call me schorli best practice. We will learn better methods later on. LLL MARGIN The margin is the space outside the border, creating distance between the element and others around it. It pushes elements apart. You can set different margin values for each side of a box: HTML The div element has a left margin of 50px: This element has a left margin of 25px. CSS.info { padding: 10px; margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin-left: 50px; background: #eee; } Result RRR Have you ever noticed the slight gap between the edges of the page and the content? This is due to the DEFAULT MARGIN on the body element, which in most browsers are 8px on each side. Other elements like , , , also come with their own default styles (including margins & paddings). These styles come from the browser’s built-in USER AGENT STYLESHEET. Many browsers implement these defaults differently, which can lead to inconsistencies across browsers. For this purpose you could use a CSS RESET which removes all default styles. You can google “CSS reset stylesheet” and embed the CSS file (preferred) or we could select every element and reset the most important styles like margin and padding: *{ margin: 0; padding: 0; } LLL Now the gap is gone and we have “normalized” the styles for every element across different browsers! Our quick * reset will cause problems with lists though, as we have to set padding for the list items manually. If you do not want this overhead you should stick with premade CSS reset stylesheets (which can be found online). ALIGNING CONTENT We can align block elements using margins and the auto unit. auto essentially tells the browser to let the element take up the available space. Suppose we have a with a fixed with of 100x100 pixels inside a with a black border: div If we now set margin-left: auto; on the div, we will see: div RRR The element now moves to the right side, using every bit of the available space for its left margin. We can also align block elements in the center: HTML Hello World CSS div { border: 2px solid #000; } p{ background: pink; width: 50px; margin: 10px auto 10px auto; text-align: center; } Result Hello World auto will divide all the available space equally between right and left margins and hence center align the element horizontally. LLL Keep in mind that you can't center an element vertically with just margin: auto, unless the element is in a special layout, like flexbox or grid which we cover soon. BOX SIZING We can set how the total width and height of an element is calculated by changing the box-sizing property. There are two main values you can set: content-box the default. The width and height properties include the content, but does not include the padding, border, or margin. border-box The width and height properties include the content, padding, and border, but do not include the margin. RRR border-box is better! The (literal) width you set is the width you get, without having to perform mental math and manage widths that come from multiple properties. For this reason, we should add it to our universal CSS rule which applies the box-sizing to all elements: *{ margin: 0; padding: 0; box-sizing: border-box; } DISPLAY BEHAVIOR Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. We already know some values: block - Makes the element a block-level element. inline - Makes the element inline. inline-block - Behaves like inline but allows setting width, height, margin & padding which is not supported with pure inline elements. none - Completely hides an element from the page. LLL Let’s apply what we have learned so far and create a nice looking navbar, in which links will be shown in one line, except “ which has the display set to hidden: HTML Home About Services Contact CSS body { margin: 0; font-family: Arial, Helvetica, sans-serif; }.navbar { background-color: #333; color: white; text-align: center; padding: 10px 0; } RRR.navbar a { color: white; text-decoration: none; margin: 0 15px; }.navbar a:hover { text-decoration: underline; text-underline-offset: 5px; } Result FLOATING ELEMENTS The float property lets an element "float" to the left or right of its container, allowing other content (like text) to wrap around it. It’s commonly used for images or sidebars. HTML Lorem ipsum dolor sit amet is just a LLL placeholder text... CSS img.thumbnail { float: right; width: 300px; height: 220px; } Result Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. When we use the float property, and we want the next element below (not on right or left), we have to apply the clear property on this element. When clearing floats, you should match the clear to the float (e.g. if an element floats to the left you should clear to the left) HTML Without clear div1 Because div1 is floated left, div2's text wraps around it, even though it comes after div1 in the code. RRR  With clear div3 Because div3 is floated left, div4 moves below it with clear: left; CSS.div1 { float: left; padding: 10px; border: 3px solid #73AD21; }.div2 { padding: 10px; border: 3px solid red; }.div3 { float: left; padding: 10px; border: 3px solid #73AD21; }.div4 { padding: 10px; border: 3px solid red; clear: left; } LLL Result Without clear div1 Because div1 is floated left, div2's text wraps around it, even though it comes after div1 in the code. With clear div3 Because div3 is floated left, div4 moves below it with clear: left; HIDING BOXES The visibility property allows you to hide boxes from users but It leaves a space where the element would have been. These are the two main values: “hidden” or “visible”. HTML Home Shop Contact About us RRR  CSS li { display: inline; margin-right: 10px; } li.coming-soon { visibility: hidden; } Result Home Shop About us BOX SHADOWS The box-shadow property lets you add a drop shadow to a box, similar to how text-shadow works for text (page 194). You can create a single box-shadow with: Two values: Sets offset-x and offset-y Three values: Adds a blur radius Four values: Adds a spread radius Optional, inset keyword: Moves shadow inside the box Optional, color: Sets the shadow’s color LLL HTML Basic Shadow Simple Shadow Multiple Shadows Inset Shadow CSS.box { background-color: #f55c5c; margin: 20px; padding: 10px; }.shadow1 { box-shadow: 10px 10px; }.shadow2 { box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); }.shadow3 { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(0, 0, 255, 0.3); }.shadow4 { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); } RRR Result LLL