#css box model

[thecommoncoder]

The CSS Box Model Explained for Absolute Beginners!

🚨 NEW VIDEO ALERT! 🚨

The CSS Box Model is the key to understanding how elements are sized and spaced on a webpage! In this video, I break it all down—content, padding, borders, margins, and how we can alter the box model to make your layouts more predictable. Enjoy! 🎉

#css #boxmodel #cssboxmodel #webdevelopment #thecommoncoder

https://youtu.be/4-XCi-rxhjw?si=1VLQRYKoCWzsfw_r

[josegremarquez]

Propiedades de las Cajas o Bloques en HTML y su Importancia

En HTML, todos los elementos, desde un simple párrafo hasta una imagen compleja, se representan como cajas. Estas cajas tienen propiedades que nos permiten controlar su tamaño, posición, espaciado y otros aspectos visuales. Comprender estas propiedades es fundamental para crear diseños web personalizados y atractivos. ¿Qué es el Modelo de Caja en CSS? El modelo de caja es una representación…

[pangeasoftware]

[mothprincess]

i've been home for a bit and settled now. i want to slowly build back up to my routine as new year's day approaches but not be hard on myself for taking it easy through the end of the holidays. i will review the box model, review terminal and github (i've pushed maybe 5-10 simple assignments to github but i mess them up every so often), and then delve more deeply into flexbox. i'm approaching the end of my lessons on css but i'm reviewing a lot, as it's hard to grasp the first few times i learn these things, so it takes a while. i have the time. i may use a secondary source to review, as i'm primarily using the odin project. i like reviewing/rounding out what i know using mdn web docs then, i move to javascript. i'm listening to this playlist today ୧ ‧₊˚ 🍵 ⋅

[mellootron]

this blog has a custom theme, if you are on desktop please use this link instead of the default one: https://mellootron.tumblr.com

— — — — — — — — — — — — — — — — — —

hello, this is metro. or mello. or mellotron, it's your choice. im singaporean, autistic (aspergers syndrome on diagnosis) and i subsist exclusively on ice and m&ms

i take any pronouns you want to give me and i act a lot like patrick star. heres my carrd

— — — — — —〘 tastes 〙— — — — — —

i listen to a lotta stuff mainly

royksopp melody am

game osts (Splatoon)

weird al

shibuya-kei (plus-tech squeeze box, orange lounge)

kikuo

— — — — — — 〘 skills 〙— — — — — —

i draw

sometimes i animate using live2d, other times i animate by hand

i know html, css, renpy and how to make an ukagaka

i am a bit versed in papercraft

i make music

i only started 3d modelling around late 2022

— — — — —〘 important 〙— — — — —

don't follow me for fandom stuff i change every few months

if you've been blocked, let me know on an alt and i'll see what i can do. if you get blocked again don't talk to me

apache

hoarded names:

[woolieshubris]

hii alice! i'm very slowly trying to teach myself html/css by making a neocities, (what i have so far can be seen here, it's not much i know) and i was just wondering if you had any useful tips/resources? :0 your neocities is very cool (i was reminded by that other person that asked about it yesterday) so i thought i would ask <3 i'm already using mozilla webdocs and w3schools, but do you have any other recommendations?

i don't really know a lot about html/css yet, (i don't have a ton of coding experience, most of what i've done has been in python) and so i don't really know how html/css should be "structured", if that makes sense.

any help or pointers are appreciated! ty in advance <3 peace

Your neocities looks great! Especially for a beginner!

Things to look into:

For learning, I'd recommend learning more about semantic design- w3schools

Also, do some studying up on the box model! this website I found seems to have a lot of good information- box model

I'd also look into CSS classes- w3schools

Also, the fastest way for you to learn coding is to... look at other people's code! Go onto neocities, scroll till you see a page you like, and then inspect element the shit out of it >:3c Even if it doesn't make sense at first to you, looking at a lot of code can help you learn new ways of doing things!

blogs u should take a look at: Drakul78, moonview, twelvemen, and nyaa!

OK so for code analysis:

Overall: I like your website a lot! It's simple, it's cute, and it's functional. These are tips for when you want to "upgrade" your site, but as is, it works great :3c

I like to avoid putting traits other than background onto "body", since it severely limits what you can do with your website. (If you wanted to have multiple boxes on screen, for example, you can't do that...)

Also, the contrast between the background and the text is a little too low for my liking, but your text is nice and large so it's not too much of an issue. If you are going to make your text smaller though, you'll need to change those colors.

You already are using semantic design elements in your website, which is really good! Also, using style.css instead of putting it into the page itself is also really good practice.

Ideas for the future:

This is very subjective, but I feel like you are using your website like someone might use a caard. It's pretty, but each page is static, and links to another static page! You can merge a lot of this information into your index- such as credits/links :3c

FONTS! FONTS! FONTS! there are so many beautiful fonts in this world, and with google fonts, you can easily apply them all to your website!! ( •̀ ω •́ )✧ google fonts

also, since you mentioned you were a coder- I'd recommend setting up a way for you to use vscode to edit your page! One of my friends wrote some git code for me that makes it so I can edit my page without making a billion changes to it in quick succession. I'll ask them if I can share it with you if that would interest you, and I could make a separate post on my visual studio code layout if you are curious :3c

[hob28]

Learn HTML and CSS: A Comprehensive Guide for Beginners

Introduction to HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the core technologies for creating web pages. HTML provides the structure of the page, while CSS defines its style and layout. This guide aims to equip beginners with the essential knowledge to start building and designing web pages.

Why Learn HTML and CSS?

HTML and CSS are fundamental skills for web development. Whether you're looking to create personal websites, start a career in web development, or enhance your current skill set, understanding these technologies is crucial. They form the basis for more advanced languages and frameworks like JavaScript, React, and Angular.

Getting Started with HTML and CSS

To get started, you need a text editor and a web browser. Popular text editors include Visual Studio Code, Sublime Text, and Atom. Browsers like Google Chrome, Firefox, and Safari are excellent for viewing and testing your web pages.

Basic HTML Structure

HTML documents have a basic structure composed of various elements and tags. Here’s a simple example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>My First Web Page</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1>Welcome to My Web Page</h1>

    <p>This is a paragraph of text on my web page.</p>

</body>

</html>

: Declares the document type and HTML version.

: The root element of an HTML page.

: Contains meta-information about the document.

: Connects the HTML to an external CSS file.

: Contains the content of the web page.

Essential HTML Tags

HTML uses various tags to define different parts of a web page:

to : Headings of different levels.

: Paragraph of text.

: Anchor tag for hyperlinks.

: Embeds images.

: Defines divisions or sections.

: Inline container for text.

Creating Your First HTML Page

Follow these steps to create a simple HTML page:

Open your text editor.

Write the basic HTML structure as shown above.

Add a heading with the tag.

Add a paragraph with the tag.

Save the file with a .html extension (e.g., index.html).

Open the file in your web browser to view your web page.

Introduction to CSS

CSS is used to style and layout HTML elements. It can be included within the HTML file using the <style> tag or in a separate .css file linked with the <link> tag.

Basic CSS Syntax

CSS consists of selectors and declarations. Here’s an example:

css

Copy code

h1 {

    color: blue;

    font-size: 24px;

}

Selector (h1): Specifies the HTML element to be styled.

Declaration Block: Contains one or more declarations, each consisting of a property and a value.

Styling HTML with CSS

To style your HTML elements, you can use different selectors:

Element Selector: Styles all instances of an element.

Class Selector: Styles elements with a specific class.

ID Selector: Styles a single element with a specific ID.

Example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>Styled Page</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

    <h1 class="main-heading">Hello, World!</h1>

    <p id="intro">This is an introduction paragraph.</p>

</body>

</html>

In the styles.css file:

css

Copy code

.main-heading {

    color: green;

    text-align: center;

}

#intro {

    font-size: 18px;

    color: grey;

}

