Free · 195 Topics · No Signup
CSS Notes
Style and lay out web pages — selectors, box model, flexbox, grid and responsive design — written by CodingNow 2.0's mentors. Free to read, structured to actually help you learn.
CSS notes by CodingNow 2.0 cover 195 topics — from css home to rwd templates — each explained with short definitions, syntax and runnable code examples. They are 100% free, need no signup, and work as quick revision for college exams, CSS interviews and CodingNow 2.0's mentor-led CSS course in Pitampura, Delhi.
No notes found. Try a different search term, or browse all CSS notes.
CSS Tutorial
115 of 115 topics publishedCSS HOME
CSS is the language we use to style an HTML document.
CSS Introduction
CSS is the language we use to style a Web page.
CSS Syntax
A CSS rule consists of a selector and a declaration block:
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
Grouping Selectors
The universal selector ( ) selects all HTML elements on the page.
CSS How To
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
Add Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
Add Inline Style
An inline style may be used to apply a unique style for a single element.
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.
CSS Comments
Comments are used to explain the CSS code, and may help when you edit the source code at a later date.
CSS Errors
Errors in CSS can lead to unexpected behavior or styles not being applied correctly.
CSS Colors
In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.
RGB / RGBA
An RGB color value represents RED, GREEN, and BLUE light sources.
HEX / HEXA
A hexadecimal color is specified with: RRGGBB.
HSL / HSLA
HSL stands for hue, saturation, and lightness.
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
Background Image
The background-image property specifies an image to use as the background of an element.
Background Repeat
The background-repeat property sets if/how a background image will be repeated.
Background Attachment
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
Background Shorthand
To shorten the code, it is possible to specify all the background properties in one single property. This is called a shorthand property.
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.
Border Width
The border-width property specifies the width of the four borders.
Border Color
The border-color property is used to set the color of the four borders.
Border Sides
From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.
Border Shorthand
Like you saw in the previous page, there are many properties to consider when dealing with borders.
Rounded Borders
The border-radius property is used to add rounded borders to an element:
CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.
Margin Collapse
Margin collapse is when two margins collapse into a single margin.
CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
Padding box-sizing
The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element
CSS Height / Width
The CSS height and width properties are used to set the height and width of an element.
Min / Max
The min-width and max-width properties are used to set the minimum and maximum width of an element.
CSS Box Model
In CSS, the term "box model" is used when talking about web design and layout.
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
Outline Width
The outline-width property specifies the width of the outline, and can have one of the following values:
Outline Color
The outline-color property is used to set the color of the outline.
Outline Shorthand
The outline property is a shorthand property for setting the following individual outline properties:
Outline Offset
The outline-offset property adds a space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
CSS Text
CSS has a lot of properties for styling and formatting text.
Text Alignment
In this chapter you will learn about the following properties:
Text Decoration
The CSS text-decoration property is used to control the appearance of decorative lines on text.
Text Decoration Styles
The CSS text-decoration-style property sets the style of the decoration line.
Text Transformation
The CSS text-transform property is used to control the capitalization of text in an element.
Text Spacing
CSS has several properties to control text spacing.
Text Shadow
The text-shadow property adds shadow to text.
CSS Fonts
Choosing the right font has a huge impact on how the readers experience a website.
Font Web Safe
Web safe fonts are fonts that are universally installed across all browsers and devices.
Font Fallbacks
Below are some commonly used font fallbacks, organized by the 5 generic font families:
Font Style
The CSS font-style property specifies the font style for a text..
Font Size
The CSS font-size property is used to specify the size of the text/font.
Font Google
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Font Pairings
Great font pairings are essential to great design!
Font Shorthand
To shorten the code, it is possible to specify all the individual font properties in one declaration.
CSS Icons
Icons can easily be added to your HTML page, by using an icon library.
Icons: Bootstrap
To use the Bootstrap glyphicons, add the following line inside the <head section of your HTML page:
Icons: Google
To use the Google icons, add the following line inside the <head section of your HTML page:
CSS Links
HTML links can be styled with many CSS properties, like color , text-decoration , background-color , font-size , font-weight , font-family , etc.).
Link Buttons
CSS can be used to create HTML link buttons:
CSS Lists
In HTML, there are two main types of lists:
CSS Tables
HTML tables can be greatly improved with CSS:
Table Size
The CSS width property is used to set the width of a table.
Table Alignment
The CSS text-align property is used to set the horizontal alignment of the content in <th or <td .
Table Styling
To add some more space between the inner borders and the content in a table, use the padding property on <td and <th elements:
Table Responsive
A responsive table will display a horizontal scrollbar if the screen is too small to display the full content.
CSS Display
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.
Visibility / Hide
When using display: none; the element is completely hidden from the document flow and does not take up any space.
CSS Max-width
The max-width property defines the maximum width of an element.
CSS Position
CSS positioning is about controlling the placement of elements within a web page.
Fixed/Absolute Position
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top,
Sticky Position
An element with position: sticky; toggles between a relative and fixed position, depending on the scroll position.
CSS Position Offsets
Positioning with top, right, bottom, and left
CSS Z-index
The z-index property specifies the stack order of positioned elements.
CSS Overflow
The CSS overflow property controls what happens to content that is too big to fit into an area.
Overflow X and Y
The overflow-x and overflow-y properties allow you to control overflow behavior independently for horizontal and vertical directions.
CSS Float
The float property specifies how an element should float within its container.
Clear / Clearfix
The clear property specifies what should happen with the element that is NEXT to a floating element.
Float Examples
With the float property, it is easy to float boxes of content side by side:
CSS Inline-block
The display: inline-block property combines the features of both inline and block elements.
CSS Align
With CSS, you can center elements (horizontally, vertically, or both) with several methods, depending on the type of element.
Horizontal Align
There are several ways to horizontally center elements in CSS, depending on the type of element.
Vertical Align
Vertical centering in CSS can be achieved using modern layout techniques like Flexbox and Grid, or using positioning with transforms.
CSS Combinators
A combinator is something that defines the relationship between two or more selectors.
CSS Pseudo-classes
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.
Interactive
Interactive pseudo-classes apply styles based on user interaction with elements.
Structural
Structural pseudo-classes select elements based on their position in the document tree.
CSS Pseudo-elements
A CSS pseudo-element is a keyword that can be added to a selector, to style a specific part of an element.
Text
Pseudo-elements for text, allow you to style specific parts of text content, such as the first line or first letter.
Content
Pseudo-elements for content allow you to insert content before or after elements, style list markers, and more.
CSS Opacity
The opacity property specifies the opacity/transparency of an element.
CSS Navigation Bars
A navigation bar is an important component of web design.
Vertical Navbar
In a vertical navigation bar, the navigation links are stacked vertically (on top of each other), and is typically aligned along the left or right side of a web
Horizontal Navbar
In a horizontal navigation bar, the navigation links are stacked horizontally (next to each other), and is typically aligned on the top of a webpage.
CSS Dropdowns
CSS dropdowns are used to display a list of options or content when a user clicks or hover over an element, like a button or a navigation link.
Advanced Dropdowns
If you want the dropdown menu to go from right to left, instead of left to right, add right: 0;
CSS Image Gallery
A CSS image gallery is a collection of images that is displayed in an organized, and often responsive way, on a web page.
CSS Image Sprites
An image sprite is a collection of various small images put into one larger image file, called a "sprite image".
CSS Attribute Selectors
CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both.
Advanced Attr Selectors
Advanced attribute selectors match elements based on partial attribute values using special operators.
CSS Forms
CSS is used to style HTML forms. The look of an HTML form can be greatly improved with CSS:
Style Inputs
With CSS, you can style most of the different input types, like text fields, password fields, checkboxes, radio buttons, and file inputs. You can also style inp
Input Focus / Icons
By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to
Other Form Elements
By default, a <textarea can be resized with a "grabber" in the bottom right corner. To remove the grabber, set the resize property to none :
CSS Counters
With CSS counters, you can create dynamic numbering of elements (like headings, sections, or list items) without using JavaScript.
Nested Counters
You can create multiple counters for different levels of numbering. The following example creates one counter for the page (named "section") and one counter for
CSS Units
CSS units are used to define the length and size of several properties.
Absolute Units
Absolute units are fixed, and the length expressed in any of these will appear exactly that size.
Relative Units
Relative units specify a length relative to another length property (like parent element, root element, or viewport).
CSS Inheritance
CSS inheritance is about what happens if no value is specified for a property on an element.
CSS Specificity
CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element.
Specificity Hierarchy
Each type of CSS selector has a position in the specificity hierarchy, and the selector types carry different "weights".
CSS !important
The !important rule is used to give the value of a specific property the highest priority.
CSS Math Functions
CSS math functions allow mathematical expressions to be used as property values.
CSS Optimization
Optimizing CSS makes your website load faster and run more smoothly; which also results in a better user experience.
CSS Accessibility
A website should be designed to ensure good accessibility for all users, including those with disabilities.
CSS Website Layout
A website is often divided into multiple sections, like a top header, navigation menu, main content, and a footer:
CSS Advanced
55 of 55 topics publishedCSS Rounded Corners
The CSS border-radius property is used to create rounded corners for elements.
CSS Border Images
With the CSS border-image property, you can define an image to be used as the border around an element.
CSS Backgrounds
CSS allows you to add multiple background images for an element, through the background-image property.
Background Size
The background-size property allows you to specify the size of background images.
Background Origin
The CSS background-origin property specifies where the background image is positioned.
Background Clip
The CSS background-clip property defines how far the background (color, image, or gradient) should extend within an element.
CSS Colors
CSS supports 140+ color names, RGB values, HEX values, and HSL values. In addition, there are RGBA values, HEXA values, HSLA values, and the opacity property.
Color Keywords
CSS has some special predefined color keywords that can be used with properties like color , background-color and border-color .
CSS Gradients
The CSS gradient functions let you display smooth transitions between two or more colors within an element.
Radial Gradients
The CSS radial-gradient() function creates a radial gradient.
Conic Gradients
The CSS conic-gradient() function creates a conic gradient.
CSS Shadows
The CSS text-shadow property applies a shadow to text.
Box Shadow
The CSS box-shadow property is used to apply one or more shadows to an element.
CSS Text Effects
CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes.
CSS Custom Fonts
The CSS @font-face rule allows you to define and load custom fonts for use on a webpage.
CSS 2D Transforms
The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements.
Scale
The scale() function increases or decreases the size of an element (according to the parameters given for the width and height).
Skew / Matrix
The skewX() function skews an element along the X-axis by the given angle.
CSS 3D Transforms
The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements.
3D Perspective
To activate a 3D space, the element needs perspective. The perspective defines the distance between the user's viewpoint and the object.
CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
Transition Timing
The transition-timing-function property specifies the speed curve of the transition effect.
CSS Animations
CSS allows animation of HTML elements without using JavaScript!
Animation Timing
The animation-delay property specifies a delay for the start of an animation.
Animation Properties
This page covers the CSS animation direction, fill mode, and the shorthand property.
CSS Tooltips
A CSS tooltip is used to specify extra information about something when the user moves the mouse pointer over an element:
Tooltip Arrows
To create an arrow that should appear from a specific side of the tooltip, add "empty" content after tooltip, with the pseudo-element class ::after together w
CSS Image Styling
You can use the border-radius property to create rounded images:
Image Effects
The opacity property specifies the opacity/transparency of an element.
Hover Overlays
Move your mouse over the image to flip it horizontally:
CSS Image Modal
A modal image gives a user the ability to display a larger version of an image, without navigating away from the current page. When a user clicks on a modal ima
CSS Image Centering
With CSS, you can center images with several methods.
CSS Image Filters
The CSS filter property is used to add visual effects (like blur and saturation) to elements.
CSS Image Shapes
With CSS it is easy to shape (clip) images to circles, ellipses and polygons.
CSS object-fit
The CSS object-fit property is used to specify how an <img or <video should be resized to fit its container.
CSS object-position
The CSS object-position property is used together with the object-fit property to specify how an <img or <video should be positioned with x/y coordinates
CSS Masking
CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element.
Masking - Gradients
CSS gradients can also be used as the mask layer image.
Masking - SVG
The SVG <mask element can be used to apply a mask to an image.
CSS Buttons
With CSS, different HTML buttons can be styled in many ways.
Hover Effects
This page covers CSS button hover effects, shadows, disabled states, and width.
Button Groups
This page covers CSS button groups and animated buttons.
CSS Pagination
Learn how to create a responsive pagination using CSS.
Pagination Styles
This page covers advanced pagination styling including hover effects, transitions, and breadcrumbs.
CSS Multiple Columns
The CSS Multi-column Layout Module allows easy definition of multiple columns of text - just like in newspapers:
Multiple Column Rules
This page covers CSS column rules, span, and width properties.
CSS User Interface
In this chapter you will learn about the following CSS user interface properties:
CSS Variables
The var() function is used to insert the value of a CSS variable.
Overriding Variables
Override Global Variable With Local Variable
Variables and JavaScript
CSS variables have access to the DOM, which means that you can change them with JavaScript.
Variables in MQ
Media Queries are about defining different style rules for different devices (screens, tablets, mobile phones, etc.). You can learn more Media Queries in our Me
CSS @property
The @property rule is used to define custom CSS properties (CSS variables) directly in the stylesheet without having to run any JavaScript.
CSS Box Sizing
The CSS box-sizing property defines how to calculate the width and height of an element: should the calculation include padding and borders, or not.
CSS Media Queries
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.
MQ Examples
Media queries are a popular technique for delivering a tailored style sheet to different devices.
CSS Flexbox
6 of 6 topics publishedFlexbox Intro
CSS Flexbox is short for the CSS Flexible Box Layout module.
Flex Container
The flex container element can have the following properties:
Flexbox Justify Content
The justify-content property aligns the flex items along the main-axis (horizontally).
Flexbox Align Items
The align-items property aligns the flex items vertically (on the cross-axis).
Flex Items
The direct child elements of a flex container automatically becomes flex items.
Flex Responsive
You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices.
CSS Grid
11 of 11 topics publishedGrid Intro
The Grid Layout Module offers a grid-based layout system, with rows and columns.
Grid Container
A grid container contains one or more grid items arranged in columns and rows.
Grid Tracks
Inside the grid container you define the number and size of the grid columns and rows.
Grid Gaps
The space between the rows and columns in a grid container are called gaps (or gutters).
Grid Align
Inside the grid container you can define the alignment of the grid content with the following properties:
Grid Items
A grid container contains one or more grid items.
Grid Item Named
The CSS grid-template-areas is a grid container property, and it specifies areas within the grid layout.
Grid Item Align
Grid items can be aligned within their respective grid cells using properties like:
Grid Item Order
The CSS order property can be used to define the visual order of the grid items.
Grid 12-column Layout
A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design.
CSS @supports
The @supports rule lets you check if the browser supports a specific CSS property or value, and to define fallback styles if the feature is not supported.
CSS Responsive
8 of 8 topics publishedRWD Intro
Responsive web design is about creating web pages that look good on all devices!
RWD Viewport
The viewport is the user's visible area of a web page.
RWD Grid View
Many web pages are based on a grid-view, which means that the page is divided into rows and columns.
RWD Media Queries
CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.
RWD Images
! image (https://www.w3schools.com/css/img_chania.jpg)
RWD Videos
If the width property is set to 100%, the video player will be responsive and scale up and down:
RWD Frameworks
There are many free CSS Frameworks that offer Responsive Design.
RWD Templates
We have created some responsive templates with the W3.CSS framework.
Ready to go from notes to a real career?
Join CodingNow 2.0's CSS course — live mentorship, hands-on projects, and 100% placement support in Delhi NCR.
Enroll Now — Free Demo AvailableCSS Notes – FAQs
What students search before reading CSS notes.
