CSS short notes pdf with examples

 

1. Introduction to CSS

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. It enhances the visual appearance and layout of HTML elements.

2. CSS Syntax

CSS consists of a selector and a declaration block. The selector specifies which HTML elements the style applies to, and the declaration block contains one or more declarations separated by semicolons.

css
selector {
    property: value;
}

3. CSS Selectors

CSS selectors are patterns used to select HTML elements based on their id, class, type, attribute, etc.

css
/* Element Selector */
p {
    color: blue;
}

/* Class Selector */
.myClass {
    font-size: 16px;
}

/* ID Selector */
#myId {
    background-color: yellow;
}

/* Attribute Selector */
a[target="_blank"] {
    text-decoration: none;
}

4. CSS Colors and Backgrounds

CSS allows you to specify colors using color names, hexadecimal, RGB, RGBA, HSL, or HSLA values.

css
/* Color */
p {
    color: red;
}

/* Background */
div {
    background-color: #f0f0f0;
}

5. CSS Fonts

You can specify font properties such as font-family, font-size, font-weight, etc.

css
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

6. CSS Text and Typography

CSS provides properties for styling text, such as text-align, text-decoration, text-transform, etc.

css
h1 {
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
}

7. CSS Box Model

The CSS box model describes the layout and spacing of elements on a web page. It consists of content, padding, border, and margin.

css
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}

8. CSS Display and Positioning

CSS provides different display and positioning properties to control the layout of elements.

css
/* Display */
.block {
    display: block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}

/* Positioning */
.absolute {
    position: absolute;
    top: 0;
    left: 0;
}
.relative {
    position: relative;
}

9. CSS Box Shadow and Border Radius

You can add shadow effects and rounded corners to elements using box-shadow and border-radius properties.

css
.box {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

10. CSS Transitions and Animations

CSS transitions and animations allow you to create smooth and interactive effects on elements.

css
.button {
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #ff0000;
}

@keyframes slide {
    0% { left: 0; }
    100% { left: 100px; }
}

.box {
    animation: slide 2s infinite alternate;
}

11. CSS Flexbox

Flexbox is a layout model that allows you to create flexible and responsive layouts more easily.

css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

12. CSS Grid

CSS Grid Layout is a two-dimensional layout system for the web that allows you to create complex grid-based layouts.

css
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

13. CSS Media Queries

Media queries allow you to apply different styles based on the characteristics of the device, such as screen size, resolution, etc.

css
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

14. CSS Frameworks

CSS frameworks like Bootstrap, Foundation, and Bulma provide pre-designed styles and components to help you build responsive and attractive websites quickly.

html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

15. CSS Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are used to define special states or parts of elements.

css
/* Pseudo-classes */
a:hover {
    color: red;
}
input:focus {
    border-color: blue;
}

/* Pseudo-elements */
p::first-line {
    font-weight: bold;
}
p::first-letter {
    font-size: 24px;
}

16. CSS Transforms

CSS transforms allow you to rotate, scale, skew, or translate elements in 2D or 3D space.

css
.box {
    transform: rotate(45deg);
    transform: scale(1.5);
    transform: skewX(30deg);
    transform: translateX(50px);
}

17. CSS Gradients

Gradients allow you to create smooth transitions between two or more specified colors.

css
.box {
    background: linear-gradient(to right, red, blue);
    background: radial-gradient(circle, red, yellow, green);
}

18. CSS Variables (Custom Properties)

CSS variables allow you to define reusable values that can be used throughout your stylesheet.

css
:root {
    --main-color: #ff0000;
}

.box {
    color: var(--main-color);
}

19. CSS Flexbox Alignment

Flexbox provides properties for aligning items along the main and cross axes.

css
.container {
    display: flex;
    justify-content: center; /* Align items along the main axis */
    align-items: center; /* Align items along the cross axis */
}

20. CSS Grid Layout Alignment

Grid layout provides properties for aligning items along rows and columns.

css
.container {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center; /* Align items along the row axis */
    align-items: center; /* Align items along the column axis */
}

21. CSS Overflow

The overflow property controls what happens when content overflows its container.

css
.container {
    width: 200px;
    height: 100px;
    overflow: hidden; /* Hide overflow */
    overflow: scroll; /* Add scrollbar */
}

22. CSS Flexbox Order

Flexbox allows you to control the order in which flex items appear within their container.

css
.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }

23. CSS Grid Template Areas

Grid layout allows you to define named grid areas, making it easy to create complex layouts.

css
.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

24. CSS Animations with Keyframes

Keyframes allow you to specify the intermediate steps in a CSS animation.

css
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.box {
    animation: slide 2s infinite alternate;
}

25. CSS Positioning with Z-index

The z-index property specifies the stack order of an element, allowing you to control its visibility when overlapping with other elements.

css
.box1 { z-index: 1; }
.box2 { z-index: 2; }

26. CSS Flexbox Flex Properties

Flexbox provides properties such as flex-grow, flex-shrink, and flex-basis to control how flex items grow, shrink, and their initial size.