CSS Layout Techniques

CSS provides several layout techniques to design complex web pages:

Box Model: Defines the structure of an element’s content, padding, border, and margin.

Flexbox: A layout model for arranging items within a container, making it easier to design flexible responsive layouts.

Grid Layout: A two-dimensional layout system for more complex layouts.

Example of Flexbox:

css

Copy code

.container {

    display: flex;

    justify-content: space-around;

}

.item {

    width: 100px;

    height: 100px;

    background-color: lightblue;

}

Best Practices for Writing HTML and CSS

Semantic HTML: Use HTML tags that describe their meaning clearly (e.g., , , ).

Clean Code: Indent nested elements and use comments for better readability.

Validation: Use tools like the W3C Markup Validation Service to ensure your HTML and CSS are error-free and standards-compliant.

Accessibility: Make sure your website is accessible to all users, including those with disabilities, by using proper HTML tags and attributes.

Free Resources to Learn HTML and CSS

W3Schools: Comprehensive tutorials and references.

MDN Web Docs: Detailed documentation and guides for HTML, CSS, and JavaScript.

Codecademy: Interactive courses on web development.

FreeCodeCamp: Extensive curriculum covering HTML, CSS, and more.

Khan Academy: Lessons on computer programming and web development.

FAQs about Learning HTML and CSS

Q: What is HTML and CSS? A: HTML (HyperText Markup Language) structures web pages, while CSS (Cascading Style Sheets) styles and layouts the web pages.

Q: Why should I learn HTML and CSS? A: Learning HTML and CSS is essential for creating websites, understanding web development frameworks, and progressing to more advanced programming languages.

Q: Do I need prior experience to learn HTML and CSS? A: No prior experience is required. HTML and CSS are beginner-friendly and easy to learn.

Q: How long does it take to learn HTML and CSS? A: The time varies depending on your learning pace. With consistent practice, you can grasp the basics in a few weeks.

Q: Can I create a website using only HTML and CSS? A: Yes, you can create a basic website. For more complex functionality, you'll need to learn JavaScript.

Q: What tools do I need to start learning HTML and CSS? A: You need a text editor (e.g., Visual Studio Code, Sublime Text) and a web browser (e.g., Google Chrome, Firefox).

Q: Are there free resources available to learn HTML and CSS? A: Yes, there are many free resources available online, including W3Schools, MDN Web Docs, Codecademy, FreeCodeCamp, and Khan Academy.

[keeplearninbud]

Day 1 (10-7-23)

I'm keeping it simple today. I'm restarting freeCodeCamp's responsive web design certification. I've already done a good chunk of it, including some of the projects, but I am dissatisfied with how those turned out. Additionally, it's been so long since I've coded that I just need a reminder of the basic terms and syntax.

I didn't start at the very beginning - I redid the survey project a little more recently and didn't feel I needed to do it again. Instead I worked on the CSS box model course and was pleased to find that it all came back to me pretty quickly. Learning something new can be intimidating to me as a former Gifted Kid ™ and recovering perfectionist, so it was nice to do something easy for day 1.

After a few more courses, the next project is a tribute page, and I have a really exciting idea for it! I'm trying to theme my projects to tell a story in order to make learning more exciting for my brain. I figure if I can wring some dopamine outta this damn thing while I learn, I'll want to come back for more.

It's time for dinner now though! I got some soba noodles and I am very excited to make somethin tasty with them :)

[kira-likes-code]

CSS Box Model

Does anyone have better resources on this than I do? I get it conceptually, but I'm having a hard time with the finer details. I'm using Codecademy to learn. Anything is helpful.

Thanks!

[crackjob]

Padding vs Margin in CSS:

Q01. What is the difference between Padding and Margin? Q02. What is the CSS Box Model? Q03. What is the Margin Collapse in CSS? Q04. Which one allows a negative value between margin and padding?

