The CSS box model is like an invisible box around every HTML element that determines its size and spacing. The 'box-sizing' property decides how the element's size is calculated: by default, only the content size is considered (content-box), but using 'border-box' includes padding and borders too.
.container { box-sizing: border-box; }
'border-box' makes it easier to manage the size of your elements since the total width and height include padding and borders, making layouts more predictable.
#box-example { box-sizing: border-box; }
In CSS, when two vertical margins meet, they can 'collapse' into one. This means that the space between elements might be smaller than expected. This only happens with vertical margins, not horizontal ones.
/* The margins will collapse to the larger of the two (30px) */ .block-one { margin: 20px; } .block-two { margin: 30px; }
To center an element horizontally, you can set its left and right margins to 'auto'. This makes the margins equal, centering the element within its parent container.
div { margin: auto; }
If content inside an element is too big, the 'overflow' property in CSS helps control what happens. You can hide the overflow, show scrollbars, or let it overflow.
.small-block { overflow: scroll; }
CSS allows setting maximum and minimum sizes for elements. For example, 'max-width' can prevent an element from getting too wide, regardless of the set width.
/* This element will not exceed 200px in width */ .column { max-width: 200px; width: 500px; }
The 'visibility' property in CSS controls whether an element is visible or hidden, but unlike 'display: none', it still takes up space in the layout.
.invisible-elements { visibility: hidden; }
The 'z-index' property determines the stack order of elements on a webpage. Higher z-index values bring elements to the front, while lower values push them back.
.element1 { position: absolute; z-index: 1; } .element2 { position: absolute; z-index: -1; }
Fixed positioning keeps an element in a fixed spot on the page, even when scrolling. This is useful for navigation bars that need to stay visible.
#navbar { position: fixed; }
The 'display' property in CSS determines how an element is displayed on the page. Common values are 'block', 'inline', and 'inline-block', each affecting the layout differently.
.container1 { display: block; } .container2 { display: inline; } .container3 { display: inline-block; }
Absolute positioning places an element exactly where you want, based on the nearest positioned ancestor. Relative positioning moves an element relative to its normal position.
.element { position: absolute; } .element { position: relative; }
The 'float' property allows elements to be aligned left or right. It’s often used to wrap text around images.
.left { float: left; } .right { float: right; }
After using floats, it's often necessary to clear them to prevent layout issues. The 'clear' property can stop elements from wrapping around floated elements.
.element { clear: both; }
Alpha values in CSS control the transparency of colors. You can use 'rgba()' or 'hsla()' to specify colors with an alpha channel, making them transparent.
.midground { background-color: rgba(0, 255, 0, 0.5); } .foreground { background-color: hsla(34, 100%, 50%, 0.1); } .transparent { color: transparent; }
Hex codes are a way to represent colors in CSS using a combination of six characters. Each pair represents red, green, or blue, with values ranging from 0 to 255.
.red { color: #ff0000; } .short-blue { color: #00f; }
HSL stands for Hue, Saturation, and Lightness. It's a way to define colors based on these three properties, making it easier to tweak colors in CSS.
.light-blue { background-color: hsl(200, 70%, 50%); }
RGB stands for Red, Green, and Blue. This model defines colors by mixing different levels of these three colors.
.hot-pink { color: rgb(249, 2, 171); } .green { color: rgb(0, 255, 0); }
CSS provides a set of predefined color names, like 'aqua' or 'khaki', which you can use directly instead of hex or RGB values.
h1 { color: aqua; } li { color: khaki; }
The 'font-weight' property controls the thickness of text. You can use keywords like 'bold' or 'normal', or numbers from 100 to 900, where 400 is normal weight.
/* Bolder text */ p { font-weight: 700; }
The 'font-style' property is used to make text italic. It's commonly used for emphasis.
.text { font-style: italic; }
The '@font-face' rule allows you to use custom fonts on your webpage by specifying a font file hosted on your server or elsewhere.
@font-face { font-family: 'Glegoo'; src: url('//css.site24x7static.com/fonts/Glegoo-Regular.ttf') format('truetype'); }
When specifying fonts, you can provide a list of fallback fonts in case the preferred font is unavailable.
/* Fallback font families */ h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; }
The 'line-height' property adjusts the spacing between lines of text, improving readability. A good practice is to use 1.5 or 1.6 for optimal line height.
body { line-height: 1.6; }
Media queries let you apply different styles for different screen sizes, making your site responsive. Use them to change the layout for smaller screens.
/* Media query for smaller screens */ @media only screen and (max-width: 600px) { .container { flex-direction: column; } }
Fluid grids use percentages instead of fixed units for widths, allowing elements to resize according to the screen size.
/* Example of fluid grid layout */ .column { width: 50%; }
Viewport units (vw, vh, vmin, vmax) in CSS allow elements to size themselves relative to the viewport, making them more responsive.
/* Viewport width */ h1 { font-size: 5vw; }
Breakpoints define specific points where the design adjusts to accommodate different screen sizes, typically for desktops, tablets, and phones.
/* Define breakpoints in CSS */ @media (min-width: 992px) { .main-content { display: flex; } }
Responsive images resize to fit their container. Use the 'max-width' property to ensure images scale down appropriately on smaller screens.
/* Responsive image example */ img { max-width: 100%; height: auto; }
Flexbox is a layout model in CSS that allows you to create complex layouts more easily. It provides control over the alignment, direction, and order of elements.
/* Basic Flexbox Example */ .container { display: flex; flex-direction: row; }
Flexbox provides several alignment properties like 'align-items' and 'justify-content' to center, align, and distribute space within a container.
/* Center content using Flexbox */ .container { display: flex; justify-content: center; align-items: center; }
The 'flex-grow' and 'flex-shrink' properties control how elements resize within a flex container. 'flex-grow' lets items grow to fill space, and 'flex-shrink' controls how they shrink.
.item { flex-grow: 1; flex-shrink: 0; }
Flexbox is excellent for creating navigation menus because it allows you to space out links evenly and center them easily.
/* Navigation menu with Flexbox */ nav { display: flex; justify-content: space-between; }
Flexbox makes it easy to create equal-height columns, perfect for side-by-side elements that need to look uniform.
/* Equal height columns using Flexbox */ .column-container { display: flex; }
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!