Literally Everything You Could Need To Know About HTML/CSS
Dec 16, 2018 7:03:12 GMT -5
Leo and ᴀᴄʜʀᴏᴍᴀᴛɪᴄ like this
Post by Reed Ghostglade on Dec 16, 2018 7:03:12 GMT -5
What is HTML And CSS
Html, or Hyper Text Markup Language, is a markup language widely used on the internet. It comes in several flavors such as xhtml, or shtml(Server side Includes). BB code has an adapted version of html for it, so we'll mainly discuss that today~
CSS, on the other hand is Cascading Style Sheets, a stylesheet language that typically has its own file (.css) and is formatted in a (obj name) { styling:style; } format, however is usable with html as style="color:red;" format.
CSS, on the other hand is Cascading Style Sheets, a stylesheet language that typically has its own file (.css) and is formatted in a (obj name) { styling:style; } format, however is usable with html as style="color:red;" format.
Basic Formatting
To start off, all your HTML "tags"(objects enclosed in <greater> and <less than> symbols, need to be translated into BBCode replacing "< and >" with "[" or "]" respectively.
Your basic HTML tags are:
<h1>Header1</h1>
<h2>Header2</h2>
Going from h1 to h6, decreasing in size each iteration
It's important to note that after each of these tags a <br> is added. A <br> tag is just a newline tag, the equivalent of pressing enter on your keyboard when normally typing.
BB Code recognizes this and allows you to just press enter in lieu of <br>
The next basic tag is your <p> or paragraph tag
These will also automatically <br> after each instance of them, and look like normal text.
The <h1-6> and <p> tags are known as inline tags. Or tags that move with the flow of text.(I'll explain this more later)
Now we move on to the <div> tag
The <div> tag is a block tag, it can have its height and width specified by default, and will not conform to text-based rules. For example, the box containing this text is a div box, its a fixed object and will not grow to fit the text like <h1> or <p> would.
The last major tag we have to deal with is the <span> tag
the span tag is an inline tag that essentially gives you formatless text, and it will not <br> after it ends.
This allows you to change your text style or add details without adding a new line.
A similar tag to this is the <font> tag, which is mostly convient for adding font-families to your code, in BBcode, because BBcode truncates(shortens) font-families when normally inputted(I'll demonstrate this later)
Your basic HTML tags are:
<h1>Header1</h1>
Header1
<h2>Header2</h2>
Header2
Going from h1 to h6, decreasing in size each iteration
It's important to note that after each of these tags a <br> is added. A <br> tag is just a newline tag, the equivalent of pressing enter on your keyboard when normally typing.
BB Code recognizes this and allows you to just press enter in lieu of <br>
The next basic tag is your <p> or paragraph tag
Paragraph
These will also automatically <br> after each instance of them, and look like normal text.
The <h1-6> and <p> tags are known as inline tags. Or tags that move with the flow of text.(I'll explain this more later)
Now we move on to the <div> tag
The <div> tag is a block tag, it can have its height and width specified by default, and will not conform to text-based rules. For example, the box containing this text is a div box, its a fixed object and will not grow to fit the text like <h1> or <p> would.
The last major tag we have to deal with is the <span> tag
the span tag is an inline tag that essentially gives you formatless text, and it will not <br> after it ends.
This allows you to change your text style or add details without adding a new line.
A similar tag to this is the <font> tag, which is mostly convient for adding font-families to your code, in BBcode, because BBcode truncates(shortens) font-families when normally inputted(I'll demonstrate this later)
Getting Started with Styling
We've gone over basic HTML tags so far, so now I'll specifically go over an attribute within them that allows you to add CSS into your HTML code.
the style="" attribute:
the style attribute is put into a tag in this format(Remember that < should be ] on the forums)
<div style=""></div>
Within this attribute you can add several things in the format of name:value;, I'll briefly cover and explain them below:
color:colorname; or six digit hex value color:#123456;
Looks like this
Supported Color Names
background-color:colorname or hex;
Backgrounds can be defined in several ways
background: url(http://imageurlhere.png); will let you use any image you want as a background
saying no-repeat inside of this:
background: url(http://imageurlhere.png) no-repeat;
Will keep the image from duplicating itself to fill the space
Now if we add a "fixed" inside of the background:
background: url(http://imageurlhere.png) fixed;
You get and effect known as parallax, or to explain better, where your text appears to scroll but you background does not move. An example of this would be this post's starry background
border:size in #px (style) (colorname or #123456)
Borders are what they sound like, they border your text, they can be color/style or images(will cover this later)
Your border can be one of six styles:
It's important to specify the value suffix(px in this case) as 4, 4px, and 4pt are three different sizes because they are on different units of measurement
You can specify borders per-side with
border-left:;border-right:;border-top:;border-bottom:;
border-radius:#px
border-radius allows you to curve the edges of your tag's borders, the corners of the outermost box in this post are an example. the #px just defines where the curve starts at in pixels, and if you want to make a circle you have to define this as being half of the width and height of your tag.
You can specify which corner to curve in a
border-bottom-right-radius:;
format, respective to the top right top left and bottom left corners also of course
margin:auto or ##px;
A margin is the space outside of your tag's border, when margin:auto; is in place, block tags like div, will automatically center on the left and right.
You can specify the direction of the margin by saying:
margin-left:;margin-right:;margin-top:;margin-bottom:;
padding:#px;
Padding is like margin, but inside your tag, it defines space between your border and your text.Padding can also be directionally defined
padding-left:;(etc.)
opacity:0-1.0
opacity defines how see-through your background is.
for example:
The circle above is set to opacity:0.2; the default value, or no opacity is opacity:1; and fully transparent is opacity:0;
It's important to note that anything contained within a tag with opacity:; set, cannot be less opaque than it's parent. I'll show you some tricks for getting around this later.
font-size:#px or #pt
font-family:'forum font here';
font-weight:bold or normal;
Now then, font-size, does as it sounds, changes font size. And font-weight allows you to make bold text(however <b></b> does the same and is easier on the fly.
Font-family in BBcode is a bit weird though, BBCode will truncate any specific fonts placed in this, so to get around this for making multiple edits we must use the <font> tag
<font face="font name"></font>
Your font name value can be any of the values supported on the forums(visible in the Font Face dropdown menu in the reply/create screen) this will allow you to change the font dynamically without clicking around everywhere trying to use the menu system.
text-shadow:horizontal #px vertical #px blur #px color;
Now lets talk about some aesthetic stuff. text-shadow will allow you to amplify your text like this
You can also add multiple colors to this by adding a second value set:
text-shadow:2px 2px 2px green, -2px -2px 2px blue;
Now you may be asking why I added negative values to this, and its a good question.
For all shadow effects(text-shadow and box-shadow(below)) positive values will shadow the left and bottom of the object, while negatives will shadow the right and top value, adding positive and negative values for vertical px and horizontal px will shade around the whole item.
box-shadow:vertical px horizontal px blur px
Much like text-shadow, box-shadow will add shade to your HTML, in this case it can make an entire tag(div, span, h1-h6, p, font, etc.) have a shadow!. It's defined the same as text-shadow.
overflow:auto,scroll,hidden,visible;
the overflow tag will determine what is done to extra text.
The auto value will add a side scrollbar only, when necessary, the text box we're in right now does this.
The scroll value will add both vertical and horizontal scroll bars, regardless of necessity.
The hidden value will simply cut off any extra text that exceeds the boundaries of your tag.
The visible value results in text printing outside of your box, I would not recommend using this, but it is the default value of overflow:;
height:##px or ##%;
width:##px; or ##%;
height and width will literally define the height and with of your box, this is best used with block tags, as it allows for a fixed value to keep your tags from expanding with text.
% values allow you to base size off of a percentile of the parent tag. for example, 100% width placed in this text box would span from:
the style="" attribute:
the style attribute is put into a tag in this format(Remember that < should be ] on the forums)
<div style=""></div>
Within this attribute you can add several things in the format of name:value;, I'll briefly cover and explain them below:
color:colorname; or six digit hex value color:#123456;
Looks like this
Supported Color Names
background-color:colorname or hex;
Backgrounds can be defined in several ways
background: url(http://imageurlhere.png); will let you use any image you want as a background
saying no-repeat inside of this:
background: url(http://imageurlhere.png) no-repeat;
Will keep the image from duplicating itself to fill the space
Now if we add a "fixed" inside of the background:
background: url(http://imageurlhere.png) fixed;
You get and effect known as parallax, or to explain better, where your text appears to scroll but you background does not move. An example of this would be this post's starry background
border:size in #px (style) (colorname or #123456)
Borders are what they sound like, they border your text, they can be color/style or images(will cover this later)
Your border can be one of six styles:
border:4px solid black;
border:4px double black;
border:4px inset black;
border:4px outset black;
border:4px groove black;
border:4px ridge black;
It's important to specify the value suffix(px in this case) as 4, 4px, and 4pt are three different sizes because they are on different units of measurement
You can specify borders per-side with
border-left:;border-right:;border-top:;border-bottom:;
border-radius:#px
border-radius allows you to curve the edges of your tag's borders, the corners of the outermost box in this post are an example. the #px just defines where the curve starts at in pixels, and if you want to make a circle you have to define this as being half of the width and height of your tag.
You can specify which corner to curve in a
border-bottom-right-radius:;
format, respective to the top right top left and bottom left corners also of course
margin:auto or ##px;
A margin is the space outside of your tag's border, when margin:auto; is in place, block tags like div, will automatically center on the left and right.
You can specify the direction of the margin by saying:
margin-left:;margin-right:;margin-top:;margin-bottom:;
padding:#px;
Padding is like margin, but inside your tag, it defines space between your border and your text.Padding can also be directionally defined
padding-left:;(etc.)
opacity:0-1.0
opacity defines how see-through your background is.
for example:
It's important to note that anything contained within a tag with opacity:; set, cannot be less opaque than it's parent. I'll show you some tricks for getting around this later.
font-size:#px or #pt
font-family:'forum font here';
font-weight:bold or normal;
Now then, font-size, does as it sounds, changes font size. And font-weight allows you to make bold text(however <b></b> does the same and is easier on the fly.
Font-family in BBcode is a bit weird though, BBCode will truncate any specific fonts placed in this, so to get around this for making multiple edits we must use the <font> tag
<font face="font name"></font>
Your font name value can be any of the values supported on the forums(visible in the Font Face dropdown menu in the reply/create screen) this will allow you to change the font dynamically without clicking around everywhere trying to use the menu system.
text-shadow:horizontal #px vertical #px blur #px color;
Now lets talk about some aesthetic stuff. text-shadow will allow you to amplify your text like this
You can also add multiple colors to this by adding a second value set:
text-shadow:2px 2px 2px green, -2px -2px 2px blue;
Now you may be asking why I added negative values to this, and its a good question.
For all shadow effects(text-shadow and box-shadow(below)) positive values will shadow the left and bottom of the object, while negatives will shadow the right and top value, adding positive and negative values for vertical px and horizontal px will shade around the whole item.
box-shadow:vertical px horizontal px blur px
Much like text-shadow, box-shadow will add shade to your HTML, in this case it can make an entire tag(div, span, h1-h6, p, font, etc.) have a shadow!. It's defined the same as text-shadow.
overflow:auto,scroll,hidden,visible;
the overflow tag will determine what is done to extra text.
The auto value will add a side scrollbar only, when necessary, the text box we're in right now does this.
The scroll value will add both vertical and horizontal scroll bars, regardless of necessity.
The hidden value will simply cut off any extra text that exceeds the boundaries of your tag.
The visible value results in text printing outside of your box, I would not recommend using this, but it is the default value of overflow:;
height:##px or ##%;
width:##px; or ##%;
height and width will literally define the height and with of your box, this is best used with block tags, as it allows for a fixed value to keep your tags from expanding with text.
% values allow you to base size off of a percentile of the parent tag. for example, 100% width placed in this text box would span from:
Here to Here
The reason this does not touch the edge of the box is the padding I mentioned before. It's important to keep in mind that padding and margins will effect % based valuesLast words, advanced tags and attributes
So now you know most of the major functions behind html/css.
I can't explain it all, as a lot is not relevant to the forums BBCode, but additional information can be found Here
And Here
The last things I'll go over:
<img src="URL TO IMAGE" alt="">
This tag will allow you to put a nonbackground image into your code, you can add borders, and define size and such in a style="" attribute also of course
alt="" is alternative text to display if the image does not load for someone
border-image: url(URL TO IMAGE) round or stretch ##;
Now this is a bit difficult to explain. But round essentially means that when border-image determines what part of the image to use for a border, round will make it duplicate a pattern to fit the dimensions of your tag.
However, stretch will stretch whatever part of the image you grabbed to fit the dimensions. In best practice, round looks a lot better than stretch.
the final two ## is a number that determines how far from the center of the image border-image will go to grab the pattern to use.
This is best learned by just playing with it honestly, and can be a bit tedious.
text-decoration:overline, underline, strike-through;
This is pretty self-explanatory, but worth mentioning.
Avoiding Opacity Inheritance:
So lets say you want a parent tag to be opaque, but not its child. Thankfully the background:; tag has your back
but first I need to cover
background:rgb(red#,blue#,green#);
So, RGB is a color labelling mechanism, similar to six digit hex codes, that is also widely used for Styling. These come in a 0-255 digit scale, or 8 bits(If you had to define this in binary ) for each of the primary colors
for example
background:rgb(255,255,255);
would be white. As white is a combination of all colors.
Now that that is explained.
background:rgb(255,255,255,0.6);
Can you guess what that last field does?
That's a background opacity field. Defining it within the rgb function, prevents is from carrying over to any child tags you place inside of this one!
<a href="">title of link</a>
Now the <a> with an href attribute is a link. href is hypertext reference, it essentially is the destination URL of your link.
I would appreciate any and all feedback/things I should add to this, feel free to ask questions below~
Helpful Resoures:
Color picker for HEX and RGB
I can't explain it all, as a lot is not relevant to the forums BBCode, but additional information can be found Here
And Here
The last things I'll go over:
<img src="URL TO IMAGE" alt="">
This tag will allow you to put a nonbackground image into your code, you can add borders, and define size and such in a style="" attribute also of course
alt="" is alternative text to display if the image does not load for someone
border-image: url(URL TO IMAGE) round or stretch ##;
Now this is a bit difficult to explain. But round essentially means that when border-image determines what part of the image to use for a border, round will make it duplicate a pattern to fit the dimensions of your tag.
However, stretch will stretch whatever part of the image you grabbed to fit the dimensions. In best practice, round looks a lot better than stretch.
the final two ## is a number that determines how far from the center of the image border-image will go to grab the pattern to use.
This is best learned by just playing with it honestly, and can be a bit tedious.
text-decoration:overline, underline, strike-through;
This is pretty self-explanatory, but worth mentioning.
Avoiding Opacity Inheritance:
So lets say you want a parent tag to be opaque, but not its child. Thankfully the background:; tag has your back
but first I need to cover
background:rgb(red#,blue#,green#);
So, RGB is a color labelling mechanism, similar to six digit hex codes, that is also widely used for Styling. These come in a 0-255 digit scale, or 8 bits(If you had to define this in binary ) for each of the primary colors
for example
background:rgb(255,255,255);
would be white. As white is a combination of all colors.
Now that that is explained.
background:rgb(255,255,255,0.6);
Can you guess what that last field does?
That's a background opacity field. Defining it within the rgb function, prevents is from carrying over to any child tags you place inside of this one!
<a href="">title of link</a>
Now the <a> with an href attribute is a link. href is hypertext reference, it essentially is the destination URL of your link.
I would appreciate any and all feedback/things I should add to this, feel free to ask questions below~
Helpful Resoures:
Color picker for HEX and RGB
-·=»‡«=·- ~.~ -·=»‡«=·-
The code for this entire box, hopefully you can read it now
[div style="height:1500px;border:2px ridge yellow;background:url(https://media.giphy.com/media/U3qYN8S0j3bpK/giphy.gif) fixed;overflow:hidden;border-radius:30px;"]
[div style="margin-left:auto;margin-right:auto;margin-top:-17px;width:600px;height:1600px;background-color:#ffffe6;border-left:4px ridge black;border-right:4px ridge black;text-align:center;"]
[span style="font-size:36px;color:black;font-weight:bold;padding:10px;border-left:4px double black;border-right:4px double black;border-bottom-left-radius:15px;border-bottom-right-radius:15px;"][font face="Megrim"]What is HTML And CSS[/font]
[/span]
[hr]
[div style="margin:auto;color:black;font-size:16px;padding:10px;border:3px inset #ffffcc;background-color:#ffffe6;overflow:auto;width:400px;height:200px;text-align:center;"][font face="Macondo Swash Caps"]Html, or Hyper Text Markup Language, is a markup language widely used on the internet. It comes in several flavors such as xhtml, or shtml(Server side Includes). BB code has an adapted version of html for it, so we'll mainly discuss that today~
CSS, on the other hand is Cascading Style Sheets, a stylesheet language that typically has its own file (.css) and is formatted in a (obj name) { styling:style; } format, however is usable with html as style="color:red;" format.
[/font]
[/div]
[hr]
[span style="font-size:30px;color:black;font-weight:bold;padding:10px;border-left:4px double black;border-right:4px double black;border-bottom-left-radius:15px;border-bottom-right-radius:15px;"][font face="Macondo Swash Caps"]Basic Formatting[/font]
[/span]
[hr]
[div style="margin:auto;color:black;font-size:16px;padding:10px;border:3px inset #ffffcc;background-color:#ffffe6;overflow:auto;width:400px;height:200px;text-align:center;"][font face="Macondo Swash Caps"]To start off, all your HTML "tags"(objects enclosed in <greater> and <less than> symbols, need to be translated into BBCode replacing "< and >" with "[" or "]" respectively.
Your basic HTML tags are:
<h1>Header1</h1>
[h1]Header1[/h1]
<h2>Header2</h2>
[h2]Header2[/h2]
Going from h1 to h6, decreasing in size each iteration
It's important to note that after each of these tags a <br> is added. A <br> tag is just a newline tag, the equivalent of pressing enter on your keyboard when normally typing.
BB Code recognizes this and allows you to just press enter in lieu of <br>
The next basic tag is your <p> or paragraph tag
[p]Paragraph[/p]
These will also automatically <br> after each instance of them, and look like normal text.
The <h1-6> and <p> tags are known as inline tags. Or tags that move with the flow of text.(I'll explain this more later)
Now we move on to the <div> tag
The <div> tag is a block tag, it can have its height and width specified by default, and will not conform to text-based rules. For example, the box containing this text is a div box, its a fixed object and will not grow to fit the text like <h1> or <p> would.
The last major tag we have to deal with is the <span> tag
the span tag is an inline tag that essentially gives you formatless text, and it will not <br> after it ends.
This allows you to [span style="color:red;"]ch[/span][span style="color:blue;"]an[/span][span style="color:green;"]ge[/span] your text style or add details without adding a new line.
A similar tag to this is the <font> tag, which is mostly convient for adding font-families to your code, in BBcode, because BBcode truncates(shortens) font-families when normally inputted(I'll demonstrate this later)
[/font][/div]
[hr]
[span style="font-size:30px;color:black;font-weight:bold;padding:10px;border-left:4px double black;border-right:4px double black;border-bottom-left-radius:15px;border-bottom-right-radius:15px;"][font face="Macondo Swash Caps"]Getting Started with Styling[/font]
[/span]
[hr]
[div style="margin:auto;color:black;font-size:16px;padding:10px;border:3px inset #ffffcc;background-color:#ffffe6;overflow:auto;width:400px;height:200px;text-align:center;"][font face="Macondo Swash Caps"]We've gone over basic HTML tags so far, so now I'll specifically go over an [u]attribute[/u] within them that allows you to add CSS into your HTML code.
the [b]style=""[/b] attribute:
the style attribute is put into a tag in this format(Remember that < should be ] on the forums)
<div style=""></div>
Within this attribute you can add several things in the format of [b]name:value;[/b], I'll briefly cover and explain them below:
[b]color:colorname;[/b] or six digit hex value color:#123456;
[span style="color:#123456;"]Looks like this[/span]
[a href="https://www.w3schools.com/colors/colors_names.asp"]Supported Color Names[/a]
[b]background-color:colorname or hex;[/b]
Backgrounds can be defined in several ways
[b]background: url(http://imageurlhere.png);[/b] will let you use any image you want as a background
saying no-repeat inside of this:
[b]background: url(http://imageurlhere.png) no-repeat;[/b]
Will keep the image from duplicating itself to fill the space
Now if we add a "fixed" inside of the background:
[b]background: url(http://imageurlhere.png) fixed;[/b]
You get and effect known as parallax, or to explain better, where your text appears to scroll but you background does not move. An example of this would be this post's starry background
[b]border:size in #px (style) (colorname or #123456)[/b]
Borders are what they sound like, they border your text, they can be color/style or images(will cover this later)
Your border can be one of six styles:
[div style="margin:auto;height:20px;border:4px solid black;"]border:4px solid black;[/div]
[div style="margin:auto;height:20px;border:4px double black;"]border:4px double black;[/div]
[div style="margin:auto;height:20px;border:4px inset black;"]border:4px inset black;[/div]
[div style="margin:auto;height:20px;border:4px outset black;"]border:4px outset black;[/div]
[div style="margin:auto;height:20px;border:4px groove black;"]border:4px groove black;[/div]
[div style="margin:auto;height:20px;border:4px ridge black;"]border:4px ridge black;[/div]
It's important to specify px as 4, 4px, and 4pt are three different sizes because they are on different units of measurement
You can specify borders per-side with
border-left:;border-right:;border-top:;border-bottom:;
[b]border-radius:#px[/b]
border-radius allows you to curve the edges of your tag's borders, the corners of the outermost box in this post are an example. the #px just defines where the curve starts at in pixels, and if you want to make a circle you have to define this as being half of the width and height of your tag.
You can specify which corner to curve in a
border-bottom-right:;
format, respective to the top right top left and bottom left corners also of course
[b]margin:auto or ##px;[/b]
A margin is the space outside of your tag's border, when margin:auto; is in place, block tags like div, will automatically center on the left and right.
You can specify the direction of the margin by saying:
margin-left:;margin-right:;margin-top:;margin-bottom:;
[b]padding:#px;[/b]
Padding is like margin, but inside your tag, it defines space between your border and your text.Padding can also be directionally defined
padding-left:;(etc.)
[b]opacity:0-1.0[/b]
opacity defines how see-through your background is.
for example:
[div style="margin:auto;height:20px;width:20px;border:2px ridge yellow;border-radius:10px;background-color:green;opacity:0.2;"]
[/div]The circle above is set to opacity:0.2; the default value, or no opacity is opacity:1; and fully transparent is opacity:0;
It's important to note that anything contained within a tag with opacity:; set, cannot be less opaque than it's parent. I'll show you some tricks for getting around this later.
[b]font-size:#px or #pt[/b]
[b]font-family:'forum font here';[/b][span]
[b]font-weight:bold or normal;[/b]
[/span]Now then, font-size, does as it sounds, changes font size. And font-weight allows you to make bold text(however <b></b> does the same and is easier on the fly.
Font-family in BBcode is a bit weird though, BBCode will truncate any specific fonts placed in this, so to get around this for making multiple edits we must use the <font> tag
[b]<font face="font name"></font>[/b]
Your font name value can be any of the values supported on the forums(visible in the Font Face dropdown menu in the reply/create screen) this will allow you to change the font dynamically without clicking around everywhere trying to use the menu system.
[b]text-shadow:horizontal #px vertical #px blur #px color;[/b]
Now lets talk about some aesthetic stuff. text-shadow will allow you to amplify your text like [span style="text-shadow:2px 2px 2px green;"]this[/span]
You can also add multiple colors to this by adding a second value set:
[b]text-shadow:2px 2px 2px green, -2px -2px 2px blue;[/b]
Now you may be asking why I added negative values to this, and its a good question.
For all shadow effects(text-shadow and box-shadow(below)) positive values will shadow the left and bottom of the object, while negatives will shadow the right and top value, adding positive and negative values for vertical px and horizontal px will shade around the whole item.
[b]box-shadow:vertical px horizontal px blur px[/b]
Much like text-shadow, box-shadow will add shade to your HTML, in this case it can make an entire tag(div, span, h1-h6, p, font, etc.) have a shadow!. It's defined the same as text-shadow.
[b]overflow:auto,scroll,hidden,visible;[/b]
the overflow tag will determine what is done to extra text.
The auto value will add a side scrollbar only, when necessary, the text box we're in right now does this.
The scroll value will add both vertical and horizontal scroll bars, regardless of necessity.
The hidden value will simply cut off any extra text that exceeds the boundaries of your tag.
The visible value results in text printing outside of your box, I would not recommend using this, but it is the default value of overflow:;
[b]height:##px or ##%;
width:##px; or ##%;[/b]
height and width will literally define the height and with of your box, this is best used with block tags, as it allows for a fixed value to keep your tags from expanding with text.
% values allow you to base size off of a percentile of the parent tag. for example, 100% width placed in this text box would span from:
[div style="width:100%;background-color:black;color:white;height:20px;"]Here to Here[/div]The reason this does not touch the edge of the box is the [b]padding[/b] I mentioned before. It's important to keep in mind that padding and margins will effect % based values
[/font][/div]
[hr]
[span style="font-size:30px;color:black;font-weight:bold;padding:10px;border-left:4px double black;border-right:4px double black;border-bottom-left-radius:15px;border-bottom-right-radius:15px;"][font face="Macondo Swash Caps"]Last words, advanced tags and attributes[/font]
[/span]
[hr]
[div style="margin:auto;color:black;font-size:16px;padding:10px;border:3px inset #ffffcc;background-color:#ffffe6;overflow:auto;width:400px;height:200px;text-align:center;"][font face="Macondo Swash Caps"]So now you know most of the major functions behind html/css.
I can't explain it all, as a lot is not relevant to the forums BBCode, but additional information can be found [a href="https://www.w3schools.com/css/default.asp"]Here[/a]
[a href="https://www.w3schools.com/html/default.asp"]And Here[/a]
The last things I'll go over:
[b]<img src="URL TO IMAGE" alt="">[/b]
This tag will allow you to put a nonbackground image into your code, you can add borders, and define size and such in a style="" attribute also of course
alt="" is alternative text to display if the image does not load for someone
[b]border-image: url(URL TO IMAGE)[/b] [b]round or stretch ##;[/b]
Now this is a bit difficult to explain. But round essentially means that when border-image determines what part of the image to use for a border, round will make it duplicate a pattern to fit the dimensions of your tag.
However, stretch will stretch whatever part of the image you grabbed to fit the dimensions. In best practice, round looks a lot better than stretch.
the final two ## is a number that determines how far from the center of the image border-image will go to grab the pattern to use.
This is best learned by just playing with it honestly, and can be a bit tedious.
[b]text-decoration:overline, underline, strike-through;[/b]
This is pretty self-explanatory, but worth mentioning.
I would appreciate any and all feedback/things I should add to this, feel free to ask questions below~
[/font]
[/div]
[span style="color:black;font-size:27px;"][font face="Shadows Into Light"]-·=»‡«=·- ~.~ -·=»‡«=·-[/font][/span]
[/div]
[/div]