[fainthedcherry]

IT'S NEW YEARS OVER HERE SO LET ME LAUNCH MY BABIES AT YOU FOR IT!!!!

In case you want their backstories, I just recommend you go over to their Toyhou.ses respectively, as- typing on Tumblr is a pain for my PC. My PC hates Tumblr in particular for some reason, whenever I format text, and I can't LIVE without formatting text as a hobby-author man. xD

LINK TO MARCO'S STORY

LINK TO ZORRO'S STORY

For new users; Marco was made by Heavenly-Hellfire and Hollowed-Hartlocke. I bought him back in 2019! Still love him like it's day 1. My best, most adorable boy <3, he's become my actual role model, I love him sm ;:

In case you never read them before, hopefully you enjoy the reads!!! I hope you can forgive the older grammar on Zorro's. I def plan to rewrite it, once I finish working on my raider-code. (It's been taking so long bc I'm trying to learn to use the CSS mixin z-index class-type. I still can't figure out image borders for the life of me, but I learned rotation class-types LOL.)

I've wanted to redraw both their reference sheet for almost YEARS now. Ever since I've gotten Marco, I continuously evolved how I draw him, over and over, to a point his old ref had become a detriment, due to how differently I draw him nowadays LOL. One thing that desperately needed a redo for him especially, how his hair is supposed to be drawn + his wings. His wings looked like floppy chicken nuggets on the old one LOL. PLUS! I added a section of details, where I see artists I commissioned, struggle with or fail on. Hopefully the detail section is sufficient in fixing that! I'm not sure, if I should also add a mention, of Marco's dot details below the pink pattern, as even the distance between the dots is different. + I LOVE DRAWING EXPRESSIONS. So to also add a small box of extras for Marco's cool glowy eyes was a treat. <3

I plan to redraw his refs for his magic wind attacks perhaps, as for now, I have a shabby drawing, and I got a free animation program lately, so I can FINALLY unleash my years of experience animating, in the appropriate program now LMAO. My own limitations of using SAI to animate, was making my animations look choppy and bad for years unfortunately, so my art always looked very amateur-ish when I actually know how to animate..

Speaking of that, for the attentive...Yes, I plan to possibly try and draw a 360° turnaround of my characters, as the next natural progression of refs next. I am SO close, so so SO close to making my art finally look like it's part of my project I've been working on for years in private. Ever since this year, people have proven, that you CAN start an animated series on the internet, and it will receive an audience. I also wanted to start an animated series when I was a teen, and now that I'm an adult I can make it happen for sure, with the right talents. When the time comes, I might seek out a music producer and perhaps, if I'll have the money, hire animators, so that I'm not the only one who has to work on the series I planned.

For Zorro....He had it coming. Last time I drew his ref, he looked like a 16 yo/ mobian child, it pissed me off for so many years, once I learned how to properly make adult characters look adult lol. THE CEREAL SPITTER NOW ACTUALLY LOOKS ADULT AND LIKE THE BASTARD SELF HE SHOULD BE. I don't have too much to add to him, but I consider him still a WIP in my brain bc- RAIDER PAGE CODE. I WANNA FINISH. GRABBY HANDS. I CAN FEEL THAT IF I LEARN Z-INDEX FINALLY I CAN REALISE THAT CODE. I've wanted to make a code for my raiders 3 years ago already y'all it's painful to be patient w/ myself sdgkldslgdsg

I'm so satisfied, with my ref sheets finally looking, like a professional drew them imho!! If you disagree w/ that notion, feel free to tell me what's missing or where I need to improve on! :D

My 2024 started amazing and with laughter and appreciation for my friends, I'm so happy finally. 3 years in a row, all I did was cry each new year, and be in pain. 2024 feels like it could be my year. Year of the dragon, bless me with your energetic and powerful spirit please,, 🙏

