CSS Tutorial for Beginners - 19 - CSS Box Model Part 3

Показать описание

In this video we continue on with the CSS Box Model.

Рекомендации по теме

Комментарии

Searched long and hard and found this series to be one of the most informative and easy to follow CSS tutorials. Many thanks to you.

kurtmiller

The best tutorial speaker I've heard so far, may be sometimes repeats the same too much, but on the other hand, it gives time to repeat the same thing that he does. Thank you, you are really professional.

medvedblya

I have binged 49 of your videos today. I thank you so much for them.. they are clear and to the point. Just what anyone would need. -Cheers. :-)

hopeknapp

This video really really nice, I recommend most my friends those who are willing to do the Microsoft 70- 480 exam sitter.
Clean and crystal description, Salute to you sir. Really really appreciated for your free tutorial. God bless you

mohamedsameel

HTML Code:

<!doctype html>

<html>

<head>

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

</head>

<body>

<h1> The Fish Web Site </h1>

<p class="para1"> Welcome to the Fish Web Site. Everything you want to know about fish is in this web site. </p>

<img class="imagec" src="barracuda.jpg">

<h2> This is a section on Bass fish </h2>

<p class="para2"> Bass fish live in lakes. The word for fish in Latin is <i>Pisces</i> </p>

<p class="para3"> A fish is any member of a paraphyletic group of organisms that consist of all gill-bearing aquatic craniate
animals that lack limbs with digits. Included in this definition are the living hagfish, lampreys, and cartilaginous and bony fish,
as well as various extinct related groups. Most fish are ectothermic ("cold-blooded"), allowing their body temperatures to
vary as ambient temperatures change, though some of the large active swimmers like white shark and tuna can hold a higher
core temperature. Fish are abundant in most bodies of water. They can be found in nearly all aquatic environments, from high
mountain streams (e.g., char and gudgeon) to the abyssal and even hadal depths of the deepest oceans (e.g., gulpers and
anglerfish). At 32, 000 species, fish exhibit greater species diversity than any other group of vertebrates. </p>

<p class="para4"> A fish is any member of a paraphyletic group of organisms that consist of all gill-bearing aquatic craniate
animals that lack limbs with digits. Included in this definition are the living hagfish, lampreys, and cartilaginous and bony fish,
as well as various extinct related groups. Most fish are ectothermic ("cold-blooded"), allowing their body temperatures to
vary as ambient temperatures change, though some of the large active swimmers like white shark and tuna can hold a higher
core temperature. Fish are abundant in most bodies of water. They can be found in nearly all aquatic environments, from high
mountain streams (e.g., char and gudgeon) to the abyssal and even hadal depths of the deepest oceans (e.g., gulpers and
anglerfish). At 32, 000 species, fish exhibit greater species diversity than any other group of vertebrates. </p>

</body>

</html>

EJMedia

omg these tutorials r so good!! thank u so much,

anniekhaliq

I'm happy that he said "In *this* video" again.
It's not as great as it used to be but atleast he says it compared to the other previous CSS tutorials

smegmalasagna

I know this is two years late but... I happened to look over at your DVD drive to see that you have the original starcraft... oh man the memories!

tay.joh.

Good tutorials, we can also use margin: 0px auto; to center the content. (0 for top and bottom and auto for left and right)

iftikharahmed

CSS Code:

body {

color: green;
font-family: Verdana, Arial, Geneva, Arial Black;
font-weight: normal;
background-color: #ffcf79;
font-size: 25px;

}

h1 {

text-decoration: underline;
font-size: 150%;
}

h2 {

text-decoration: underline;
font-size: 1.2em;
}

p.para1 {

color: blue;

}

p.para2 {

color: purple;

}

p.para3 {

color: purple;
font-size: 15px;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 20px;
border-color: black;
border-width: 2px;
border-style: solid;

}

p.para4 {

color: black;
font-size: 15px;
line-height: 1.5em;
background-color: #e5e4d7;
padding: 20px;
border-color: black;
border-width: 2px;
border-style: solid;
margin: 20px;
margin-top:50px;
margin-left:400px;

}

.imagec {

display: block;
margin-left: auto;
margin-right: auto;
padding: 3px;
background-color: silver;
border-color: black;
border-width: 2px;
border-style: solid;
}

EJMedia

This tutorial is so helpful!! Keep up the good work man!!

alddy

With the order of boxes, first Margins, Borders, Padding, then Content, is it imperative that we define padding, in order to place a border, or can we define a border without a padding? What is the purpose of having a padding and a border on an image? Is there an equivalent Margin, Border, Padding (left, right, top, bottom) for Content box? All we were introduced to was the background-color, is text-align left, right, top, bottom, center, the equivalent?

haroldmcbroom

You guys can adjust border property as

img {

border: 2px solid black;

}

instead of long way.

beratmirzaloglu

this only works when i write the code on the html file. I linked the css stylesheet correctly. and other things worked fine, but changes on image is not reflecting on my web page.

axiremodelinginc.

May I ask a question to you about img? You put the xxx.jpg and then the image is center. But I put the xxx.png and then the image is left. Not in the center position. So I change the image's file type. Use the xxx.jpg and the same stylesheet. The result is center. So why?

eastern

Thanks for posting the code. I make a lot of typos along the way, so it's nice to be able to either confirm (the usual case) or rule out KSE (Key Stroke Error) when I run into trouble.

RichardWheeler-SE-BA-PM

Hello good sir. I can't seem to figure out how to move the fish image up in the space of the 4th para.

ericaember

I have the image in but the stylesheet won't edit the image and I have no clue whats wrong.

alexyellawolf

sir when i try that margin auto it does not work unless i put some width in it

ravenenriquez

so i figured out that i had the image in the wrong folder, but now i've sorted that out. It still won't work? I've officially ran out of ideas.

Mike-xjgj

CSS Tutorial for Beginners - 19 - CSS Box Model Part 3

Learn CSS in 20 Minutes

Learn CSS in 1 hour 🎨

CSS Tutorial – Full Course for Beginners

CSS Tutorial for Beginners | Complete CSS with Project, Notes & Code

CSS in 5 minutes

CSS Crash Course For Absolute Beginners

The Only CSS Layout Guide You'll Ever Need

CSS Tutorial for Beginners | Guide to Understand the CSS Box Model and Layout | in Tamil

CSS Font & Text Properties #css #cssproperties #beginners

CSS KURS in 40 Minuten (Tutorial auf Deutsch)

Learn CSS Flexbox in 20 Minutes (Course)

How to start CSS Preparation at Home? Saad Bin Ubaid | PSP

CSS Tutorial - Zero to Hero (Complete Course)

The 6 most important CSS concepts for beginners

Learn CSS Positions in 4 minutes

The Only CSS Course You Need to Master CSS | Learn By Building Apps

5 CSS properties every web developer must know

HTML & CSS Full Course for free 🌎

HTML Tutorial for Beginners: HTML Crash Course

CSS Tutorial For Beginners | CSS Crash Course In One Hour | Web Development Tutorial | Edureka

The Most Detailed CSS Full Course on YouTube! CSS Tutorial for Beginners + Notes + Summary Cards #1

HTML and CSS For Absolute Beginners | 2024 Crash Course

CSS Tutorial In Hindi (With Notes) 🔥

Learn CSS in 12 Minutes