Advancing Forward

HTML tags can also have attributes. An attribute stores data about a particular element.

Most attributes have the following syntax:

        <tag attribute="value"></tag>
      

The following syntax is also correct and completely valid, but is not recommended by most developers and developer resources (including me).

        <!--NOT RECOMMENDED AT ALL!!!-->
<tag attribute=value></tag>
      

HTML attributes can contain most data types (string, number, object, array, boolean, etc.). When an attribute has a boolean value set to true, the value can be omitted.

        <button disabled="true">Disabled button</button>

<!--is the same as-->

<button disabled>Disabled button</button>

<!--is the same as-->

<button disabled="disabled"></button>

<!--is the same as-->

<button disabled=""></button>
      

An iframe (inline frame) is an element used to create a separate browsing context within the webpage (i.e. embedding websites). The below example shows an example of an <iframe> tag with an src attribute that denotes the source URL, or any other URI, such as a data URI. Note: A URL and a data URI are both types of URIs.

NOTE: not all websites allow you to put them in inline frames (like https://google.com/).

Yes, I know, it looks ugly, but we'll fix that later.

CSS

CSS is a stylesheet language used for styling things (as the name suggests). CSS stands for Cascading Style Sheets.

Here is an example of some CSS code:

        .myclass {
  background: red;
  color: white;
}
      

A bit more complex:

        .myclass:hover {
  background: #3EB489;
  color: #FFFFFF;
}
      

CSS is made of selectors (which select a certain element or elements), properties (for the selected elements), and values (for the properties).

The syntax for a basic CSS rule is shown below:

        selector {
  property: value;
}
      

The .class selector

The .class selector selects all elements with a certain class attribute. For example:

CSS:

        .classname {
  property: value
}
      

And here is the full example: