This content originally appeared on DEV Community and was authored by Dharshini E
Hi everyone!
What i learned today:
1.what is display:flex: ?
In css, display:flex: is a values of the display property that enables the flexible layout model for arranging the elements in a container.
when you can apply the display:flex: to the container element,it can become the flex container and its direct children become the flex items.
Syntax:
.container{
display:flex;
}
Flex Property:
-
display:flex;- container into the flex box. -
flex:direction;-define how flex items are placed in the flex container. - -flex default direction is row .
- -row
- -column
- -row-reverse
- -column-reverse
-
justify-content-Aligns items horizontally on main axis. -
align-items-Aligns items vertically on cross axis. -
gap- sets spacing between flex items. Example:
.container{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items: center;
}
Interesting Website to practice flex:
website :https://flexboxfroggy.com
What is marign ?
Add space outside the element between the element and other elements
Example:
div{
margin:20px;
}
What is padding ?
Add space inside the element between the content and the **border.
div{
padding:20px;
}
Inspect
Inspect is a developer tool in your web browser that lets you view and interact with the HTML and CSS of a webpage in real-time.
Where do you find it?
Right click on the webpage and click inspect.
Shortcuts:ctrl + shift + i
Global Selector
The Global Selector(*)selects every elements on the page .
it applies the specified styles to all HTML element, unless overridden by more specific selectors.
Example
*{
margin:0;
padding:0;
}
Final Thoughts
Understanding basic concepts like margin,padding,flex directions ,inspect tools and global selector is essential for building clean and responsive websites .
Happy Codding!
This content originally appeared on DEV Community and was authored by Dharshini E
Dharshini E | Sciencx (2025-07-11T06:10:08+00:00) Day 3 of my Java Full Stack Learning Journey:HTML & CSS. Retrieved from https://www.scien.cx/2025/07/11/day-3-of-my-java-full-stack-learning-journeyhtml-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.