Spacing & Sizing
CSS Margins The CSS margin properties are used to create space around elements, outside of any defined borders. Margins define the distance between an element’s border and the surrounding elements. With CSS, you have full control over the margins. CSS has properties for setting the margin for each individual side of an element (top, right, […]
CSS Grid
CSS Grid Components A grid always consists of: A Grid Container – The parent (container) element, where the display property is set to grid or inline-grid One or more Grid Items – The direct children of the grid container automatically becomes grid items Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <style> .container { display: grid; grid-template-columns: auto auto auto; background-color: dodgerblue; padding: 10px; } .container div { background-color: #f1f1f1; border: 1px solid black; padding: 10px; font-size: 30px; text-align: center; } </style> </head> <body> <h1>Grid Layout</h1> <p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html> |
Result CSS Grid Container A grid container contains one or more grid items arranged in columns and […]
Flexbox
CSS Flexbox (Flexible Box Layout) CSS Flexbox is short for the CSS Flexible Box Layout module. Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way. Flexbox makes it easy to design a flexible and responsive layout, without using float or positioning.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <style> .container { display: flex; background-color: DodgerBlue; } .container div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 24px; } </style> </head> <body> <div class="container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div> </body> </html> |
CSS Flex Container Properties […]
Float & Clear
The CSS float Property The float property specifies how an element should float within its container. It places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The float property can have one of the following values: left – The element floats to the left of its container right – […]
Positioning
CSS Positioning CSS positioning is about controlling the placement of elements within a web page. With CSS positioning, you can override the normal document flow. The CSS position Property The position property specifies the positioning type for an element. This property can have one of the following values: static – This is default. Element is positioned according to […]
Display & Visibility
The CSS display Property The display property is an important CSS property for controlling layout. It specifies whether an HTML element is treated as a block or an inline element. Every HTML element has a default display value, depending on what type of element it is. The default display value for most elements is block or inline. The display property is used […]
Borders & Shadows
CSS Border Style The border-style property specifies what kind of border to display. The following values are allowed: dotted – Defines a dotted border dashed – Defines a dashed border solid – Defines a solid border double – Defines a double border groove – Defines a 3D grooved border. The effect depends on the border-color value ridge – Defines a 3D ridged border. […]
Backgrounds
CSS Backgrounds The CSS background properties are used to add background effects for elements. In these chapters, you will learn about the following CSS background properties: background-color background-image background-repeat background-attachment background-position background (shorthand property) CSS background-color The background-color property specifies the background color of an element. Example The background color of a page is set like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } </style> </head> <body> <h1>Hello World!</h1> <p>This page has a light blue background color!</p> </body> </html> |
[…]
Box Model
The CSS Box Model In CSS, the term “box model” is used when talking about web design and layout. The CSS box model is essentially a box that wraps around every HTML element. Every box consists of four parts: content, padding, borders and margins. The image below illustrates the CSS box model: Explanation of the […]
Text & Typography
CSS Text Formatting CSS has a lot of properties for styling and formatting text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <style> div { border: 1px solid gray; padding: 8px; } h1 { text-align: center; text-transform: uppercase; color: #4CAF50; } p { text-indent: 50px; text-align: justify; letter-spacing: 3px; } a { text-decoration: none; color: #008CBA; } </style> </head> <body> <div> <h1>text formatting</h1> <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p> </div> </body> </html> |
CSS Text Color The color property is used to set the color of the text. The color is specified by: a color name – like “red” a HEX value – like “#ff0000” an RGB value – like “rgb(255,0,0)” Look at CSS Color Values for […]