css
.item {
    flex-grow: 1; /* Allow item to grow */
    flex-shrink: 0; /* Prevent item from shrinking */
    flex-basis: 100px; /* Initial size of the item */
}

27. CSS Grid Auto Placement

Grid layout allows you to automatically place grid items using the grid-auto-flow property.

css
.container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-auto-flow: dense; /* Automatically fill in empty spaces */
}

28. CSS Transitions Timing Functions

Transitions can use different timing functions such as ease, linear, ease-in, ease-out, and ease-in-out.

css
.transition {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

29. CSS Filter Effects

CSS filters allow you to apply visual effects like blur, grayscale, brightness, contrast, and more to elements.

css
.image {
    filter: blur(5px);
    filter: grayscale(50%);
    filter: brightness(150%);
}

30. CSS Flexbox Alignment Properties

Flexbox provides alignment properties such as align-self, align-content, and justify-self to control the alignment of flex items.

css
.item {
    align-self: flex-end; /* Align item at the end of the cross axis */
    align-content: space-between; /* Distribute space between flex lines */
    justify-self: center; /* Align item in the center of the main axis */
}

31. CSS Grid Template Areas

Grid layout allows you to define named grid areas and easily lay out your content.

css
.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

32. CSS Variables in JavaScript

CSS variables can be accessed and modified using JavaScript, allowing for dynamic styling changes.

javascript
document.documentElement.style.setProperty('--main-color', 'blue');

33. CSS Grid Minmax Function

The minmax() function in CSS Grid allows you to specify a size range for grid tracks.

css
.container {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(200px, 1fr);
}

34. CSS Flexbox Flex Wrap

The flex-wrap property in Flexbox controls whether flex items are forced onto one line or can wrap onto multiple lines.

css
.container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
}

35. CSS Grid Gap

The gap property in CSS Grid specifies the size of the gap between grid rows and columns.

css
.container {
    display: grid;
    grid-gap: 10px; /* Set the gap between grid items */
}

36. CSS Advanced Selectors

CSS supports advanced selectors such as attribute selectors, nth-child selectors, and pseudo-classes for more targeted styling.

css
input[type="text"] {
    border: 1px solid red; /* Style text input fields */
}

ul > li:nth-child(odd) {
    background-color: lightgray; /* Style odd list items */
}

37. CSS Grid Auto-fill and Auto-fit

CSS Grid provides auto-fill and auto-fit keywords to automatically fill the available space with grid items.

css
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

38. CSS Flexbox Order Property

The order property in Flexbox allows you to change the order of flex items without changing their source order in the HTML.

css
.item {
    order: 3; /* Change the order of the item */
}

39. CSS Overflow Property

The overflow property controls how content that overflows its container is handled.

css
.container {
    overflow: hidden; /* Hide overflowing content */
}

40. CSS Transform Origin

The transform-origin property specifies the origin point of a transformation.

css
.box {
    transform-origin: top left; /* Set the origin point to the top left corner */
}

41. CSS Transition Property

The transition property allows you to create smooth transitions between different property values.

css
.button {
    transition: background-color 0.3s ease; /* Add a transition effect to the background color */
}

42. CSS Grid Subgrid

CSS Grid supports subgrids, allowing nested grids to inherit the grid tracks of their parent grid container.

css
.container {
    display: grid;
    grid-template-rows: 100px 1fr;
}

.child {
    display: grid;
    grid-template-rows: subgrid;
}

43. CSS Flexbox Align Content

The align-content property in Flexbox aligns flex lines within a flex container when there is extra space on the cross axis.

css
.container {
    display: flex;
    align-content: space-between; /* Align flex lines with space between */
}

44. CSS Grid Auto-placement

CSS Grid supports automatic item placement with the grid-auto-flow property.

css
.container {
    display: grid;
    grid-auto-flow: dense; /* Automatically fill in empty spaces */
}

45. CSS Filter Functions

CSS filter functions like blur(), grayscale(), and brightness() can be combined to create complex visual effects.

css
.image {
    filter: blur(5px) grayscale(50%) brightness(150%);
}

46. CSS Flexbox Order

Flexbox allows you to change the order of flex items using the order property.

css
.item {
    order: 2; /* Change the order of the item */
}

47. CSS Grid Aspect Ratio

CSS Grid provides a way to maintain the aspect ratio of grid items using the aspect-ratio property.

css
.item {
    aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */
}

48. CSS Text Overflow

The text-overflow property controls how text is clipped when it overflows its container.

css
.container {
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Display an ellipsis (...) for clipped text */
}

49. CSS Counter Styles

CSS allows you to define custom counter styles for use with the counter() and counters() functions.

css
@counter-style myCounter {
    system: fixed;
    symbols: "🍎" "🍌" "🍇" "🍊";
}

.container {
    counter-reset: myCounter;
}

50. CSS Flexbox Gap

CSS Flexbox now supports the gap property to add space between flex items.

css
.container {
    display: flex;
    gap: 10px; /* Add space between flex items */
}