CSS Tutorials
1. CSS Introduction
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of HTML elements. It defines how elements look, including colors, fonts, layouts, and spacing, enabling consistent and visually appealing web designs across pages. CSS separates content from design, making websites easier to maintain and style.
Example: Changing text color.
p {
color: blue;
}2. CSS Syntax
CSS rules consist of a selector, which targets HTML elements, and a declaration block, which contains properties and their values enclosed in curly braces. Each declaration includes a property (e.g., color) and a value (e.g., blue), separated by a colon, defining the style to apply.
Example: Basic CSS rule.
h1 {
font-size: 24px;
}3. CSS Selectors
Selectors identify specific HTML elements to apply styles to, using element names (e.g., p), classes (.class), IDs (#id), attributes, or combinations. They allow precise targeting, enabling developers to style individual or groups of elements efficiently.
Example: Class selector.
.myclass {
color: red;
}4. CSS How To
CSS can be applied in three ways: inline (within an HTML element's style attribute), internal (inside a <style> tag in the HTML head), or external (in a separate .css file linked via <link>). External stylesheets are preferred for maintainability and scalability.
Example: Inline CSS.
<p style="color: green;">Text</p>5. CSS Comments
CSS comments, written between /* and */, provide explanations or notes within the code. They are ignored by browsers, helping developers document their styles for clarity and collaboration without affecting the webpage's appearance.
Example: CSS comment.
/* This is a comment */
p {
color: black;
}6. CSS Colors
CSS colors style elements using formats like color names (e.g., red), HEX codes (#ff0000), RGB (rgb(255, 0, 0)), or HSL. These options allow precise control over text, backgrounds, and other properties for consistent visual design.
Example: HEX color.
p {
color: #ff0000;
}7. CSS Backgrounds
Background properties control an element's background, including color, images, positioning, repetition, and size. They enhance visual appeal and can create layered or textured designs for elements like divs or sections.
Example: Background color.
div {
background-color: lightblue;
}8. CSS Borders
Borders define an element's edges with customizable style (e.g., solid, dashed), width, and color. They visually separate or highlight elements, adding structure to layouts like buttons or containers.
Example: Solid border.
div {
border: 1px solid black;
}9. CSS Margins
Margins create space outside an element's border, controlling its distance from neighboring elements. They can be set individually (e.g., margin-top) or uniformly, aiding in layout spacing and alignment.
Example: Margin on all sides.
p {
margin: 10px;
}10. CSS Padding
Padding adds space inside an element, between its content and border. It enhances readability and aesthetics by providing internal spacing, customizable for each side of the element.
Example: Padding on all sides.
div {
padding: 15px;
}11. CSS Height/Width
Height and width properties set an element's dimensions, using fixed units (px) or relative units (%, vw). They define the size of elements like images or divs, crucial for layout control.
Example: Fixed dimensions.
div {
width: 200px;
height: 100px;
}12. CSS Box Model
The CSS box model represents an element's structure, comprising content, padding, border, and margin. It determines the total space an element occupies, critical for designing consistent layouts.
Example: Complete box model.
div {
margin: 10px;
border: 1px solid black;
padding: 10px;
}13. CSS Outline
Outlines are drawn outside an element's border, used for visual emphasis (e.g., focus states) without affecting layout. They can have styles like dashed or solid and customizable colors.
Example: Dashed outline.
p {
outline: 2px dashed blue;
}14. CSS Text
Text properties control alignment (e.g., center), spacing (letter-spacing, line-height), decoration (underline), and transformation (uppercase). They enhance text readability and visual style.
Example: Centered text.
p {
text-align: center;
}15. CSS Fonts
Font properties set typeface (e.g., Arial), size, weight (bold), and style (italic). They allow customization of text appearance, ensuring consistency and readability across a website.
Example: Font family.
p {
font-family: Arial, sans-serif;
}16. CSS Icons
Icons enhance interfaces using font libraries (e.g., Font Awesome) or images. They provide scalable, customizable visual elements for buttons, menus, or decorations, improving user experience.
Example: Font Awesome icon (requires external library).
i {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}17. CSS Links
Link styles customize appearance for states like hover, visited, active, or link using pseudo-classes. They improve navigation by providing visual feedback for user interactions.
Example: Hover effect.
a:hover {
color: purple;
}18. CSS Lists
List properties customize markers (e.g., bullets, numbers) or remove them for navigation menus or custom designs. They control spacing and style for ordered or unordered lists.
Example: Remove list bullets.
ul {
list-style-type: none;
}19. CSS Tables
Table properties style tabular data with borders, spacing (border-collapse), and alignment. They ensure tables are visually clear and responsive for data presentation.
Example: Table border.
table {
border-collapse: collapse;
}20. CSS Display
The display property controls how elements are rendered (e.g., block, inline, none). It's fundamental for layout design, allowing elements to be shown, hidden, or arranged differently.
Example: Hide element.
div {
display: none;
}21. CSS Max-width
Max-width sets an element's maximum width, preventing it from growing too large on wide screens. It's key for responsive designs, ensuring content remains readable.
Example: Max-width for a div.
div {
max-width: 500px;
}22. CSS Position
The position property (static, relative, absolute, fixed, sticky) controls element placement. It enables precise positioning relative to the document, parent, or viewport.
Example: Absolute positioning.
div {
position: absolute;
top: 10px;
}23. CSS Z-index
Z-index controls the stacking order of overlapping elements. Higher values place elements in front, crucial for layered designs like modals or menus.
Example: Set z-index.
div {
z-index: 10;
}24. CSS Overflow
Overflow manages content exceeding an element's boundaries, with options like scroll, hidden, or auto. It's used for controlling visibility or adding scrollbars.
Example: Scroll overflow.
div {
overflow: scroll;
}25. CSS Float
Float positions elements to the left or right, allowing text or other elements to wrap around them. It's commonly used for layouts like images with text.
Example: Float left.
img {
float: left;
}26. CSS Inline-block
Inline-block allows elements to sit inline like text while respecting width, height, and padding. It's useful for creating grid-like layouts without floating.
Example: Inline-block div.
div {
display: inline-block;
}27. CSS Align
Alignment properties like text-align, margin: auto, or flexbox align-items position elements horizontally or vertically, ensuring balanced and centered layouts.
Example: Center alignment.
div {
margin: auto;
}28. CSS Combinators
Combinators (descendant, child, adjacent sibling, general sibling) specify relationships between selectors, enabling precise targeting of nested or related elements.
Example: Descendant selector.
div p {
color: blue;
}29. CSS Pseudo-classes
Pseudo-classes (e.g., :hover, :active, :first-child) style elements based on their state or position, adding interactivity or conditional formatting to designs.
Example: Hover state.
a:hover {
text-decoration: underline;
}30. CSS Pseudo-elements
Pseudo-elements (e.g., ::before, ::first-letter) style specific parts of an element, like the first letter or adding content, enhancing design flexibility.
Example: First letter.
p::first-letter {
font-size: 2em;
}31. CSS Opacity
Opacity sets an element's transparency (0 to 1), affecting visibility of the element and its children. It's used for effects like fading or layering visuals.
Example: Semi-transparent div.
div {
opacity: 0.5;
}32. CSS Navigation Bar
Navigation bars create menus using styled lists or flexbox, often horizontal or vertical, to guide users through a website with clear, interactive links.
Example: Horizontal nav.
ul {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
}33. CSS Dropdowns
Dropdown menus display sub-options on hover or click, using display or visibility properties with pseudo-classes, enhancing navigation in compact spaces.
Example: Simple dropdown.
.dropdown:hover .dropdown-content {
display: block;
}34. CSS Image Gallery
Image galleries arrange images in responsive layouts using float, flexbox, or grid, ensuring visually appealing displays across devices.
Example: Image float.
img {
float: left;
width: 33.33%;
}35. CSS Image Sprites
Image sprites combine multiple images into one file, using background-position to display specific parts, reducing HTTP requests and improving performance.
Example: Sprite background.
.icon {
background: url('sprite.png') 0 0;
}36. CSS Attr Selectors
Attribute selectors target elements based on their attributes or values (e.g., [type="text"]), enabling precise styling of elements like inputs or links.
Example: Attribute selector.
[title] {
color: blue;
}37. CSS Forms
Form styling enhances input fields, buttons, and labels with properties like padding, borders, and focus states, improving usability and visual consistency.
Example: Input styling.
input {
padding: 5px;
border: 1px solid gray;
}38. CSS Counters
Counters automatically number content, like lists or sections, using counter-reset and counter-increment, ideal for dynamic numbering in ordered lists.
Example: List counter.
ol {
counter-reset: my-counter;
}
li::before {
content: counter(my-counter) ". ";
counter-increment: my-counter;
}39. CSS Website Layout
Website layouts use divs, float, flexbox, or grid to structure content into columns, headers, or sidebars, creating organized and responsive page designs.
Example: Two-column layout.
.column {
float: left;
width: 50%;
}40. CSS Units
CSS units (e.g., px, %, rem, vw) define sizes for properties like font-size or width. Relative units ensure responsiveness, while fixed units provide precision.
Example: Relative unit.
p {
font-size: 1rem;
}41. CSS Specificity
Specificity determines which CSS rule applies when multiple rules target the same element, based on selector types (ID, class, element). Higher specificity wins.
Example: Specific selector.
#myid {
color: blue;
}42. CSS !important
The !important rule increases a style's priority, overriding other rules regardless of specificity. It's used sparingly to avoid maintenance issues.
Example: Force color.
p {
color: red !important;
}43. CSS Flexbox
Flexbox is a one-dimensional layout model for arranging items in rows or columns, offering flexible alignment, spacing, and ordering for responsive designs.
Example: Flex container.
.container {
display: flex;
}44. CSS Grid
Grid is a two-dimensional layout system for creating complex layouts with rows and columns, offering precise control over element placement and alignment.
Example: Simple grid.
.grid {
display: grid;
grid-template-columns: auto auto;
}45. CSS Media Queries
Media queries apply styles based on device characteristics like screen width or orientation, enabling responsive designs that adapt to different devices.
Example: Responsive font size.
@media (max-width: 600px) {
p {
font-size: 14px;
}
}46. CSS Transforms
Transforms manipulate an element's appearance with operations like rotate, scale, or translate, creating dynamic visual effects for interactive designs.
Example: Rotate element.
div {
transform: rotate(45deg);
}47. CSS Transitions
Transitions enable smooth changes in CSS properties (e.g., color, size) over a specified duration, enhancing interactivity with gradual visual effects.
Example: Smooth color change.
div {
transition: background-color 0.5s;
}48. CSS Animations
Animations use keyframes to define complex, timed changes in styles, allowing continuous or repeating effects like movement or fading for dynamic interfaces.
Example: Simple animation.
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
div {
animation: mymove 2s infinite;
}49. CSS Tooltips
Tooltips display contextual text on hover using pseudo-elements like ::after, providing additional information or guidance without cluttering the interface.
Example: Simple tooltip.
.tooltip:hover::after {
content: "Tooltip text";
}50. CSS Variables
CSS variables (custom properties) store reusable values, defined in :root or locally, simplifying style updates and maintaining consistency across large projects.
Example: Define and use variable.
:root {
--main-color: blue;
}
p {
color: var(--main-color);
}