Your first website needs CSS fundamentals ๐ช
Learn:
- CSS basics explained
- Inline vs internal vs external CSS
- How styling actually works
Perfect for beginners & #100DaysOfCode
๐ฅ Watch now
youtu.be/XXjAgltLRLk
#CSSBasics #FrontendDevelopment #Coding #SoftwareDev
1
1
2
103
7 Sep 2025
Day 4/100 ๐
Started learning CSS today. Practiced backgrounds, colors, fonts, lists, links, and buttons. My page finally has some style and no longer looks plain. Excited to keep building from here! ๐จโจ
#100DaysOfCode #WebDevelopment #CSSBasics
1
1
4
39
25 Jul 2025
Day 11 :
Just wrapped up today's CSS lesson!
โข Learned how to align text, add shadows, decorations & change text case.
โข Also got the hang of using px and % for responsive text sizing.
Improving steadily in CSS
#CodeNewbie #CSSBasics #WebDevelopment #100DaysOfCode
1
3
74
19 Jun 2025
Todayโs CSS basics class turned into a full-on mind-opener ๐คฏ. Huge thanks to @jaykosai and @womenindefi_org for making it all make sense!
Still actively learning!
#WebDevJourney #CSSBasics
1
10
109
1 May 2025
๐งฑ CSS BOX Model
#CSSBoxModel #CSSBasics #WebDevelopment #FrontendDev #LearnCSS #CSSLayout #WebDesign #HTMLCSS #UIUXDesign #CodingTips #DeveloperLife
31
27
120
5,203
24 Apr 2025
Day 6 of my Front-end Development Journeyโ
#buildinpublic #CSS #frontendjourney
๐ณ I learnt about some CSS display property value:
โป๏ธBlock
โป๏ธIn-line
โป๏ธIn-line block
โป๏ธFlow-root
๐ณ I also learnt about CSS Float and clear property.
See you tomorrow ๐
#freecodecamp #cssbasics
1
1
9
133
20 Mar 2025
What is display in CSS? ๐จ
The display property in CSS defines how an element is displayed on the webpage, meaning it controls the layout behavior of an element.
Common display values:
block๐งฑ
The element takes up the full width available.
Starts on a new line.
Example: <div>, <p>, <h1>
inline๐งฉ
The element takes up only as much width as needed.
Does not start on a new line.
Example: <span>, <a>
inline-block๐๏ธ
Behaves like inline but allows you to set width & height.
none๐ณ๏ธ
Hides the element from the page (it will not take up any space).
flex๐คน
Makes the element a flex container.
Used to easily align and distribute space between items.
grid๐บ๏ธ
Makes the element a grid container.
Used for building grid-based layouts.
inline-flex ๐ฏ
Same as flex but behaves like inline.
inline-grid๐บ๏ธ
Same as grid but behaves like inline.
Example:
div {
display: flex;
}
This will make the <div> a flex container, and its children will follow flexbox rules.
#CSS #CSS3 #CSSTutorial #LearnCSS #CSSAnimations #CSSFlexbox #CSSGrid #ResponsiveDesign #WebDesign #WebDevelopment #Frontend #FrontendDevelopment #HTMLCSS #CSSBasics #Coding #Programming #WebDev #Tech #Developer #code #coding #pushpendratips
41
12
58
1,231
29 Dec 2024
๐๐๐ ๐๐ญ๐ฒ๐ฅ๐ข๐ง๐ ๐๐ฆ๐๐ ๐๐ฌ ๐ข๐ง ๐๐๐๐๐ญ ๐๐ ๐
#CSSForBeginners #WebDesignTutorial
#FrontendCoding #CSSBasics
#LearnCSSForBeginners #CSSAnimationTutorial
#CSSStyleGuide #WebDevelopmentSkills
#CSSForWebDesigners #WebDevTutorials
#HTMLCSSTutorial #CSSTricksAndTips
2
6
172
16 Nov 2024
Day 9: Building a website is like building a houseโHTML is the foundation, CSS is the design! Today, weโre making things beautiful. ๐ ๐จ #Day9 #WebDesign #CSSBasics #Codeflex2024
3
7
64
20 Oct 2024
๐ Preview: CSS Selectors
Tomorrow, weโll dive into CSS selectors, which are used to target specific HTML elements. Youโll learn how to style individual elements, groups of elements, and even classes and IDs. Stay tuned!
#CSSSelectors #WebDevelopment #CSSBasics
1
1
4
46
20 Oct 2024
๐ Linking an External CSS File
To link a CSS file, use the <link> tag in the <head> section of your HTML file๐๐๐
Make sure youโve created a separate styles.css file, where youโll write all your CSS code!
Ready to style your first webpage?
#CSSBasics #WebDevelopment
1
1
3
38
9 Aug 2024
[#Infographic]: Discover the basic #CSS cheatsheet!
#WebDesign #CSSBasics #FrontEndDevelopment #WebDevelopment #CSSTips #CodingTips #WebDesignTools #WebDesignTips
cc: @BetaMoroney @Nicochan33 @enilev @mvollmer1 @sallyeaves
1
5
142
1 Aug 2024
VS Code: The Ultimate Coding Editor for Beginners | Setup and Benefits
Follow on Youtube: lnkd.in/d7Q_XYbR
Follow on Tiktok: lnkd.in/dxSxRGBB
#CSS #HTML #WebDevelopment #CodingForBeginners #CSSBasics #WebDesign #FrontEndDevelopment #LearnCSS #vscode
1
6
8
673
28 Jan 2024
๐Day 2 Triumph! ๐ Mastered CSS Basics - Part 1: Selectors, Properties, Colors, Fonts, and Margins. My HTML doc got a stylish makeover! ๐ Ready to elevate my web skills! #HTMLBasics #CSSBasics #CodeNewbie #WebDevelopment #100DaysOfCode #ProgressUpdate ๐๐จ
1
1
55
18 Dec 2023
๐ฅ๐ฒ๐ฎ๐ฑ๐ ๐๐ผ ๐น๐ฒ๐๐ฒ๐น ๐๐ฝ ๐๐ผ๐๐ฟ ๐๐ฒ๐ฏ ๐ฑ๐ฒ๐๐ฒ๐น๐ผ๐ฝ๐บ๐ฒ๐ป๐ ๐๐ธ๐ถ๐น๐น๐? ๐๐ฒ๐ฒ๐น ๐ณ๐ฟ๐ฒ๐ฒ ๐๐ผ ๐ฎ๐๐ธ ๐พ๐๐ฒ๐๐๐ถ๐ผ๐ป๐, ๐๐ต๐ฎ๐ฟ๐ฒ ๐๐ผ๐๐ฟ ๐ถ๐ป๐๐ถ๐ด๐ต๐๐, ๐ฎ๐ป๐ฑ ๐น๐ฒ๐'๐ ๐ฟ๐ผ๐ฐ๐ธ ๐๐ต๐ฒ ๐ฐ๐ผ๐ฑ๐ถ๐ป๐ด ๐ท๐ผ๐๐ฟ๐ป๐ฒ๐ ๐๐ผ๐ด๐ฒ๐๐ต๐ฒ๐ฟ!๐ฉโ๐ป๐จโ๐ป
P.C: @w3docs
#CSSBasics
2
15
27 Nov 2023
๐ Good day, web enthusiasts! Over the next two weeks weโre diving into the world of Web Development with a focus on CSS.
Today we begin with what is CSS? CSS stands for Cascading Style Sheets. Itโs a cornerstone technology used alongside HTML and JavaScript to create visually appealing and well-structured web pages.
๐จ CSS is all about style. It allows you to apply styles like colors, fonts, and layouts to your HTML. Imagine it as the outfit that dresses up your web pageโs content.
๐ Why is CSS important? Without it, web pages would be plain text without any distinct layout or design. CSS brings life to the web by enabling a multitude of visual enhancements.
Stay tuned for more insights into CSS! #WebDevelopment #CSSBasics #LearnCSS
2
1
17
760
29 Oct 2023
CSS Basics: Colors, Fonts, and Spacing ๐จ๐๏ธ๐
This evening, letโs delve into some basic CSS properties that can drastically change the look of your HTML pages.
Colors in CSS can be specified by the following methods:
name (red ๐ฅ),
HEX (#FF0000 ๐จ),
RGB (rgb(255, 0, 0) ๐),
or HSL (hsl(0, 100%, 50%) ๐จ).
For instance, body {color: red;} will make the text color red.
Fonts can be changed using the font-family property ๐๏ธ, and the size can be adjusted with font-size ๐.
For example: body {font-family: Arial, sans-serif; font-size: 16px;} will set Arial as the font with a size of 16 pixels.
Spacing is controlled through properties like margin (space outside elements โก๏ธ), padding (space inside elements โฌ
๏ธ), and border (outline of elements ๐).
For instance, p { margin: 20px; padding: 10px; border: 2px solid black;} will style all paragraph elements with specified margin, padding, and border.
Stay tuned as we dive deeper into CSS and further our web development adventure over the next two weeks! #WebDevelopment #CSSBasics #CodingBeginner #html #coding #react #javascript
7
145
10 Oct 2023
๐จ Just wrapped up the basics of CSS! ๐ป Excited to add some style to my web development skills. Thanks to @isanketsingh and @riyabansal1998 for their fantastic guidance. Onward to the next challenge! ๐ #CSSBasics #WebDevelopment #LearningJourney #AlgoCamp
1
4
642
3 Oct 2023
Essential CSS Knowledge Every Front-End Developer Must Grasp ๐๐๏ธ
1. Ways to include CSS:
a. Inline CSS
b. Internal CSS
c. External CSS
d. Using @Import
2. CSS Priority Order:
Inline CSS > Internal CSS > External CSS > @import
3. !important: Use with caution to ensure CSS rules aren't overridden.
4. CSS Position Property:
- static
- absolute
- relative
- fixed
- sticky
5. Display Property:
- Convert inline elements to block, flex, or vice versa.
- Remove elements from the DOM.
- Control layout (Grid/Flex/Table-cell).
6. Z-Index: Manage the stack of views; higher values cover lower ones.
7. Overflow: Control content behavior when it exceeds container size.
8. Box-Model: Understand padding, margin, and border properties.
9. Background: Set background colors or images for HTML elements.
10. Cursor: Customize the mouse cursor style.
11. pointer-events: Control element clickability and interaction.
12. Layout Management: Know how to manage layouts (flex, grid).
13. Pseudo Classes: Style elements based on user interactions (hover, visited, focus).
14. Pseudo Elements: Decorate elements without additional tags (::before, ::after).
15. Border: Add visible borders to elements.
16. Border Radius: Create rounded corners for elements.
17. Opacity: Control element visibility (0 to 1) for effects and animations.
18. box-sizing: Manage element size when applying padding and borders.
CSS is a versatile tool for web designโkeep exploring and experimenting! ๐ #WebDesign #CSSMastery #FrontEnd #CSSBasics
2
91
25 Aug 2023
๐ Day 19 of #100DaysOfCode:
๐จ Explored fundamental CSS properties like color, fonts, margin, and padding and gave my webpage a stylish makeover.๐
#CSSBasics #CodingJourney #iwritecode #buildinpublic
6
2
66
2,461