What is included in CSS?π¨
Here's a concise list of topics to learn CSS as a newbie!
A thread: β
Here's a concise list of topics to learn CSS as a newbie!
A thread: β
1β¦ Syntax
Syntax is the set of rules & declarations. It consists of selectors, properties, & values.
Selectors β― Target HTML elements
Properties β― Define how elements are styled
Values β― Specify characteristics of elements
Syntax is the set of rules & declarations. It consists of selectors, properties, & values.
Selectors β― Target HTML elements
Properties β― Define how elements are styled
Values β― Specify characteristics of elements
2β¦ Selectors
Selectors are used to target specific HTML elements & apply styles to them.
CSS offers many types of selectors like:
β’ element selectors
β’ class selectors
β’ ID selectors
β’ attribute selectors
β’ pseudo-classes
β’ pseudo-elements
Selectors are used to target specific HTML elements & apply styles to them.
CSS offers many types of selectors like:
β’ element selectors
β’ class selectors
β’ ID selectors
β’ attribute selectors
β’ pseudo-classes
β’ pseudo-elements
3β¦ Box Model
The box model defines how elements are rendered & how their dimensions are calculated.
It consists of four components:
β’ content
β’ padding
β’ border
β’ margin
Each component affects the size & spacing of the element.
The box model defines how elements are rendered & how their dimensions are calculated.
It consists of four components:
β’ content
β’ padding
β’ border
β’ margin
Each component affects the size & spacing of the element.
4β¦ Layouts
CSS provides several techniques for creating different layouts.
These techniques are:
β’ floats β allow elements to float left/right
β’ positioning β allow precise element placement
β’ flexbox β provide flexible box layouts
β’ grid β enable complex 2D layouts
CSS provides several techniques for creating different layouts.
These techniques are:
β’ floats β allow elements to float left/right
β’ positioning β allow precise element placement
β’ flexbox β provide flexible box layouts
β’ grid β enable complex 2D layouts
5β¦ Display Property
It determines how an element should be rendered on the webpage.
It controls behavior of elements as either:
β’ block
β’ inline
β’ inline-block
β’ none
Different display values affect how elements interact with other elements & flow of content on the page.
It determines how an element should be rendered on the webpage.
It controls behavior of elements as either:
β’ block
β’ inline
β’ inline-block
β’ none
Different display values affect how elements interact with other elements & flow of content on the page.
6β¦ Colors & Backgrounds
CSS offers various ways to define colors & backgrounds.
Color values can be specified using:
β’ color names
β’ hexadecimal
β’ RGB
β’ RGBA
β’ HSL
β’ HSLA
BG properties allow you to set bg colors, images, gradients, & control positioning & repetition.
CSS offers various ways to define colors & backgrounds.
Color values can be specified using:
β’ color names
β’ hexadecimal
β’ RGB
β’ RGBA
β’ HSL
β’ HSLA
BG properties allow you to set bg colors, images, gradients, & control positioning & repetition.
7β¦ Typography
Typography refers to the styling of text on a webpage.
Properties include:
β’ font family
β’ size
β’ weight
β’ style
β’ color
β’ spacing
β’ alignment.
Typography principles & CSS text properties is important for creating readable & visually appealing content.
Typography refers to the styling of text on a webpage.
Properties include:
β’ font family
β’ size
β’ weight
β’ style
β’ color
β’ spacing
β’ alignment.
Typography principles & CSS text properties is important for creating readable & visually appealing content.
8β¦ Borders & Outlines
Border properties allow you to define border width, style, & color.
Outline properties are similar to borders but differ in that they don't take up space in the layout.
Borders & outlines are useful for adding visual distinction & emphasis to elements.
Border properties allow you to define border width, style, & color.
Outline properties are similar to borders but differ in that they don't take up space in the layout.
Borders & outlines are useful for adding visual distinction & emphasis to elements.
9β¦ Pseudo-classes & Pseudo-elements
Pseudo-classes are used to select elements based on their state, such as:
β’ hover
β’ active
β’ focus
Pseudo-elements target & style specific parts of an element, such as:
β’ before
β’ after
allow adding content or modify its appearance.
Pseudo-classes are used to select elements based on their state, such as:
β’ hover
β’ active
β’ focus
Pseudo-elements target & style specific parts of an element, such as:
β’ before
β’ after
allow adding content or modify its appearance.
10β¦ Transitions & Animations
They enable to add motion & dynamic effects to elements.
Transitions define smooth changes in element properties over a specified duration, such as color or size.
Animations are provided by defining key-frames & specifying animation properties.
They enable to add motion & dynamic effects to elements.
Transitions define smooth changes in element properties over a specified duration, such as color or size.
Animations are provided by defining key-frames & specifying animation properties.
11β¦ Media Queries
Media queries help create websites that are optimized for various devices & screen sizes.
They enable responsive web design by adapting the layout & styling, based on factors like:
β’ screen size
β’ resolution
β’ device orientation
Media queries help create websites that are optimized for various devices & screen sizes.
They enable responsive web design by adapting the layout & styling, based on factors like:
β’ screen size
β’ resolution
β’ device orientation
12β¦ Responsive Web Design
It aims to create websites that adapt & provide optimal user experiences across different devices & screen sizes.
It involves using media queries & flexible layouts to create websites that adapt to different devices & screen sizes.
It aims to create websites that adapt & provide optimal user experiences across different devices & screen sizes.
It involves using media queries & flexible layouts to create websites that adapt to different devices & screen sizes.
That's a wrap!
Follow me for more helpful content on Web Dev, WordPress, CSS & JavaScript.
Connect here: β
LinkedIn
linkedin.com
IG
instagram.com
Medium
@ahsannoor101" target="_blank" rel="noopener" onclick="event.stopPropagation()">medium.com
GitHub
github.com
Follow me for more helpful content on Web Dev, WordPress, CSS & JavaScript.
Connect here: β
linkedin.com
IG
instagram.com
Medium
@ahsannoor101" target="_blank" rel="noopener" onclick="event.stopPropagation()">medium.com
GitHub
github.com
github.com/ahsannoor101
ahsannoor101 - Overview
Software Engineer | Technical Writer | Freelance Developer. - ahsannoor101
linkedin.com/in/ahsan-noor/
Ahsan Noor - Frontend Web Developer - Upwork | LinkedIn
A lifelong learner who believes in continuous improvement and growth. I graduated with a bachelor's...
instagram.com/ahsannoor101/
Ahsan Noor (@ahsannoor101) β’ Instagram photos and videos
91 Followers, 70 Following, 46 Posts - See Instagram photos and videos from Ahsan Noor (@ahsannoor10...
medium.com/@ahsannoor101
Ahsan Noor β Medium
Read writing from Ahsan Noor on Medium. π¨π»βπ»Software Engineer ~ Graphic Designer ~ Web Developer ~ S...
Loading suggestions...