HTML #5: HTML Tags, CSS Functions, and Inline CSS

HTML #5: HTML Tags, CSS Functions, and Inline CSS

CSS is complicated, and with the right understanding, you can make amazing animations and creative text. But it is also a privilege to use on JetPunk. Today, learn how to use CSS selectors and codes, but responsibly. @Malkiboy let me add on to his great series!

*The "selectors" are actually HTML tags*

Selectors

Below, the functions of some different selectors will be shown:

<p>TEXT</p> - The most well known CSS selector, this allows you to make separate paragraphs, like on this blog for instance.

<b>TEXT</b> - Another well known selector, this will bold the text put inside. Just remember that with any CSS code, end with the "/" (slash) before the letter(s).

<u>TEXT</u> - This selector underlines the text. It is used often to emphasize a word within a caveat or instructions in quizzes.

<s>TEXT</s> - While not as important as the others, this selector is often used in blogs or funny comments. It puts a strike in the middle of the text inside.

<i>TEXT</i> - Although rarely used on JetPunk, this selector can also be used to emphasize words or even to show thoughts (I would look forward to seeing it on JetPunk stories in the future). It italicizes the text inside.

<a>TEXT</a> - I feel like I'm the only person who uses this code alone. It is the HTML tag for how a hyperlink underlines when hovered over and is naturally blue. You can trick your friends by adding this tag to text without using a URL. They will be confused why nothing is happening.

Combined Selectors - This isn't really a new code, but you can add different styles to the same line of text. Just place a separate selector where the text would go inside of another selector. For example, to underline and bold text, use this code:

<u><b>TEXT</b></u>

ABUSIVE:<h1>TEXT</h1> - This selector is used for the title of a JetPunk page. It can be accessed anywhere on the page. However, messing with this will harm JetPunk because specialized AI count this as CSS abuse, and so will JetPunk because the rating will go down. I actually wish JetPunk would remove this feature from users.

Styling

Styling isn't as complex as most think, and there are many different functions. In case you don't know what it is, basically it can alter text more than selectors can, including within a selector. It is incredibly useful for increasing the font size on let's say, this blog.

In order to use styling, you must add the word style after you define the selector, but only in the first pair of <> and before the >. The inline CSS (see Internal Versus Inline CSS) for this subtitle is as follows:

<p style="font-size:23px"><b>Styling</b>

The code "font-size" can be used to increase or decrease the default font size. Just remember to include "px" after the number! Below are some other CSS functions:

opacity - This will change the transparency or the see-through in the text. After the colon, place a percentage in which you want the transparency to be set at (e.g. opacity:60%).

text-align - The "text-align" function simply changes where the text will appear on the page. Some options are left, right, or center (I used center at the top of the page for the heading at the top).

color and background-color - Color simply changes the color of the text. Some simple colors that you can type are blue, light gray, white, black, green, etc. Some more complicated ones that turn out very well are dodgerblue and mediumseagreen. If you want to include RGB or HEX colors, simply use the # after color: (I'm not going to explain those colors). Because the colors are exactly the same for both, if I told you that "background-color" simply changes the background color, I bet you can imagine what to do.

border - The border function is a nice command, because there are so many different ways to style border around a text with it. It is a bit more complicated however, as you must add spaces in between three definitions. First definition: border size - just use the same thing as text size with the number and px. Second definition: after adding a space, the second definition is just the color. Third definition: after adding a second space, simply say what type of border to use. Solid is a basic border, while double and ridge are a bit different but can look amazing. After you are done, your code should look somewhat like this:

<p style="border:5px mediumseagreen ridge">TEX</p>

Internal Versus Inline CSS

This whole time, I have been showing you a type of CSS coding called inline. In inline coding, you must define the styling for the selector every time. The reason I haven't showed you internal, is that internal requires you to make several different variables (e.g p1, p2, p3) and then define each variable as a selector once. So for example, I can use just

to create my subtitles. However, this often messes with the comments, and everything starts to get crazy.

Using internal CSS defines the whole entire page, so if you tried to edit a hyperlink every drop down menu on the page would have the coding on it. It also can be marked as abuse as the comments with crazy alterations will trigger the system.

To be honest, just use inline.

This is my longest blog yet, it took much formatting and detail. Please give feedback and tell me if you learned something!

Edit: If you want to add a horizontal line to a blog, just use the code <hr/>.