In sequel to episode 1,

Internal CSS

This is when a style tag is declared on its own in the HTML tag. It looks as follows:

      * {
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
        font-size: 1em;
      }
      body {
        box-sizing: border-box;
        background-color: #333;
      }
    </style>

This is a better use of CSS but it causes our HTML code to be really long and ambiguous and so it is still not the best way to use CSS.

External CSS

You remember what I said about the head tag in the HTML section, yeah? This comes in handy now. A StyleSheet link is created in the head tag which connects the CSS page to the HTML page. Code; <link rel="stylesheet" href="./pes.css" />

CSS files are made almost the same way as HTML ones as the name must end with a .css(or in the case of SASS '.scss' ). This tells the editor that you want to create a CSS file. Order of Preference I'm guessing you have been thinking that if all CSS types are used on a particular tag, what would have the superiority? Well, it follows this my hypothesis. The closer the style is to the selected element, the more superiority it attains. So if a button is styled in different colors with inline, internal, and external CSS, the inline CSS would be obeyed as it is a more direct style to that particular button.

Order of Preference Inline CSS > Internal CSS > External CSS

Content Positioning

This involves a lot of CSS properties which include margin, border, padding, position, and many more.

Margin This is the space outside the content of the border of the selected portion. As simple as that. You notice that most times, the page covers all ranges, this is because most sites have a margin of 0 which is very desirable. Any sort of length in programming is measured in pixels (px), em's, rem's, and so on. But these are the most important. So feel free to play with different values.

Border This is the ending of the particular element. You don't understand? Don't worry, an example would press home the information. Take a look at a piece of paper, for instance, those edges of that piece of paper are the borders. You can use the border keyword to style it as preferred. You can change the color, the radius (as in border-radius, which gives it a curved edge ), the width, the height, and so on.

Padding This is the space inside the content of the border of the selected portion. Let me guess, you also took a look at the margin definition to check if they were the same. They are not the same and this is not a typo. The padding specifies the space inside the container. Like our piece of paper example, let's now assume that some contents are written in it. So. the distance between the border and where the text (in this situation ) is written is the padding. The margin is the space outside the content while the border is the space inside the content and the border is the ending or stopping point of the content.

Position functions

They are five. Relative, Absolute, Static, Fixed, and Sticky. Let's take them one after the other.

Relative: This is to position an element relative to its original position. Using the top, bottom, left and right properties adjust the content from where it was originally from its original content.

Absolute: This is positioned relative to the nearest position: relative; ancestor. You have to have an aforementioned position: relative; to use the position absolute or the stated position: absolute; would use the document body as its ancestor.

Static: This is how normal HTML elements are positioned. They are not positioned in any special way and move according to the normal flow of the page.

Fixed: This is used to position a particular part of the page relative to the viewport. This just means that the content remains in the same position even if the page is scrolled.

Sticky: This is like the baby of the position: relative; and position: absolute;. It toggles between both position types based on the user's scroll position It is relative until a particular constraint is met and then it sticks( like position: absolute;).

Flexbox and Grid

This is a CSS division that helps display components easier, better, and with fewer lines of code. Sounds like very useful knowledge?, Yes, it is! Now, let's get into it. Flexbox This is a CSS3 layout mode that provides an easy and clean way to arrange items within a container.

Advantages

⦁ No Floats ⦁ Responsive and mobile friendly ⦁ Positioning child elements is much easier. ⦁ Flex container's margins do not collapse with the margins of its contents ⦁ The order of elements can easily be changed without editing the source HTML ⦁ It has the ability to alter item width and height to best fit its container and the available space. ⦁ It is for more small-scale layouts and Grid is for more large-scale.

It usually starts by setting the display to flex and the flex direction and other flex properties can be edited. The below picture shows the flex properties and the particular arguments they can accept.

Check out this Traversy Media YouTube video on Flexbox. youtu.be/3YW65K6LcIA

Grid

This is a CSS functionality that helps to style items in two-dimensional layouts. A good example of this is how blocks are cemented on each other in the construction of a house. Your webpage can look like that with the help of CSS Grid. ( different columns and rows. ) These help to display columns and rows differently with grid commands like grid-template columns, grid-gap, and so on. Same as flex, all these are usually superseded by setting the display to the grid. Check out this Traversy Media course on CSS Grid. youtu.be/0xMQfnTU6oo

Responsivity

This is the feature of your webpage to adjust itself to fit the device's width and height. These are the different properties of different devices. This is very essential in most webpages of today, as styles for a laptop would look horrible on small screen devices like phones. This is usually done with the media characteristic of CSS.

@media (min-width: 768px) {
        input {
          height: 30px;
          width: 70%;
          display: block;
          margin-top: 10px;
          margin-bottom: 15px;
          margin-left: 30px;
          border: 2px solid white;
          border-radius: 5px;
        }}

Max-width and max-height help to control how the webpage looks like before the specified size. Min-width and min-height help to control looks after the specified size is exceeded. The width of a smartphone would be around 768 pixels so it would make sense to input a min-width as you want to display that style before the width size reaches that specific size. This is just an example and there are many more applications to this as you would want your webpage to look desirable on all platforms. As stated earlier, Bootstrap is a CSS library that helps to perform CSS actions far easier. For more information, check out this freecodecamp full Bootstrap course youtu.be/-qfEOE4vtxE

SASS( Syntactically Awesome StyleSheets ) is a CSS preprocessor or extension which helps you use attributes like variables that store the font style, font family, primary color, and so on. Sass (.scss) files are compiled to regular CSS. It allows your CSS to act like a programming language. For more information, check out this Traversy Media course on SASS youtu.be/nu5mdN2JIwM

LESS is very similar to SASS, another CSS pre-compiler, and allows to use of syntaxes like variables, mixins(function-like), nested elements, and many other improved CSS syntaxes with the sole aim of making coding in CSS easier and with as few lines of code as possible. For more information, check out this Traversy Media course on LESS youtu.be/YD91G8DdUsw

We can easily say that both HTML nor CSS are not programming languages because they do not have the whole programming syntax like if-else statements, loops, functions, and so on.

Centering a div As stated earlier, a div is like a container element for other HTML tags and elements. This is one of the most sought-after answers in CSS, so I thought, why don't we solve this here? Solutions to this range from pushing the content manually via the margin to flex and grid. The first and one of the most effective ways is the margin-auto method. The code is just as follows:

margin: 0 auto

The flex method is a bit more complicated but it is worth it as it ranks higher when responsiveness is added to the fray. This is done as follows:

display: flex;
justify-content: center;
align-items: center;

There are so many more methods used for this, but these are the main two. You can also push it manually with pixels and percentages, but this is not advisable as this takes a lot of time and is not the best when responsiveness is thought about.

CSS Shorthand

This is a group of CSS properties that allow values of multiple CSS properties to be set in a line of code. These values are separated by spaces. This is a very useful method as it saves time and we generally want to do as much as possible in as few lines as possible. An example is:

border-width: 1em 2em This specifies the top and bottom and the left and right properties. The first value is for the top and bottom while the latter is for the left and right.

border-width: 3em 2em 7em This is a bit confusing, right? Well, this represents the top, right and left, and bottom respectively.

border-width: 1em 2em 5em 9em The four values represent the top, right, bottom, and left edges respectively. This works in clockwise order.

And if only one value is value is stated, border-width: 3em This works for all four sides, as usual.

Wow! You also read this to the end? You are a real champion🏆. Well, definitely check out episode 3 as you would finally learn your first programming language and the heart of web development, JavaScript👌.