├── images ├── flex.png ├── roadmap.png ├── box model.png └── challenge1.png └── README.md /images/flex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-documentation/HEAD/images/flex.png -------------------------------------------------------------------------------- /images/roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-documentation/HEAD/images/roadmap.png -------------------------------------------------------------------------------- /images/box model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-documentation/HEAD/images/box model.png -------------------------------------------------------------------------------- /images/challenge1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/css-documentation/HEAD/images/challenge1.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Documentation 2 | 3 | - [CSS Full Course with a project | Zero to Hero | English Tutorial](https://youtu.be/lXYo52yFLDk) 4 | - [CSS complete course Bangla (Beginner to Advanced)](https://youtube.com/playlist?list=PLgH5QX0i9K3qjCBXjTmv7Xeh8MDUUVJDO) 5 | - [CSS eCommerce Project Bangla](https://youtube.com/playlist?list=PLgH5QX0i9K3rsTE0J6lv99JsJHlPlIvSC) 6 | 7 | ![css roadmap](images/roadmap.png) 8 | 9 | ## Table of Contents 10 | 11 | 1. [Basic CSS](#1-basic-css) 12 | 13 | - [Introduction to CSS](#11-introduction-to-css) 14 | - [Ways to add CSS](#12-ways-to-add-css) 15 | - [Selectors & combinators](#13-selectors--combinators) 16 | - [CSS Specificity](#14-css-specificity) 17 | - [Typography](#15-typography) 18 | - [Box Model](#16-box-model) 19 | - [box-sizing, opacity, overflow, Visibility](#162-box-sizing-opacity-overflow-visibility) 20 | - [display-properties](#163-display-properties) 21 | - [background properties](#17-background-properties) 22 | - [Basic Layout](#18-basic-layout) 23 | - [Float](#181-float) 24 | - [Positioning](#182-position) 25 | - [z-index & css variables](#183-z-index--css-variables) 26 | - [text-shadow and box-shadow](#184-text-shadow-and-box-shadow) 27 | - [design a card](#185-card-design) 28 | 29 | 2. [Intermediate CSS](#2-intermediate-css) 30 | - [Flex Layout](#21-flexbox-layout) 31 | - [Grid Layout](#22-grid-layout) 32 | - [Responsive Web design](#23-responsive-web-design-rwd) 33 | - [Transform Properties](#24-transform-property) 34 | - [Transition Properties](#25-transition-property) 35 | - [Animation Properties](#26-animation-property) 36 | - [Styling tables and forms](#27-styling-tables-and-forms) 37 | 3. [Advanced CSS](#3-advanced-css) 38 | 39 | - [CSS Architecture](#31-css-architecture-bem-methodology) 40 | - [Performance Optimization](#32-performance-optimization) 41 | - [How to design](#33-how-to-design) 42 | - [Projects](#34-projects) 43 | 49 | 50 | - [Challenges](#35-challenge) 51 | 52 | ## 1. Basic CSS 53 | 54 | ### 1.1 Introduction to CSS 55 | 56 | - CSS stands for Cascading Style Sheets 57 | - It is used to style **html elements** 58 | - Initial release on December 17, 1996 59 | 60 | ### 1.2 Ways to Add CSS 61 | 62 | - 3 main ways to add css with html: Inline CSS, Internal CSS, External CSS 63 | 64 | #### Inline CSS 65 | 66 | - Inline CSS refers to style inside html element. Syntax: `` 67 | - Inline CSS Example is given below: 68 | 69 | ```html 70 |

Welcome to CSS

71 |

72 | aperiam fugiat blanditiis voluptatibus quo! 73 |

74 |

75 | aperiam fugiat blanditiis voluptatibus quo! 76 |

77 | ``` 78 | 79 | #### Internal CSS 80 | 81 | - Inside `` tag we can use internal css with the help of ` 92 | ``` 93 | 94 | - Internal CSS Example is given below; In the example `

` tag is a selector: 95 | 96 | ```html 97 | 98 | 99 | 100 | Learn Internal CSS 101 | 153 | 154 | 155 |

Bangladesh

156 | 157 | ``` 158 | 159 | - Grouping selector: select multiple element by using their names separted with comma. 160 | Example: 161 | 162 | ```html 163 | 164 | 171 | 172 | 173 |

Bangladesh

174 |

Bangladesh

175 |

Bangladesh

176 | 177 | ``` 178 | 179 | - Nested selector: select elements by nesting. ul li a {...}, div p {...} 180 | Example: 181 | 182 | ```html 183 | 184 | 185 | 186 | Learn Internal CSS 187 | 192 | 193 | 194 | 197 | 198 | 199 | ``` 200 | 201 | - Universal selector can help to select all the html elements. It is denoted by \* 202 | Example: 203 | 204 | ```html 205 | 206 | 207 | 208 | Learn Internal CSS 209 | 215 | 216 | 217 |

Hello CSS

218 |

aperiam fugiat blanditiis voluptatibus quo!

219 | 220 | 221 | ``` 222 | 223 | - id selector: is unique inside html document. #id can help to select any element with a given id. use # notation for selecting an id. 224 | Example: 225 | 226 | ```html 227 | 228 | 233 | 234 | 235 |

Bangladesh

236 | 237 | ``` 238 | 239 | - class selector: .class can help to select any element with a given class. use dot notation for selecting a class. 240 | Example: 241 | 242 | ```html 243 | 244 | 249 | 250 | 251 |

Bangladesh

252 | 253 | ``` 254 | 255 | - we can use multiple class name for an html element such as `

this is something

` 256 | - selecting elements with class name, id name example is given below: 257 | 258 | ```html 259 | 260 | 261 | 262 | Learn Internal CSS 263 | 273 | 274 | 275 |
276 |

Hello CSS

277 |

aperiam fugiat blanditiis voluptatibus quo!

278 |
279 |
280 |

Hello CSS

281 |

aperiam fugiat blanditiis voluptatibus quo!

282 |
283 | 284 | 285 | ``` 286 | 287 | - Attribute selectors 288 | 289 | - [References](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) 290 | - syntax for Attribute selectors 291 | 292 | ```css 293 | /*for attribute name attr.*/ 294 | element[attr] { 295 | property: value; 296 | } 297 | 298 | /*for attribute name attr with exactly same value.*/ 299 | element[attr='value'] { 300 | property: value; 301 | } 302 | 303 | /* element with "value" anywhere in the url.*/ 304 | element[attr*='value'] { 305 | property: value; 306 | } 307 | 308 | /* element with "value" anywhere in the url without case sensitivity.*/ 309 | element[attr*='value' i] { 310 | property: value; 311 | } 312 | 313 | /* element end with .value; mainly for link(a) tag.*/ 314 | element[attr$='.value'] { 315 | property: value; 316 | } 317 | ``` 318 | 319 | - Pseudo class selectors 320 | 321 | - Link Pseudo classes: link, visited, hover, active 322 | - Input Pseudo classes: focus, enabled, disabled, checked, required, optional, valid, invalid 323 | - General Pseudo classes: first-child, last-child, first-of-type, last-of-type, nth-child(n), nth-last-child(n), nth-last-of-type(n), root, not 324 | - [References](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) 325 | - syntax for Pseudo class selectors 326 | 327 | ```css 328 | selector:pseudo-class { 329 | property: value; 330 | } 331 | ``` 332 | 333 | - Pseudo element selectors 334 | 335 | - Common Pseudo element: after, before, first-letter, first-line, placeholder, select 336 | - [References](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) 337 | - syntax for Pseudo element selectors 338 | 339 | ```css 340 | selector::pseudo-element { 341 | property: value; 342 | } 343 | -- Child selectors (div > p) 344 | ``` 345 | 346 | - descendent selectors (div p) 347 | - adjacent selectors (div + p) 348 | - general sibling selectors (div ~ p) 349 | 350 | ### 1.4 CSS Specificity 351 | 352 | - [References](https://www.w3.org/TR/selectors-3/#specificity) 353 | 354 | - [specificity calculator](https://specificity.keegan.st/) 355 | 356 | - How to calculate specificity 357 | 358 | - Universal selector (\*) specificity - 0 359 | - Count the number of Elements and Pesudo elements (c) - 1 360 | - Count the number of Classes, attributes, Pseudo classes (b) - 10 361 | - Count the number of IDs (a) - 100 362 | - Inline CSS - 1000 363 | - !important - 10000 364 | 365 | ```css 366 | /* specificity calculator */ 367 | /* a=number of id */ 368 | /* b=number of class, pseduo classes, attributes */ 369 | /* b=number of elements, pesudo elemnts, attributes */ 370 | 371 | /* a=0 b=0 c=1 === 001 */ 372 | h1 { 373 | background-color: grey; 374 | } 375 | 376 | /* a=0 b=1 c=1 === 011 */ 377 | h1.heading { 378 | background-color: blue; 379 | } 380 | 381 | /* a=0 b=1 c=0 === 010 */ 382 | .heading { 383 | background-color: green; 384 | } 385 | 386 | /* a=1 b=1 c=0 === 100 */ 387 | #head { 388 | background-color: red; 389 | } 390 | 391 | /* a=1 b=0 c=1 === 101 */ 392 | h1#head { 393 | background-color: pink; 394 | } 395 | 396 | /* a=1 b=1 c=1 === 111 */ 397 | h1#head.heading { 398 | background-color: brown; 399 | } 400 | ``` 401 | 402 | ### 1.5 Typography 403 | 404 | #### Font Properties 405 | 406 | - `font-size: value;` here value can be px/em/rem. 1rem=16px=100% 407 | - `font-weight: value;` here value can be 100/thin, 200/extra light, 300/light, 400/normal, 500/medium, 600/semi-medium, 700/bold, 800/extra bold, 900/black 408 | - `font-style: value;` here value can be italic/normal/oblique 409 | - `font-family: value;` here value can be any valid font name. In the following example paragaph will have Times New Roman as its font; if Times New Roman is not available then Times will be applied and if Times is not available then serif font will be applied. This process is known as fallback. 410 | 411 | ```css 412 | p { 413 | font-size: 2rem; 414 | font-weight: bold; 415 | font-style: italic; 416 | font-family: 'Times New Roman', Times, serif; 417 | } 418 | ``` 419 | 420 | - [Use google font](https://fonts.google.com/) 421 | 422 | #### How to use Color 423 | 424 | - Syntax: `color: value;` here value can be any color names, hexadcimal colors value, RGB(Red, Green, Blue) color value, hsl (Hue, Saturation, Lightness) value 425 | - Color Name: we can use color names directly as shown below: 426 | 427 | ```css 428 | p { 429 | color: green; 430 | } 431 | ``` 432 | 433 | - RGB: we can use Red, Green, Blue values as shown below: 434 | 435 | ```css 436 | p { 437 | color: rgb(0, 255, 0); 438 | } 439 | ``` 440 | 441 | - Hexadecimal color: It is a code consist of 6 characters where first 2 characters for Red, Next 2 for Green and last 2 characters for Blue. Example is given below: 442 | 443 | ```css 444 | p { 445 | color: #00ff00; 446 | /*we can write one value instead of two similar values*/ 447 | color: #0f0; 448 | } 449 | ``` 450 | 451 | - Important Tools: 452 | - [Canva color wheel](https://www.canva.com/colors/color-wheel/) 453 | - [Color Picker](https://htmlcolorcodes.com/color-picker/) 454 | - [Image color picker](https://imagecolorpicker.com/en) 455 | - https://flatuicolors.com/ 456 | 457 | #### Text styling 458 | 459 | - `text-align: value;` here value can be center / left / right / justify 460 | - `text-transform: value;` here value can be uppercase / lowercase / capitalize 461 | - `text-decoration: value;` here value can be underline / overline / line-through / none 462 | - `text-shadow: value;` here value can be x axis, y axis, colorName 463 | - `text-indent: value;` 464 | - `letter-spacing: value;` 465 | - `word-spacing: value;` 466 | - `line-height: value;` 467 | Example 468 | 469 | ```css 470 | p { 471 | text-align: justify; 472 | text-decoration: underline; 473 | text-transform: uppercase; 474 | letter-spacing: 0.1rem; 475 | word-spacing: 0.2rem; 476 | line-height: 1rem; 477 | text-shadow: 0.1rem 0.1rem green; 478 | } 479 | ``` 480 | 481 | #### Icon & emoji styling 482 | 483 | - [Get emoji from here](https://unicode-table.com/en/) 484 | - [Get icon from here](https://www.iconfinder.com/) 485 | 486 | ```html 487 | 493 | 494 |

I ♥ Bangladesh

495 | ``` 496 | 497 | - How to use font awesome icons 498 | 499 | - [get font awesome icons](https://fontawesome.com/) 500 | - [get font awesome cdn](https://cdnjs.com/libraries/font-awesome) 501 | - add the font awesome cdn inside the html head tag and then you are ready to use font awesome icons 502 | Example 503 | 504 | ```html 505 | 506 | 507 | ``` 508 | 509 | ### 1.6 Box Model 510 | 511 | ![box model](images/box%20model.png) 512 | 513 | - Box model consist of content, padding, border, margin. Total Width = Content Width + Padding + Border + Margin. Total Width = 200px + 10px + 2px + 20px = 232px 514 | 515 | - Content: This is the innermost layer of the box and represents the actual content of the HTML element, such as text, images, or other media. The content area is defined by the element's width and height properties. 516 | - Padding: This is the space between the content area and the element's border. It can be set using properties like padding-top, padding-right, padding-bottom, and padding-left. Padding helps control the spacing inside the element. 517 | - Border: The border surrounds the padding and content areas and is defined by properties like border-width, border-style, and border-color. Borders can be used to create visual boundaries around elements. border-top, border-right, border-bottom, border-left. Syntax: `border: borderWidth borderColor borderStyle;` 518 | - example: `border: 1px green solid;` 519 | - border-style: border-top-style, border-right-style, border-bottom-style, border-left-style 520 | - border-width,border-top-width,border-right-width,border-bottom-width,border-left-width 521 | - border-color,border-top-color,border-right-color,border-bottom-color,border-left-color 522 | - Margin: Margin is the space outside the element's border. It can be set using properties like margin-top, margin-right, margin-bottom, and margin-left. Margins are used to control the spacing between elements on a webpage. 523 | 524 | #### 1.6.2 box sizing, opacity, overflow, visibility 525 | 526 | - box-sizing: border-box (padding and border are subtracted from the width and height of an element), content-box (default one) 527 | - `opacity: value;` value can be between 0-1 528 | - `overflow: value;` here default value is visible but we can use also hidden, auto, scroll 529 | - The visibility property in CSS is used to control the visibility of an HTML element. It can take one of the following values: visibile, hidden, none 530 | 531 | #### 1.6.3 display properties 532 | 533 | - It is used to control how an HTML element is rendered on a web page. 534 | - block: Elements with display: block create a block-level box. They typically start on a new line and stretch across the entire width of their parent container, stacking vertically. Examples include `
`, `

`, and `

`. 535 | 536 | - inline: Elements with display: inline generate an inline-level box. They flow within the content, appearing on the same line as adjacent inline elements. Examples include ``, ``, and `` 537 | 538 | - inline-block: Elements with display: inline-block create a combination of inline and block-level behavior. They flow inline like inline elements but can have their own width and height, similar to block-level elements. This is useful for creating inline elements that can be styled with width and height properties. when use `a` tag check the border-top is working or not. 539 | 540 | - none: Elements with display: none are not displayed on the page at all. They are effectively hidden and do not take up any space in the layout. This is commonly used for hiding elements dynamically with JavaScript. 541 | 542 | - table: Elements with display: table mimic the behavior of HTML `` elements, creating table-like structures. This value is often used in conjunction with other display values like table-row and table-cell for building table layouts without using actual `
` elements. 543 | 544 | - flex: Elements with display: flex become flexible containers. They allow their child elements to be distributed and aligned within them, making it easier to create responsive layouts with elements that grow or shrink as needed. 545 | 546 | - grid: Elements with display: grid create grid containers. They enable two-dimensional layout control, allowing you to arrange child elements in rows and columns. This is especially useful for complex layouts. 547 | 548 | #### width vs max-width 549 | 550 | - The width property sets the explicit width of an element. You specify an exact width value in pixels, percentages, ems, or other supported units. 551 | - The max-width property, on the other hand, sets an upper limit for the width of an element. You specify a maximum width value, just like you do with the width property. 552 | - In many cases, you'll use both width and max-width properties together to create responsive layouts. For example, you might set a width for a container to define its default size and a max-width to ensure it doesn't become too wide on larger screens. 553 | 554 | ```css 555 | .container { 556 | width: 300px; /* Default width */ 557 | max-width: 100%; /* Maximum width to adapt to screen size */ 558 | } 559 | ``` 560 | 561 | ### 1.7 background properties 562 | 563 | - CSS provides several background properties that allow you to control the background of HTML elements, such as text boxes, divs, and entire web pages. These properties enable you to set background colors, images, gradients, and other visual effects. 564 | 565 | - background-color: This property sets the background color of an element. 566 | 567 | ```css 568 | .container { 569 | background-color: #f0f0f0; 570 | } 571 | ``` 572 | 573 | - background-image allows you to set an image as the background of an element. 574 | 575 | ```css 576 | .header { 577 | background-image: url('header-background.jpg'); 578 | } 579 | ``` 580 | 581 | - background-repeat: This property controls how a background image is repeated when it doesn't cover the entire element. Common values include repeat (default), no-repeat, repeat-x, and repeat-y. 582 | 583 | ```css 584 | .content { 585 | background-image: url('pattern.png'); 586 | background-repeat: repeat-x; 587 | } 588 | ``` 589 | 590 | - background-position: background-position determines the starting position of a background image within its container. You can use values like top, bottom, center, left, right, percentages, or length values. 591 | 592 | ```css 593 | .hero { 594 | background-image: url('hero-image.jpg'); 595 | background-position: center top; 596 | } 597 | ``` 598 | 599 | - background-size: This property defines the size of a background image. You can use values like auto, cover, contain, or specific dimensions. 600 | 601 | ```css 602 | .featured { 603 | background-image: url('featured-image.jpg'); 604 | background-size: cover; 605 | } 606 | ``` 607 | 608 | - background-attachment: background-attachment specifies whether a background image is fixed or scrolls with the content. 609 | 610 | ```css 611 | .parallax { 612 | background-image: url('parallax-image.jpg'); 613 | background-attachment: fixed; 614 | } 615 | ``` 616 | 617 | - background (shorthand property): The background property allows you to set multiple background properties in one declaration. You can include background-color, background-image, background-repeat, background-position, background-size, and background-attachment within a single background declaration. 618 | 619 | ```css 620 | .button { 621 | background: #007bff url('button-background.jpg') no-repeat center; 622 | } 623 | ``` 624 | 625 | - example 626 | 627 | ```css 628 | body { 629 | height: 80vh; 630 | background-image: url('./images/me.JPG'); 631 | background-position: center center; 632 | background-size: cover; 633 | background-repeat: no-repeat; 634 | background-attachment: fixed; 635 | background-origin: padding-box; 636 | background-clip: border-box; 637 | background-color: #ccc; 638 | } 639 | ``` 640 | 641 | - gradient-linear/radial 642 | 643 | - background: linear-gradient(direction, colors) 644 | - example 645 | 646 | ```css 647 | .banner { 648 | width: 400px; 649 | height: 400px; 650 | background: linear-gradient(to right, green, orange); 651 | } 652 | ``` 653 | 654 | - background: radial-gradient(style-type, colors) 655 | - example 656 | 657 | ```css 658 | .banner { 659 | width: 400px; 660 | height: 400px; 661 | background: radial-gradient(circle, green, orange); 662 | } 663 | ``` 664 | 665 | ### 1.8 Basic Layout 666 | 667 | #### 1.8.1 float 668 | 669 | - The float property in CSS is used to control the horizontal positioning and layout of elements within their containing elements. It allows elements to "float" to the left or right of their normal position in the document flow, causing text and other elements to flow around them. 670 | 671 | - example: create 3 div in html and add div1, div2, div3 classes with them 672 | 673 | ```html 674 |
675 |
676 |

col1

677 |

Lorem

678 |
679 |
680 |

col2

681 |

Lorem ipsum dolor

682 |
683 |
684 |

col3

685 |

Lorem ipsum dolor sit,

686 |
687 |
688 | ``` 689 | 690 | ```css 691 | .row { 692 | padding: 1rem; 693 | } 694 | .col { 695 | float: left; 696 | width: 31%; 697 | background-color: bisque; 698 | padding: 0.5rem; 699 | } 700 | .row::after { 701 | content: ''; 702 | display: table; 703 | clear: both; 704 | } 705 | ``` 706 | 707 | #### 1.8.2 Position 708 | 709 | - The position property in CSS is used to control the positioning of HTML elements within their containing elements or relative to the viewport. It's a fundamental property for layout and allows you to create complex and responsive designs. 710 | - `position: static(default)/absolute/relative/fixed/sticky` 711 | - make sure to use top, right, bottom, left property with position property 712 | - relative position: relative are still positioned in the normal document flow, but you can adjust their position using the top, right, bottom, or left properties. The element is moved relative to its normal position. 713 | - fixed position: fixed are also taken out of the normal document flow and are positioned relative to the viewport. They remain in a fixed position even when the page is scrolled. 714 | - sticky position: sticky behave like relative within their container until they reach a specified scroll position. Once the element reaches that position, it becomes fixed until the container is scrolled out of view. 715 | - center elements using relative and absolute position 716 | 717 | ```css 718 | .parent { 719 | background-color: green; 720 | height: 20rem; 721 | width: 20rem; 722 | position: relative; 723 | } 724 | .child { 725 | background-color: red; 726 | height: 5rem; 727 | width: 5rem; 728 | position: absolute; 729 | top: 50%; 730 | left: 50%; 731 | transform: translate(-50%, -50%); 732 | } 733 | ``` 734 | 735 | #### 1.8.3 z-index & css variables 736 | 737 | - z-index helps us to maintain the order of stacked elements 738 | - `z-index: value`; value can be negative or positive 739 | - example of css variables: make sure to create 2 html div with class div1, div2 740 | 741 | ```css 742 | :root { 743 | --primary-color: black; 744 | --secondary-color: green; 745 | } 746 | .div1 { 747 | width: 10rem; 748 | height: 10rem; 749 | background-color: black; 750 | background-color: var(--primary-color); 751 | position: absolute; 752 | z-index: 1; 753 | } 754 | 755 | .div2 { 756 | width: 10rem; 757 | height: 10rem; 758 | background-color: green; 759 | background-color: var(--secondary-color); 760 | position: absolute; 761 | left: 5rem; 762 | top: 5rem; 763 | } 764 | ``` 765 | 766 | #### 1.8.4 text-shadow and box-shadow 767 | 768 | - `text-shadow: x-value y-value blur-value color` 769 | - `box-shadow: x-value y-value color` 770 | - `box-shadow: x-value y-value blur-radius color` 771 | - `box-shadow: inset x-value y-value color` 772 | 773 | #### 1.8.5 Card Design 774 | 775 | ```css 776 | 777 | ``` 778 | 779 | ## 2. Intermediate CSS 780 | 781 | ### 2.1 flexbox layout 782 | 783 | - one directional latout. 784 | - ![flex](images/flex.png) 785 | 786 | - [flex layout learning game](https://flexboxfroggy.com/) 787 | - Properties for the Flex Container (Parent): 788 | 789 | - display: To create a flex container, you set display: flex; 790 | - flex-direction: This property defines the direction of the main axis and can be set to values like row, row-reverse, column, or column-reverse. It determines whether items are laid out horizontally or vertically. 791 | 792 | - justify-content: It controls the alignment of items along the main axis. Values include flex-start, flex-end, center, space-between, and space-around. 793 | 794 | - align-items: This property controls the alignment of items along the cross axis. Values include flex-start, flex-end, center, baseline, and stretch. 795 | 796 | - flex-wrap: It determines whether items should wrap onto a new line when they don't fit within the container. Values include nowrap, wrap, and wrap-reverse. 797 | 798 | - Properties for Flex Items (Children): 799 | 800 | - flex: The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. It controls how items grow or shrink relative to each other within the container. 801 | 802 | - order: Use the order property to change the visual order of flex items. By default, items have an order of 0, but you can assign positive or negative values to reorder them. 803 | 804 | - align-self: This property allows you to override the alignment set by align-items for individual flex items. It accepts values like auto, flex-start, flex-end, center, and stretch. 805 | 806 | - example 807 | 808 | ```css 809 | .flex-container { 810 | display: flex; 811 | flex-direction: column/column-reverse/row/row-reverse; 812 | flex-wrap: wrap/no-wrap; 813 | justify-content: flex-start/flex-end/center/space-between/space-around; 814 | align-items: flex-start/flex-end/center/space-between/space-around; 815 | } 816 | .flex-item1 { 817 | order: 2; 818 | flex-basis: 30%; 819 | align-self: center; 820 | flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ 821 | } 822 | .flex-item2 { 823 | order: 1; 824 | flex-basis: 70%; 825 | flex: 2; 826 | } 827 | ``` 828 | 829 | ### 2.2 Grid Layout 830 | 831 | - Two-Dimensional Layouts: CSS Grid Layout is designed for two-dimensional grid-based layouts, where you need to control both rows and columns. It's excellent for creating complex, structured layouts like grids of images or tables. 832 | - Grid is well-suited for creating grid-based designs, such as image galleries, card-based layouts, and magazine-style layouts where items need to align both vertically and horizontally. 833 | - Grid can be used alongside media queries to create responsive layouts. You can change the grid structure or the placement of items at different screen sizes. 834 | - example 835 | 836 | ```css 837 | .grid-container { 838 | display: grid; 839 | grid-template-columns: auto auto auto; 840 | 841 | 843 | grid-gap: 10px; 844 | 845 | } 846 | .grid-item1{ 847 | grid-column-start: 1; 848 | grid-column-end: 3; 849 | grid-column: 1 / 3; 850 | grid-column: 1 / span 3; 851 | grid-row-start: 1; 852 | grid-row-end: 3; 853 | grid-row: 1 / 3; 854 | grid-row: 1 / span 3; 855 | } 856 | ``` 857 | 858 | - example 2 859 | 860 | ```html 861 | 862 | 890 | 891 | 892 |
893 |
894 |

Header

895 |
896 | 899 |
900 |

Main

901 |
902 | 905 |
906 |

footer

907 |
908 |
909 | 910 | ``` 911 | 912 | - example 3 913 | 914 | ```html 915 | 916 | 947 | 948 | 949 |
950 |
951 |

Header

952 |
953 | 956 |
957 |

Main

958 |
959 | 962 |
963 |

footer

964 |
965 |
966 | 967 | ``` 968 | 969 | ### 2.3 Responsive web design (RWD) 970 | 971 | - Responsive web design is an approach to web design and development that aims to make web pages and web applications render well on a variety of devices and screen sizes. It's about designing and building websites that adapt and respond to different viewing environments, ensuring an optimal user experience regardless of whether the user is on a desktop computer, laptop, tablet, smartphone, or other devices. 972 | 973 | - max size 480 mobile device, 768 ipads tablets, 992 laptops, 1024 desktop large screens, 1200 extra large screens TV 974 | - Use box-sizing `box-sizing: border-box` 975 | - Use media query 976 | - Use media end points 977 | 978 | - example 979 | 980 | ```css 981 | .row { 982 | display: grid; 983 | grid-template-columns: auto auto auto; 984 | grid-gap: 1rem; 985 | background-color: aqua; 986 | padding: 2rem; 987 | } 988 | .col { 989 | height: 10rem; 990 | background-color: wheat; 991 | display: grid; 992 | place-items: center; 993 | } 994 | 995 | /* 480 mobile device, 768 ipads tablets, 1024 desktop large screens, 1200 extra large screens TV */ 996 | @media screen and (max-width: 1024px) { 997 | .row { 998 | grid-template-columns: auto auto; 999 | } 1000 | } 1001 | @media screen and (max-width: 768px) { 1002 | .row { 1003 | grid-template-columns: auto; 1004 | } 1005 | } 1006 | ``` 1007 | 1008 | ### 2.4 transform property 1009 | 1010 | - transform property allows us to do 2d or 3d effect to any elements. 1011 | - transform property has 4 differnt values 1012 | 1013 | - transform: scale(number) 1014 | - transform: rotate(degree) 1015 | - transform: translate(x,y) 1016 | - transform: skew(degree) / skewX(degree) / skewY(degree) 1017 | 1018 | [we can also use multiple transform property together like: transform: translate() rotate()] 1019 | 1020 | ```css 1021 | .header__circle { 1022 | width: 20rem; 1023 | height: 20rem; 1024 | background-color: brown; 1025 | color: white; 1026 | 1027 | /* making circle */ 1028 | border-radius: 50%; 1029 | 1030 | /* making beautiful style */ 1031 | border-radius: 220px 220px 40px 50px; 1032 | 1033 | transition: all 0.3s linear; 1034 | } 1035 | 1036 | /* lets add some transform properties here */ 1037 | .header__circle:hover { 1038 | background-color: orange; 1039 | /* transform: scale(1.2); */ 1040 | /* transform: translate(0px, -340px); */ 1041 | transform: rotate(25deg); 1042 | } 1043 | ``` 1044 | 1045 | - skew example 1046 | 1047 | ```css 1048 | .center { 1049 | display: flex; 1050 | justify-content: center; 1051 | align-items: center; 1052 | } 1053 | 1054 | header { 1055 | height: 100vh; 1056 | } 1057 | 1058 | .header__circle { 1059 | width: 20rem; 1060 | height: 20rem; 1061 | background-color: brown; 1062 | color: white; 1063 | 1064 | transform: skew(-5deg); 1065 | transition: all 0.3s linear; 1066 | border-radius: 0.6rem; 1067 | } 1068 | 1069 | /* lets add some transform properties here */ 1070 | .header__circle:hover { 1071 | background-color: orange; 1072 | /* transform: scale(1.2); */ 1073 | /* transform: translate(0px, -340px); */ 1074 | } 1075 | ``` 1076 | 1077 | ### 2.5 transition property 1078 | 1079 | - transition (changing states) properties 1080 | 1081 | - transition-property 1082 | - transition-duration 1083 | - transition-delay 1084 | - transition-timing-function (speed of transition) 1085 | - transition 1086 | [some animations can be attractive however sometime they can cause accessibility issues and also cause migraine] 1087 | 1088 | ```css 1089 | /* transition-property: background-color color or all; 1090 | transition-duration: 1s; 1091 | transition-timing-function: linear; 1092 | transition-delay: 0.5s; 1093 | */ 1094 | 1095 | 1096 | transition: background-color 1s; 1097 | transition: background-color 1s linear; 1098 | transition: background-color 1s linear 0.5s; 1099 | 1100 | /* default value; slow down at the end */ 1101 | transition-timing-function: ease; 1102 | 1103 | /* starts of slowly but then transition speed get fast */ 1104 | transition-timing-function: ease-in; 1105 | 1106 | /* starts of fast but then transition speed gets slow */ 1107 | transition-timing-function: ease-out; 1108 | 1109 | /* transition at an even speed */ 1110 | transition-timing-function: linear; 1111 | 1112 | /* A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. */ 1113 | /* P1 and P3 are the start and the end of the curve */ 1114 | /* p1 and p3 values must be in the range of 0 to 1. */ 1115 | /* it can be used with transition and animation */ 1116 | /* https://cubic-bezier.com/#.17,.67,.83,.67 */ 1117 | transition-timing-function: cubic-bezier(p1, p2, p3, p4); 1118 | ``` 1119 | 1120 | ### 2.6 animation property 1121 | 1122 | - transition is a single time effect not continuous where as animation is continuous 1123 | - CSS offers a range of animation properties and values that allow you to create and control animations on web elements. Here are some of the key CSS animation properties: 1124 | 1125 | 1. **`animation-name`**: 1126 | 1127 | - Specifies the name of the `@keyframes` rule that defines the animation's behavior. 1128 | - Example: `animation-name: slide-in;` 1129 | 1130 | 2. **`animation-duration`**: 1131 | 1132 | - Sets the duration of the animation in seconds (s) or milliseconds (ms). 1133 | - Example: `animation-duration: 2s;` 1134 | 1135 | 3. **`animation-timing-function`**: 1136 | 1137 | - Defines the acceleration curve for the animation. It determines how the animation progresses over time. 1138 | - Common values include `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, and `cubic-bezier()`. 1139 | - Example: `animation-timing-function: ease;` 1140 | 1141 | 4. **`animation-delay`**: 1142 | 1143 | - Specifies the delay before the animation starts, in seconds (s) or milliseconds (ms). 1144 | - Example: `animation-delay: 1s;` 1145 | 1146 | 5. **`animation-iteration-count`**: 1147 | 1148 | - Sets the number of times the animation should repeat. 1149 | - You can use values like `infinite`, `1`, `2`, etc. 1150 | - Example: `animation-iteration-count: 3;` 1151 | 1152 | 6. **`animation-direction`**: 1153 | 1154 | - Determines whether the animation plays forwards, backward, alternates between forward and backward, or stays in place. 1155 | - Values include `normal`, `reverse`, `alternate`, and `alternate-reverse`. 1156 | - Example: `animation-direction: alternate;` 1157 | 1158 | 7. **`animation-fill-mode`**: 1159 | 1160 | - Specifies how the element styles should be applied before and after the animation. 1161 | - Values include `none`, `forwards`, `backwards`, and `both`. 1162 | - Example: `animation-fill-mode: forwards;` 1163 | 1164 | 8. **`animation-play-state`**: 1165 | 1166 | - Controls whether the animation is running or paused. 1167 | - Values are `running` and `paused`. 1168 | - Example: `animation-play-state: paused;` 1169 | 1170 | 9. **`animation`** (shorthand property): 1171 | - Combines the above animation properties into a single declaration. 1172 | - The order is: `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, `animation-play-state`. 1173 | - Example: `animation: slide-in 2s ease 1s infinite alternate forwards;` 1174 | 1175 | These properties can be used individually or together to define and customize animations in CSS. You'll typically use them in conjunction with the `@keyframes` rule, which defines the actual animation behavior by specifying keyframes at different points in time. Together, these properties give you fine-grained control over how elements move, change, and transition on your web page. 1176 | 1177 | - example 1178 | 1179 | ```html 1180 | 1181 | 1182 | 1183 | Document 1184 | 1231 | 1232 | 1233 |
1234 |
1235 |
1236 | 1237 | 1238 | ``` 1239 | 1240 | ### 2.7 Styling Tables and Forms 1241 | 1242 | - create a basic table first and then start styling 1243 | - Example: 1244 | 1245 | ```html 1246 | 1247 | 1248 | 1249 | 1250 | Document 1251 |