ANYWAY. Forgive me in advance for watermarks, but I kind of? Am paranoid now over my art a bit bc my work is good now? Like I think I'm in the final stages of my artistry. I can feel, that I might find the perfect style soon. I need to experiment just a bit more. Just a bit more...I might consider loosening up my linework in 2024. I honestly still? Hate lineart? Like..My lineart looks good now, don't get me wrong but. I just love sketchy artwork so much more??? Sketching is so fun, creating is so joyful, when it's a sketch..But lineart kind of.....Ruins my art. I think I should loosen up. It's why I might change my approach a millionth time, but my artstyle has potential now. I don't feel, like my art is awful anymore or worth nothing, it now HAS worth, I now HAVE the right to have an ego about it, but some pieces still are missing, to give me the ultimate happiness and relief in my work. Perhaps if I do some more commissions, I might unlock my final potential? We'll see.

My aspirations for 2024;

Pass the prep-exam for my workplace (I LOVE MY WORK. I SINCERELY WISH I'LL PASS. I love work so much omg I don't wanna be fired so badly)

Draw more art of Finn & Marco so they finally pass Chloe in most images on TH (I REALLY DON'T WANT HER TO HAVE THE MOST IMAGES STILL. It should either be my comfort boys or C.I.Ta)

Be more experimental with mixing medias traditionally (I wanna start mixing mini craft-projects + my drawings or mix more pencils + markers and also glass pens + watercolours. I rlly rlly wanna experiment and go loose.)

Animate more and possibly even post said animations. I know animation takes me HELL OF A LOT of time, as I lack so much time to do so, but I'd love to do that

Stop stressing so hard over OTA's and commissions. I know I tell myself each year, "this year will be the year I wanna finish all my owed art!!" But every once and a while, I need to be a realist to myself, my optimism may be good, but it sometimes..Is a little over-eager. But I noticed in 2023, I really heavily strangle myself out. I haven't drawn any private art since 2020, really.....It says a lot about an artist, if they now haven't drawn a personal drawing and finished it, in the same quality of their owed work for 4 years now. I haven't been really honest to myself and my heart, and I'd like to forgive myself slowly, by allowing to both work on owed work, and start creative, passionate art-projects again, again, where I can let loose and just. Experiment. Do something new. Push the boundaries of my art. Combine medias, collages, etc, anything under the sun I wanna try. I limit myself so hard, over chasing a goal, I can't achieve, if I won't acknowledge, I'll cause my own death as an artist, if I continue to chase unattainable goals, I can't achieve, if I won't be gentle to myself.

Finish revamping my commission sheet. It requires, I draw new examples of course. The big thing I need to warn ahead; I will have a fat price-increase, due to work taking all the time I can have now. I can only work around 4hrs a day on art. My art takes around 20 hours to be finished. Every piece is done with love, with time, with effort. I'm not an artist, who adheres to algorithms. I'm an artist who lives with passion, with freedom in mind. I have an endless amount of ideas, I have an infinite amount of space and ways to create it. I am not a machine, I am, what an artist strives to be. To simply...Create. AI can go to hell, and drag NFTs along with it. I to this day get attempts to be hacked, by tech bros, believe it or not. I pissed off BAYC on Twitter once, and some butthurt idiot, is still trying to get to my Insta and Steam to this day. Won't happen anymore with 2FA idiot, lmao. I won't allow a 2nd hack to happen.

Finish giving ALL my characters on TH a floatie icon. I know w/ 100% certainty, that I got this task in the bag. This one is of no problem at all.

With that, thank you for reading my world-salad! Almost as tasty, as mom's olivier-salad. Yumyum. Btw secret lil teaser ig below here lmao. I started Finn's sheet too, and I've got it 1/3rds done, but I don't wanna burn myself out on ref-sheets, so perhaps you'll see Finn also reworked in a few months! ✨

[josegremarquez]

El Modelo de Caja en CSS: La Base de Todos los Elementos Web

¿Qué es el modelo de caja? Imagina cada elemento de tu página web como una caja. Esta caja tiene un contenido (el texto o imagen), un borde, un relleno y un margen. El modelo de caja es la forma en que CSS describe y posiciona estas cajas en la página. Comprender este concepto es fundamental para crear diseños web precisos y personalizados. Como ya hemos visto, el modelo de caja es la…

[sprictercatalog]

Day 4/100 of Code!

Learned about Selectors, Visual Rules, and the Box Model in CSS

pretty easy shit yk the usual, Visual Rules is text color, typeface blah blah blah

And that cool thing is the box model!

Signing off, with this much in the percentage

[ctrlaltdeletebones]

About This Blog

Hi, I'm Lina- An artist from the USA who likes anime and cartoons, but has too many excuses to not finish a series. Even though I've been creating my whoIe life, I took art more seriously because of a certain Nickelodeon cartoon... Recently, I've been learning to crochet so I can release an army of amigurumi plushies online! Below is some basic info about this blog:

My Beloved Fandoms

Breadwinners

South Park

Hetalia

Gregory Horror Show

Popee the Performer

Aqua Teen Hunger Force

Superjail!

Camp Camp

Vocaloid/UTAU/vocal synth music

Danganronpa

ENA

Misc. Experimental/Avant-garde media

Hobbies I Partake in

Drawing

DTM music production

HTML/CSS web development

Python coding

Crocheting

Clay sculpting

Cosplay

Supporting artists of all follower sizes

Blogging

3D modeling

Collecting vocal synth boxes

Writing stories/fanfiction

Journaling

Sketchbook binding

Collecting CDs

What Does My Username Mean?

"Ctrl Alt Delete" is the common keyboard shortcut to log into a computer, and I have an interest in technology. Because of this, I have numerous robot OCs, in which I released a meme comic page of two of them randomly in 2019. It had one of the characters (Yamato, the albino one) receive a bucket of KFC, who then proceeded to consume it whole- Including the bones. My username = Ctrl Alt Delete (eat) Bones.

Misc. Info

I don't have a DNI criteria, all I suggest is that you play nice and strongly refrain from getting political in my notes/comments/asks/etc.

Do keep in mind that I'm an adult and will occasionally make inappropriate jokes, but I am a SFW account

If you're looking for something in particular, please refer to my hashtags!

[ao3cassandraic]

I was in library school from 2003 to 2005. Wifi was broadly available only on the first couple of floors of the seven-story building. From the fourth floor, where my classes were, the only place wifi was anything close to reliable was near the external windows on the north side of the building. In the main classroom it was not available at all.

My laptop weighed somewhere between five and ten pounds. It ran Windows NT, if I remember right, and it actually did so reliably and without fuss (and definitely without inescapable advertising; current Windows is a horrorshow).

I did not have a mobile phone; I could count the people I knew who did on one hand. They were expensive and frankly unnecessary.

Web design was still wringing its hands about the CSS box model. Designers were just barely dipping a toe in making stripped-down sites "for mobile." Responsive design was definitely not a thing yet.

Younger writers. Please, just know that you could not skip to different songs on a cassette tape, that’s CDs. With tapes you pressed fast forward or rewind and prayed.

Also, VHS tapes did not have menu screens. Your only options were play, fast forward, rewind, pause, stop, or eject.

Y’all are making me feel like the crypt keeper here, I’m begging you 😭

[kandztuts]

CSS 58 💻 Cheatsheet

New Post has been published on https://tuts.kandz.me/css-58-%f0%9f%92%bb-cheatsheet/

CSS 58 💻 Cheatsheet

Basic Selectors Element Selector: Targets elements by tag name. `p color: blue; ` Class Selector: Targets elements with a specific class. ` .highlight background-color: yellow; ` ID Selector: Targets an element with a specific ID (unique). ` #main-title font-size: 36px; ` Universal Selector: Applies to all elements. ` * margin: 0; padding: 0; ` Attribute Selector: Targets elements with specific attributes or attribute values. `[type="text"] border: 1px solid black; ` Combinators Descendant Combinator (Space): Selects elements that are descendants of another element. ` div p color: red; ` Child Combinator ( ): Selects direct children of an element. ` ul li font-weight: bold; ` Adjacent Sibling Combinator (+): Selects the element immediately following another element. ` h1 + p margin-top: 20px; ` General Sibling Combinator (~): Selects all siblings that follow another element. ` h2 ~ p font-style: italic; ` Box Model Margin: The space outside the border. ``` margin: 10px; margin-top: 20px; margin-left: 30px; margin-right: 40px; margin-bottom: 50px; ``` Padding: The space inside the border. ``` padding: 10px; padding-top: 20px; padding-left: 30px; padding-right: 40px; padding-bottom: 50px; ``` Border: The line around an element. ``` border: 1px solid black; border-width: 2px; border-style: dashed; border-color: red; ``` Width/Height: Sets the width and height of an element. ``` width: 300px; height: 200px; ``` Typography Font Family: Specifies the font family for text. `font-family: Arial, sans-serif;` Font Size: Sets the size of the font. `font-size: 16px;` Font Weight: Controls the boldness of the font. ` font-weight: bold;` Text Align: Aligns text within an element. ` text-align: center;` Background Background Color: Sets the background color of an element. `background-color: #f0f0f0;` Background Image: Sets a background image for an element. `background-image: url('image.jpg');` Background Repeat: Controls how the background image is repeated. `background-repeat: no-repeat;` Background Position: Positions the background image within an element. ` background-position: center;` Display Display Block: Makes an element take up the full width available and start on a new line. ` display: block;` Display Inline: Allows elements to sit next to each other horizontally. ` display: inline;` Display Inline-Block: Combines both inline and block properties. ` display: inline-block;` Display Flex: Creates a flex container for child elements. `display: flex;` Display Grid: Creates a grid container for child elements. ` display: grid;` Positioning Position Static: Default value. Elements are positioned according to the normal flow of the document. ` position: static;` Position Relative: Moves an element relative to its normal position. ``` position: relative; top: 20px; left: 30px; ``` Position Absolute: Positions an element relative to the nearest positioned ancestor (not static). ``` position: absolute; top: 50px; right: 100px; ``` Position Fixed: Keeps an element in a fixed position even when scrolling. ``` position: fixed; bottom: 20px; left: 30px; ``` Flexbox Flex Direction: Defines the direction of the main axis (row or column). ``` flex-direction: row; /* Default */ flex-direction: column; ``` Justify Content: Aligns items along the main axis. ``` justify-content: flex-start; /* Default */ justify-content: center; justify-content: flex-end; justify-content: space-between; justify-content: space-around; ``` Align Items: Aligns items along the cross axis. ``` align-items: stretch; /* Default */ align-items: flex-start; align-items: center; align-items: flex-end; ``` Grid Grid Template Columns: Defines the number and size of columns in a grid container. ` grid-template-columns: repeat(3, 1fr);` Grid Template Rows: Defines the number and size of rows in a grid container. ` grid-template-rows: auto;` Justify Items: Aligns items along the row axis within their grid area. ``` justify-items: start; /* Default */ justify-items: center; justify-items: end; justify-items: stretch; ``` Align Items: Aligns items along the column axis within their grid area. ``` align-items: start; /* Default */ align-items: center; align-items: end; align-items: stretch; ``` Other Useful Properties Color: Sets the color of text. ` color: #333333;` Opacity: Sets the opacity level of an element. ` opacity: 0.5;` Margin/Padding: Controls the space around or inside an element. ``` margin: 10px; padding: 20px; ``` Box Shadow: Adds a shadow effect to an element. ` box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);` Transform: Applies 2D or 3D transformations to an element. ` transform: rotate(90deg);`