Scribd
Upload
5 views1 page

Css

The document outlines a comprehensive CSS course covering various topics including CSS basics, selectors, positioning, layout, flexbox, responsive design, styling forms, effects, transitions, and animations. Each lesson details specific properties and techniques, such as text alignment, box model, and media queries. The course aims to equip learners with the skills to effectively use CSS for web design and development.

Uploaded by

Rajdeepzala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views1 page

Css

The document outlines a comprehensive CSS course covering various topics including CSS basics, selectors, positioning, layout, flexbox, responsive design, styling forms, effects, transitions, and animations. Each lesson details specific properties and techniques, such as text alignment, box model, and media queries. The course aims to equip learners with the skills to effectively use CSS for web design and development.

Uploaded by

Rajdeepzala
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

●​ text-align, text-decoration, text-shadow

CSS Course Content ●​ google font


Lesson 7: Positioning and Layout
Lesson 1: Introduction to CSS ●​ position: static, relative, absolute,
●​ What is CSS? fixed, sticky
●​ How CSS works in HTML ●​ z-index
●​ Types of CSS: ●​ float, clear
○​ Inline CSS ●​ display: block, inline, inline-block,
○​ Internal CSS none
○​ External CSS ●​ visibility: hidden vs display: none
●​ CSS Syntax (Selectors, Properties, project: menubar
Values) Lesson 8: CSS Flexbox (Modern
●​ Comments in CSS
Layout)
Lesson 2: CSS Selectors
●​ Flex container and items
●​ Basic selectors:
●​ display: flex
○​ Element selector
●​ flex-direction, flex-wrap
○​ Class selector (.class)
●​ justify-content, align-items, align-self
○​ ID selector (#id)
●​ gap, flex-grow, flex-shrink, flex-basis
●​ Grouping selectors
Lesson 9: Responsive Design
●​ Combinators:
●​ Media queries
○​ Descendant (div p)
●​ Mobile-first design
○​ Child (div > p)
●​ Breakpoints
○​ Adjacent sibling (h1 + p)
●​ Responsive typography and images
○​ General sibling (h1 ~ p)
●​ Viewport meta tag
●​ Attribute selectors
●​ Pseudo-classes (:hover, :nth-child(), Lesson 10: Styling Forms and
etc.) Inputs
●​ Pseudo-elements (::before, ::after) ●​ Input fields, buttons, selects, labels
Lesson 3: Sizing and Units ●​ Focus styles (:focus)
●​ Units: px, %, em, rem, vh, vw ●​ Placeholder styling (::placeholder)
●​ width, height, max-width, min-height Lesson 11: CSS Effects and
Lesson 4: Box Model(div tag) Transitions
●​ Content, Padding, Border, Margin ●​ transition property
●​ box-sizing: content-box vs border-box ●​ transform: rotate, scale, translate
●​ outline vs border ●​ box-shadow, text-shadow
●​ height ●​ filter: blur, brightness, grayscale
●​ width ●​ CSS variables (--primary-color)
●​ max-width,min-width Lesson 12: CSS Animations
●​ max-height,min-height ●​ @keyframes rule
Lesson 5: Colors and Backgrounds ●​ animation-name, animation-duration,
●​ Color values: name, HEX, animation-delay
●​ background-color, ●​ Infinite looping animations
●​ background-image ●​ Combining with hover/focus
●​ background-repeat, background-size,
background-position
●​ opacity
Lesson 6: Text and Fonts
●​ color, font-family, font-size
●​ font-weight, font-style, text-transform
●​ line-height, letter-spacing,
word-spacing

You might also like