CSS Tutorials

 

CSS Topics	Explanation	CSS Code Example
@ Rules	At-rules are CSS statements that instruct CSS how to behave. They include conditions (@media), font rules (@font-face), and more.	@media (min-width: 600px) { body { background-color: lightblue; }}
2D Transform	Allows you to rotate, scale, skew, or translate an element on a 2D plane.	transform: rotate(30deg) scale(1.5);
3D Transform	Extends transformations to three dimensions, allowing for rotations and translations in a 3D space.	transform: perspective(500px) rotateX(10deg);
Align	CSS alignment properties control the alignment of elements within their parent elements or the alignment of text within the element.	.container { display: flex; align-items: center; }
Animation	Lets you gradually change an element from one style to another. You can alter as many CSS properties as you want.	@keyframes example { from {background-color: red;} to {background-color: yellow;} } div { animation-name: example; animation-duration: 4s; }
Arrows	Refers to styling of arrows, often for dropdowns or sliders. Often involves pseudo-elements and borders.	.arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; }
Attr Selectors	Selects elements based on their attributes or attribute values.	input[type="text"] { border: 1px solid #000; }
Aural Media	Style properties that cater to aural devices like screen readers (deprecated in favor of ARIA).	@media speech { h1 { voice-family: Paul, male; pitch: x-low; stress: high; } }

CSS Topics	Explanation	CSS Code Example
Backgrounds	CSS backgrounds define the background elements of boxes, including color, images, and gradients.	body { background: #ffffff url('img_tree.png') no-repeat right top; }
Border Images	Allows images to be used as borders around elements.	div { border: 10px solid transparent; border-image: url('border.png') 30 round; }
Borders	Defines the border appearance on elements.	p { border: 1px solid #000; }
Bottom	Specifies the bottom position of a positioned element.	.sticky { position: fixed; bottom: 0; }
Box Model	Describes the rectangular boxes that are generated for elements in the document tree and rendered into the UI.	div { width: 300px; padding: 10px; border: 5px solid gray; margin: 10px; }
Box Sizing	Defines how the width and height of boxes are calculated.	* { box-sizing: border-box; }
Buttons	Styles button elements.	button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }

CSS Topics	Explanation	CSS Code Example
Clearfix	A method to clear floats. Useful when an element contains only floated children, and we want to contain them within the parent.	.clearfix::after { content: ""; clear: both; display: table; }
Clip	Prior to CSS Masking, used to define the visible area of an element. Now deprecated in favor of clip-path.	img { clip: rect(0px,60px,200px,0px); } (Deprecated)
Color	Sets the color of the text inside an element.	p { color: #ff0000; }
Colors	Refers to the various methods for defining colors in CSS, including named colors, HEX, RGB, RGBA, HSL, and HSLA.	body { background-color: hsla(34, 100%, 50%, 0.5); }
Combinators	Define relationships between selectors to target elements based on their shared relationships in the HTML structure.	.container > .box { background-color: #333; } /* Child combinator */
Comments	Used to include non-executing text in the code for explanations or to temporarily disable code.	/* This is a single-line comment */
Counters	Allow the creation of dynamic counters in content, such as automated numbering of sections.	body { counter-reset: section; } h1 { counter-increment: section; } h1:before { content: counters(section, ".") " "; }
Cursor	Specifies the type of cursor to be displayed when pointing over an element.	.clickable { cursor: pointer; }

CSS Topics	Explanation	CSS Code Example
Dimension	Refers to setting the width and height of an element.	div { width: 100px; height: 200px; }
Display	Specifies if/how an element is displayed, with values like none, block, inline, inline-block, flex, grid, etc.	.inline-example { display: inline; }
Dropdowns	Styles for dropdown menus, often involving a combination of positioning and visibility.	.dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; } .dropdown:hover .dropdown-content { display: block; }
Flexbox	A layout model that allows items in a container to be laid out and aligned in a 'flexible' way.	.flex-container { display: flex; justify-content: space-around; }
Float	Positions an element to the left or right, allowing text and inline elements to wrap around it.	img { float: right; margin: 0 0 10px 10px; }
Focus	Refers to the state of an element when it has received focus, typically through clicking or tabbing into it.	input:focus { border: 2px solid blue; }
Fonts	Pertains to the font family, size, weight, and more text styling of an element's text.	p { font-family: 'Arial', sans-serif; font-size: 14px; font-weight: bold; }
Forms	Styles specific to form elements such as input fields, buttons, select menus, etc.	input[type='text'] { border: 1px solid #ccc; padding: 5px; } button { background-color: #f90; padding: 10px; border: none; cursor: pointer; }

CSS Topics	Explanation	CSS Code Example
Gradients	A way to display smooth transitions between two or more specified colors.	background: linear-gradient(to right, red , yellow);
Height	Sets the height of an element.	div { height: 100px; }
Hover	A pseudo-class that applies a style when the user designates an element (with a pointing device), but does not necessarily activate it.	a:hover { color: #ff0000; }
Hyphens	Controls hyphenation of text; auto, none, and manual values are common.	p { hyphens: auto; }
Icons	Graphic symbols used to represent actions, objects or functions. CSS is often used to size and modify these.	.icon { font-family: FontAwesome; content: "\f007"; }
Image Gallery	Used to create a collection of images in a gallery layout.	.gallery { display: flex; flex-wrap: wrap; } .gallery img { margin: 5px; width: calc(100%/3 - 10px); }
Image Sprites	Technique to use portions of a single image as multiple images, reducing the number of server requests.	.icon { display: inline-block; width: 16px; height: 16px; background-image: url('sprite.png'); background-repeat: no-repeat; background-position: -16px 0; }
Images	Used to set and modify image styles, such as size, borders, and more.	img { width: 100%; height: auto; }
Important	Used to make a style declaration take precedence over other declarations with the same selector and property.	p { color: blue !important; }
Inclusion	No specific CSS property called 'Inclusion', but if referring to including external stylesheets: the use of the @import rule.	@import url('style.css');
Inline Block	A display property that allows elements to sit next to each other on the same line while respecting box model properties.	span { display: inline-block; width: 200px; height: 200p

CSS Topics	Explanation	CSS Code Example
Layers	Layers in CSS refer to the stacking order of elements. The z-index property controls this.	div { position: relative; z-index: 10; }
Layouts	Layouts deal with the arrangement of elements on a page, including positioning, alignment, and spacing.	/* Flexbox layout */ .container { display: flex; justify-content: space-between; }
Links	Styling for <a> elements. Can be styled differently based on their state using pseudo-classes.	a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; }
Lists	Control the appearance of list items with list-style-type and other properties.	ul { list-style-type: square; }
Loaders	Often animated elements that indicate a loading process. Usually involves animations and keyframes.	.loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Margins	Margins are used to create space around elements, outside of any defined borders.	p { margin-top: 20px; margin-bottom: 20px; }
Measurement Units	CSS has several different units for measuring length, including pixels (px), ems (em), percentages (%), and viewport units (vh/vw).	body { font-size: 16px; } h1 { font-size: 2em; } .wrapper { width: 95%; } .viewport-height { height: 100vh; }
Media Types	Media types describe the general category of a device, used in media queries to apply styles for screens, print, etc.	@media screen and (max-width: 600px) { body { background-color: lightblue; } } @media print { body { color: black; } }
Multi Background	Multiple background images can be layered within a single element.	body { background-image: url('image1.png'), url('image2.png'); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }
Multi Columns	The multi-column layout properties allow for easy definition of multiple columns for flowing text, like in a newspaper.	.newspaper { column-count: 3; column-gap: 20px; column-rule: 1px solid #ccc; }

CSS Topics	Explanation	CSS Code Example
Navbar	A navigation bar is a user interface element within a webpage that contains links to other sections of the website.	nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } nav ul li { float: left; } nav ul li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav ul li a:hover { background-color: #111; }
Opacity	The opacity property sets the opacity level for an element, where 1 is opaque and 0 is fully transparent.	.transparent { opacity: 0.5; }
Order	The order property is used with Flexbox to control the order of flex items.	.item { order: 2; /* Will be placed as the second item */ }
Outlines	Outlines are similar to borders but they do not take up space, they are drawn above the content and may overlap other content.	input:focus { outline: 2px solid blue; }
Overflow	The overflow property specifies what should happen if content overflows an element's box.	div { overflow: auto; }
Overlay	An overlay is often an absolutely positioned element that is the full size of the viewport and sits on top of the page content.	.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); }
Padding	Padding is the space between the content of the element and its border.	div { padding: 20px; }
Paged Media	Paged media properties allow us to adjust our documents for print, defining how content is divided into pages.	@page { size: A5; margin: 20mm; }
Pagination	Refers to the process of dividing digital content into discrete pages. CSS does not directly handle pagination logic.	/* CSS doesn't handle the logic for pagination; this would be a design pattern you'd implement. */
Position	The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).	div.sticky { position: sticky; top: 0; }
Positioning	Positioning is how elements are placed on the page and how they are layered with respect to one another.	.above { position: absolute; z-index: 2; } .below { position: relative; z-index: 1; }
Printing	Refers to the CSS adjustments for when the document is printed. @media print is used to target print styles.	@media print { body { color: black; } }
Pseudo Classes	Pseudo classes are used to define the special state of an element.	a:hover { color: #ff0000; }
Pseudo Elements	Pseudo elements are used to style specified parts of an element.	p::first-line { font-weight: bold; }

CSS Topics	Explanation	CSS Code Example
Quotes	Sets the type of quotation marks for quotations.	q { quotes: "“" "”" "‘" "’"; }
Resize	Defines if and how an element's size can be changed by the user.	textarea { resize: both; }
Root	The :root pseudo-class matches the document's root element.	:root { --main-color: #06c; }
Rounded Corner	Used to create rounded corners on elements.	div { border-radius: 10px; }
Scrollbars	Allows styling of the scrollbar for an element.	div::-webkit-scrollbar { width: 10px; } div::-webkit-scrollbar-thumb { background: #888; }
Selectors	Patterns used to select the elements you want to style.	.class { /* ... */ } #id { /* ... */ }
Shadow	Adds shadow effects around elements.	box-shadow: 5px 5px 5px #888;
Tables	Targets the styling of table elements.	table { border-collapse: collapse; } th, td { border: 1px solid black; }
Text	Used to style text elements.	p { color: #333; line-height: 1.5; }
Text Effects	Allows for the styling of text with effects like shadows.	h1 { text-shadow: 2px 2px #ff0000; }
Tooltips	A small "hover box" with information about the item being hovered over.	.tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; }
Translate	Moves an element sideways, up/down, or zoom in/out.	div { transform: translate(50px, 100px); }
Unicode-bidi	Used with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.	p { unicode-bidi: bidi-override; direction: rtl; }
User Interface	Styles particular aspects of the user interface.	input[type="checkbox"] { accent-color: blue; }
Validations	Pseudo-classes that style element states based on form validation.	input:valid { border: 2px solid green; } input:invalid { border: 2px solid red; }
Variables	Custom properties that store specific values to be reused throughout the document.	:root { --main-bg-color: brown; } div { background-color: var(--main-bg-color); }
Visibility	Specifies whether an element is visible.	.invisible { visibility: hidden; }
Web Font	Allows for the use of fonts downloaded from the internet.	@font-face { font-family: "MyWebFont"; src: url("webfont.woff2") format("woff2"); }
Width	Sets the width of an element.	.container { width: 960px; }
Writing Mode	Defines whether lines of text are laid out horizontally or vertically.	p { writing-mode: vertical-rl; }
Z-Index	Sets the stack order of positioned elements.	.on-top { position: absolute; z-index: 10; }
Zoom	Used to zoom in or out on an element. (Not recommended; better to use transform: scale();).	.