Introduction To HTML And CSS

Introduction

 
In this article, I will be explaining HTML and CSS with the help of a simple demo application, a job searching application. Employees can find a job easier and the recruiter has an easier time finding them.
 
This frontend part of the app was made using HTML and CSS.
 
Languages Used
  • HTML
  • CSS
  • JAVASCRIPT

History of the Web

 
Sir Tim Berners-Lee invented the World Wide Web in 1989. Sir Tim Berners-Lee invented the World Wide Web in 1989. After graduating from Oxford University, Berners-Lee became a software engineer at CERN. 
 

What is HTML?

  • HTML stands for HyperText Markup Language.
  • HTML describes the structure of web pages used
  • HTML is used to provide the counterwords, images, audio, video, and so on) to the web pages.
  • HTML is a tag-based language. They are defined within the angle brackets.
  • The HTML file can be created using a text editor.

Comments in HTML

 
The comment tag <! --...--> is used to insert comments in the source code.
 
Comments are not displayed in the news
 
You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
 

Tags in HTML

 
Tags define all elements in the document, i.e., they give meaning to the plain text of HTML.
  • HTML tags are surrounded by the two characters < and > (They are called angle brackets).
  • The tag name can either start from an alphabet or an underscore (_).
  • The text between the start and end tags is the element content.
  • Tags with an opening and closing can have any number of tags within themselves.
  • HTML tags are not case sensitive, <p> means the same as <P>.
  • HTML tags normally come in pairs (container tags), i.e., both opening and closing (it is the same, just the name of the tag with the character '/ ' in the beginning) tag.
  • Eg: <html> and </html> is a tag that comes in pair.
  • Eg: <> does not have a closing tag.

Description of Tags

  • <!DOCTYPE html> tells the owser that the file being displayed is HTML5 page.
  • <html> </html> meant to contain all the html data and is the start of an HTML document.
  • <head> </head> provides information about the document. It is not displayed in the owser window.
  • <title> </title> provides a title for the document.
  • <body> </body> contains all the things visible on the web page.

DOCTYPE

 
The DOCTYPE declaration describes what version of HTML the page is written in. It is the very first thing in your HTML document that you see on every web page. It is written at the top of every page before the <html> tag. The doctype declaration is not an HTML tag. It is the one recommended by HTML5.
 
The syntax of doctype is <! DOCTYPE html>
 

HTML Elements

 
Elements are the things that actually make up the web page. Tags just define the beginning and end of the elements. Everything that a web page includes is an HTML element.
 
Example: this is an HTML element: <b>This text is bold</b>
  • The HTML element starts with an opening tag: <b>
  • The content of the HTML element is: This text is bold.
  • The HTML element ends with a closing tag: </b>

Basic Elements

 

Paragraph

 
Paragraphs are blocks of text separated from each other by some space. They are defined using the <p> and </p> tags. When the p element ends, the next element appears in the next line.
 

Heading

 
These are tags in HTML to mark some content as headings. In fact, there are six different levels of headings h1, h2, h3, h4, h5, and h6. Among them, h1 defines the largest heading and h6 defines the smallest level heading.
 
 
 
Result
 
 
Tags
 
<br /> tag is used to introducing a single line each between the contents. This means that when this tag is used in between a single line, the content after this tag will move to the next line. Do not use it to provide space between a block of elements (e.g., paragraph and heading).
 
Tags define the space between the two words to make the line.
 

List

 
Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. Lists are good from a structural point of view as they help create a well-structured, more accessible, easy to maintain document.HTML that supports ordered, unordered, and definition lists.
 
Unordered List
 
It is used to group a set of related items in no particular order. Unordered lists are used when the numbering of items is not required. By default, the items are followed by bullets.
 
This is defined by the <ul> tag.
 
 
 
Result
 
 
Similarly, like the unordered lists, there are also different types of ways to number the ordered lists using the 'type' attribute:
  1. type= "1" - The list items will be numbered with numbers (default)
  2. type="A" - The list items will be numbered with uppercase letters
  3. type="a" - The list items will be numbered with lowercase letters
  4. type="I" - The list items will be numbered with uppercase roman numbers
  5. type= " i" - The list items will be numbered with lowercase roman numbers
Now, what if you want to change the starting numbering of the lists?
 
HTML has got the solution for it: the 'start' attribute, i.e. we change <ol> to <ol start="7" >
 
Description List
 
A definition list is not a list of items. This is a list of terms and an explanation of the terms.
 
A definition list starts with the <dl> tag. Each definition - list term starts with the <dt> tag. Each definition - list definition starts with the <dd> tag.
 
Description lists are very specific in use as compared to ordered and unordered lists and hence are very less used. But whenever, a structure like a list of terms and their description is required, the description lists are the perfect elements.
 
Nesting Element 
 
HTML ELEMENTS can be nested I.e., the element can contain an element. Actually, all elements in an HTML document consist of nested elements.
 
 
 
Result
 
 
Images in HTML
 
With HTML you can also display images in a document. In HTML, images are defined with the <img> tag.
 
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
 
The syntax of defining an image:
 
<img src “some img logo link”>
  1. <img> tag is a self-closing tag which means that it doesn't contain the closing tag.
  2. The src tag can contain both relative and absolute paths, as well as internet image links
Alt Attributes
 
The alt attribute or alternate text tells the reader what he or she is missing on a page if the owner can't load images. The owner will then display the alternate text instead of the image.
 
Now, we can use the alt attribute as:
 
<img src “some img logo ” alt = ‘some img”>
 
Attributes
 
Attributes can provide additional information about the HTML elements on your page and control their behavior.
 
Some points to remember:
  1. Attributes always come in name/value pairs like this: attribute name="value".
  2. Attributes are always added to the start tag of an HTML element.
  3. Attribute values should always be enclosed in quotes. Double style quotes (“) are the most common, but single style quotes (‘’) are also allowed.
  4. In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "Shotgun" Nelson' and vice-versa.
Anchor Tag
 
The <a> tag defines a hyperlink, which is used to link from one page to another.
 
You have seen that clicking on a link opens a new page that may be on the same page or another. These web pages are connected using links. They give us the ability to go to a different web page without each time entering its URL. This kind of link is external links i.e., they help in connecting to external web pages.
 
Links can also be internal which means that they will be linking the content within the same page. Eg: link to the top of the page or any link to any specific content on the page.
 
By default, links will appear as follows in all browsers
 
An unvisited link is underlined and blue
 
A visited link is underlined and purple.
 
An active link is underlined and red.
 
HREF Attributes
 
The most important attribute of the <a> element is the href attribute, which indicates the link's destination. In other words, the href attribute is used to address the document to link to.
 
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. These all are known as external links.
 
NOTE
You need to remember that here also, we can provide the relative URL of a file as a value to the href attribute. Eg: href="/home/MCPc/Documents/test.html".
 
Target Attributes
 
With the target attribute, you can define where the linked document will be opened. The target attribute has the following values:
  • _self: load the URL into the current tab itself. This is the default.
  • _blank: load the URL into a new tab or browser window.
  • _parent: load the URL into the parent browsing context. If there is no parent, this behaves the same as _self.
  • _top: load the URL into the top-level browsing context. If there is no parent, this behaves the same as _self.

HTML Forms And Media Tags

 
HTML Forms are used to collect different kinds of user input. Through these forms, a user enters the data which is either processed by the owner itself (using JavaScript) or the data goes to the servers where it gets processed.
 
A form is an area that can contain form elements. A form is defined with the <form> tag. Form elements are elements that allow the user to enter information (like text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
 
An HTML form may contain a lot of elements like text fields (single line or multiline), select boxes, buttons, checkboxes, or radio buttons. Let us start with just a basic form without any elements:
 
Example
 
 
 
Result
 
 
 

Input Tag

 
The <input> tag specifies an input field where the user can enter data. <input> elements are used within a <form> element to declare input controls that allow users to input data. This is an inline tag.
 
Type Attribute
 
HTML provides different types of input that you can use for different types of entries. By default, the value of type is "text", which specifies that we want single-line text input.
Some more values for the type attribute are-
 
Value Attribute
 
Value is not a compulsory attribute to add to the input element, but it is very useful. The value attribute is used differently for different input types.
    • For "button", "reset", and "submit" - it defines the text on the button 
    • For "text", "password", and "hidden" - it defines the initial (default) value of the input field 
    • For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit)
Name Attribute
  • The name attribute is a compulsory attribute for input tag in a form. Without this attribute, this form element won't be submitted or in other words would not be sent to the server.
  • The name attribute also uniquely identifies that piece of data. The value of the input is accessed using the name attribute.
Label Tag
 
The use of labels to describe the kind of input in a form is not compulsory. You can do that without the use of a label tag, as also shown in the above example. But it is best to use the <label> tag to describe the kind of input for a form element. It not only is semantically correct but it can also be tied to their form elements like <input>, <textarea>, etc.
 
This is also an inline tag.
 
Required Attribute
 
When present, it specifies that an input field must be filled out before submitting the form. Else, it shows a pop-up to fill out the required field. The required attribute is a Boolean attribute.
 
Placeholder Attribute
 
The placeholder attribute is used with the input element. It describes a sample value or a short description of the expected format. The value of the placeholder attribute specifies a short hint that describes the expected value of an input field.
 
Disabled Attribute
 
The disabled attribute specifies that the <input> element should be disabled. If the input is disabled, it becomes un-editable and un-clickable, although it might already contain a default value in it.This is also a Boolean attribute.

Checkboxes

 
The checkbox is a value of the type attribute of the input element. Checkboxes are used when more than one option may need to be checked or you can also use them to enable or disable something. The checkbox is shown as a square box that is ticked (checked) when activated. There is also an attribute named checked, that when present makes the checkbox selected by default when the page loads.
 
Radio Button
 
A radio button is just like a checkbox, but the difference is that the values of the name attribute are all the same. To define a radio button the value of type attribute is "radio".
The name attributes are all set to the same value makes these radio buttons part of the same set, and therefore, you can only select one of them at once.
 

FIELDSET AND LEGEND ELEMENT

 
The <field set> element is used to provide grouping for a part of an HTML form. The <field set> tag draws a box around the related elements, which makes it more presentable.
 
The <legend> element is used for providing a title or explanatory caption for the rest of the contents of the legend element's parent element. <legend> comes just after the <field set> tag.
 
SELECT ELEMENT
 
HTML <select> tag is used to create drop-down list of options. The dropdown list contains many options and the user can choose one of them. The select tag also contains a name attribute, like other form elements, that represent the associated data submitted to the server.
 

Option Element

 
The tag used to define the possible options is <option> tag. This tag is put inside the <select> tag. For every option in drop down list, separate <option> element is used.
  • The first <option> element from the options' list is selected by default. To change this predefined option, use the selected attribute with the <option> tag.
  • Each option element should have a value attribute, which contains the data value that will be submitted to the server when that option is selected.

Optgroup Element

 
The <optgroup> tag is used to group several options together into one group. This will create separate groups of options inside the dropdown.
 

Submit Button

 
Submit button is a button that when clicked automatically submits the form. The button is defined at the end of the form. There are 2 different ways to add submit button to the form:
  • via <input> tag
  • via <button> tag 
Both of these ways will work in the same way.
 

Media Element

 
Multimedia is a different content than text that uses sound, music, videos, movies, animations, etc. on the web. Multimedia is represented in multiple forms(eg., video, audio) and in multiple formats(eg., mp3, .avid). We can add audio, video, and figures with the help of HTML media elements.
 
Audio and Video Elements
 
HTML can embed audios and videos directly on a web page without any external support. You can add audio and videos in a standard way. The <audio> element is used to add audio to a web page. The <video> element is used to add a video to the web page.
 
These elements are not sufficient to add to the media. We need to control the media as well. So, there are several tags and attributes that are required to fully add the media.
 
The <audio> and <video> are the same in the way the content is added to it and only the tag name is different
 

Control Attributes

 

Source Tag

 
<source> element is used to serve the same media content in multiple formats so that different owners can run any of the files that it supports. It is an empty element.
 
Source Attribute
 
The src attribute is used to specify the URL of the media file that is needed to be played. This can have an absolute or relative path.
 

Meta Tags

 
Metadata defines information about data. Therefore, under the meta tag, information about the web page is stored. Metadata will not be displayed on the page but will be a machine parable. The meta tag is a self-closing tag and the data stored in it is known as metadata.
 
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
 
There are 4 attributes that are used in the meta tag:
  1.  name
  2.  content
  3. charset
  4. HTTP-equiv
Meta tags have been one of the most basic elements of SEO. They are used to provide details about your site to search engines.
 
Search engine optimization (SEO) is defined as the process of affecting the online visibility of a website or a web page in a web search engine's result.
 
Search engines such as Google often display the meta description in search results where they can highly affect user visits to a website. So, it’s very important to add meta tags to your web pages.
 

Name Attributes

 
The name attribute is used to specify the name for the metadata. The name attribute is used together with the content attribute. This attribute specifies a name for the information/value of the content attribute.
 
The name attribute can have one of the 6 values:
  • author - specifies the name of the author of the document
  • keywords - specifies a comma-separated list of words for SEO purposes
  • viewport - specifies the control of the viewport on different devices
  • application-name - specifies the name of the application that the page represents
  • description - specifies a description of the page
  • generator - specifies the software packages used to generate the document

Content Attributes

 
The content attribute gives the value associated with the HTTP-equiv or name attribute.
 
Charset Attributes
 
the charset attribute is used for declaring the character encoding for the page. It is a good practice to use UTF-8 encoding. However, this must be taken care of that the declared character set matches the one on the page and is defined for every page of the website. 
 

1. Intro to CSS

 
CSS Introduction
  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be presented on screen
  • CSS can control the layout of multiple web pages all at once
  • Includes adding visuals like color, fonts, layouts, etc.

2. CSS Comments

 
Just like HTML, CSS also contains comments and can be used to define the various sections of HTML element styles that can help in changes at a later stage, easily. You can also describe where certain generic style(s) can be used.
 
A CSS comment starts with /* and ends with */. Comments can also span multiple lines.
 

3. Adding CSS to HTML Page

 
The owner formats the HTML document based upon the information in the stylesheet. The owner accesses the stylesheets from the HTML document itself. There are 3 ways to add CSS styles to your document. Each of them can contain multiple properties:
  • Inline styles
  • Internal styles
  • External styles
Cascading order defines which style will be applied to elements when multiple styles are used.
 
Cascading order priority: Inline > (internalexternal) > owser default.
 
The internal and external CSS are treated equally by the owner. But the order of their definition decides which one’s property will get preference. If a link to external CSS is defined before the internal CSS, then properties of internal CSS will get the preference, i.e., internal CSS > external CSS. If a link to external CSS is defined after the internal CSS, then properties of external CSS will get preference over internal CSS, i.e., external CSS > internal CSS.
 
3.1. Inline CSS
 
An inline stylesheet is applied directly to our HTML code using the style attribute. The inline stylesheet syntax contains properties written inside the style attribute. Multiple properties can be defined at a time.
 
An inline style is used to apply a unique style for a single element.
 
3.2. Internal styles
 
An internal or in-page stylesheet holds the CSS code for the web page. The internal stylesheet contains the styles for that HTML document only. They cannot be reused. Internal CSS can be applied using <style> tag inside the <head> tag.
 
3.3. External styles
 
With an external stylesheet, you can change the look of an entire website by changing just one file. The syntax is similar to internal stylesheets, but it is applied using a completely different CSS file. It is saved with the '.CSS' extension. Eg. ' styles.css'.
 
To use an external stylesheet, a reference is provided to file inside the <link> elemen>
 
The rel defines the relationship with the linked document (here, favicon). The href defines the location of the linked document (here, favicon). The type defines the media type of the linked document (here, favicon)
 

4. Selector

 
Selectors point to the HTML element which we want to style. We use selectors in internal and external stylesheets. There are mainly 3 types of selectors that are used to apply styles:
  • Element selector
  • Class selector
  • Id selector
Specificity here defines which style will be applied when the same multiple styles are applied to an element. If the specificity is the same, then the latest rule is applied. Specificity order: inline > id selector > class selector > tag selector > owser default.
 
4.1. Element Selector
 
The element selector selects all elements with the specified element name. This will select all the elements in the HTML document. But most of the time we don't want this. So, to apply styles to only some elements we need to use some restrictions. We will look into this later in this section only.
 
4.2. Class Selector
 
The class selector selects multiple elements with a specific class attribute. To select elements with a specific class, write a period(.) character, followed by the name of the class.
 
4.3. ID Selector
 
The id selector selects only one element with a specific id attribute. To select an element with a specific id, write a hash (#) character, followed by the name of the id.
 
Syntax
 
#class-name {CSS declarations;}
 
To use the id selector, the id attribute is used in the element's opening tag. The value of the id attribute contains the name of the id. There can only be one id in the tag. The id is unique on an HTML page. If another element is given the same id, the styles would not be applied by the owner.
 
4.4. Grouping Selectors
 
It is most of the time that we use the same CSS for multiple elements and we can't use too many classes. This would be having classes without any meaning in the scenario and would become difficult to manage. So, CSS provides a grouping feature where you can apply CSS rules to multiple elements with the use of a combination of either tag, class, or id. For grouping, we use a comma between the different selectors.
 
These are the few examples how you can use grouping,
  • p,.class-name{CSSproperties} - apply styles to 'para' and element with class as 'class-name'
  • #id1,#id2, span{CSSproperties}- apply styles to 'span' and elements with ids as 'id1'and 'id2'
  • .class-name, #id1, div{CSSproperties}-apply styles to 'div' and elements with class 'class-name' and id as 'id1'
4.5. Nesting Selectors
 
There are times when we want to target elements inside a specific section of the HTML page. So, instead of using the classes, we can use nesting that works like a hierarchy and is easy to understand.
 
To use nesting, use a space between the selectors such that the sequence represents a hierarchy, starting from the top.
 
These are the few examples,
  • .class-name span {CSS declarations}- apply styles to only those 'span', which are inside the element with class 'class-name'
  • #id1.class-namespan {CSSdeclarations}- apply styles to only those 'span', which are inside the element with class 'class-name' and 'class- name' is inside the element with id 'id1'
4.6. Chaining Selectors
 
There are times when we have (or want to have) the same class for multiple elements and we want to apply style(s) to one/some of them. Then we can use chaining
selectors.
 
To use chaining, we use the combination of selectors without any space in between them.
 

Styling with CSS

 
1. COLOR
 
The color property is used to set the foreground color of an element's text context and its decoration.
 
The color property can be specified in 6 different ways. Each one of them provides has some difference from the other. Although color can also be applied to backgrounds and borders, we will discuss them later.
  1. <h2 style="color:orangered;">orangered</h2>  
  2. <h2 style="color:#ff6347;">#ff6347</h2>  
  3. <h2 style="color:#ff6347;">#ff6347</h2>  
  4. <h2 style="color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h2>  
  5. <h2 style="color:rgba(255, 99, 71, 0.7);">rgba(64, 213, 240, 0.5  
  6. )</h2>  
  7. <h2 style="color:hsla(9, 100%, 64%, 0.7);">hsla(190, 73%, 95%, 0.5)</h2> 
1.1. By name
 
All modern browsers support 140 different colors named in CSS. Unlike HTML, CSS will completely ignore unknown keywords. The color keywords all represent plain, solid colors, without transparency. Eg., orange-red, green, blue, light grey, etc.
 
1.2. Using RGB
 
RGB stands for Red, Green, and Blue. It is a color model where a combination of red, green, and blue forms a color. The intensity of each color has a value ranging from 0 to 255. This provides a very large number of colors dataset.
 
Egg, the RGB value for black is #000000 and for white is #ffffff.
 
1.3. By hex code
 
The colors can be represented by 6 digits hexadecimal code. The codes are made using the 3 colors(Red, Green, and Blue). The first 2 digits are red, the next 2 are green and the last 2 are blue. So, the syntax for hex code is #RRGGBB. Each hexadecimal value between 00 - FF is similar to 0 - 255.
 
Eg., #000000 is black and #FFFFFF is white.
 
1.4. Using HSL
 
The color can also be specified using the HSL (Hue, Saturation, and Lightness) components.
  • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
  • Saturation represents the amount of saturation in the color. It is a percentage value, 0% means a shade of Gray, and 100% is the full color.
  • Lightness represents the amount of light in the color. It is also a percentage, 0% is black, 50% is neither light nor dark, 100% is white.
1.5. Using rgba
 
RGBA (Red, Green, Blue, Alpha) is an extension of RGB, provided with alpha transparency. This alpha value determines the opacity of the RGB-defined color. The alpha parameter is a number between 0.0 (transparent) and 1.0 (opaque).
 
1.6. Using hsla
 
HSLA (Hue, Saturation, Lightness, Alpha) is also an extension of HSL, provided with alpha transparency. The alpha value and property are the same as those in RGBA.
 

2. CSS Units

 
CSS units are used for expressing the size of different properties. The units are expressed by a number followed by the unit symbol. Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc. Eg. are 10px, 2em, 50% etc.
 
Whitespace cannot appear between the number and the unit. If the value is 0, the unit can be omitted.
 
For some CSS properties, negative lengths are allowed. Eg. margin There are two types of length units: absolute and relative.
 
2.1. Absolute Units
 
The absolute units a fixed size/length of the element. Absolute length units are not recommended for use on-screen, because screen sizes vary so much. The absolute units consist of the following:
  • cm - centimeters
  • mm - millimeters in inches (1in = 96px = 2.54cm)
  • px - pixels (1px = 1/96th of 1in) 
  • pt - points (1pt = 1/72 of 1in)
  • pc-picas(1pc=12pt)
2.2. Relative Units
 
Relative length units specify a length relative to another length property. Some of the relative units are the following:
  • em - Relative to the font-size of the element (2em means 2 times the size of the current font)
  • rem - Relative to font-size of the root element
  • VW - Relative to 1% of the width of the browser window size
  • the - Relative to 1% of the height of the browser window size
  • % - Relative to the parent element

3. Border

 
The border property is used to set the element's border. CSS borders allow you to specify the style, width, and color of an element's border. The border is a shorthand for border-width, border-style, and border-color wrote together.
 
3.1. Border Width
 
The border-width property specifies the width of the four borders. The width can be set as an absolute or relative size or by using one of the three predefined values: thin, medium, or thick.
 
Eg.ḅorder width 20 px 30px 39px ;, will have top border of 2px, right border of 10px, bottom border to 4px and left border to 20px.
 
3.2. Border Style
 
The border-style property specifies what kind of border to display. The values for border-style are: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden, will have dotted top border, dashed right border, solid bottom border and double lined left border.
 
3.3. Border Color
 
The border-color property specifies the color of the four borders. The value of the property is the same as that of the color property. But now you can provide different colors to different border sides. If the border-color is not set, it inherits the color of the element.
 
Eg., border-color: red-green; will have top and bottom border color red and left and right border-color green.
 
3.4. Border Individual Sides
 
Using the border property, we are able to provide width, style, and color to all the borders separately but still, we have to give some value to all the sides of the border.
 
CSS border also has the property to give border value separately to each of the border sides. The border property for the sides is:
  • border-top
  • border-right
  • border-bottom
  • border-left
This is further taken to provide style, width, and color separately to the border sides. Some of them are: border-top-style, border-right-width, border-left-color, etc.
 
3.5. Border Radius
 
The border-radius property is used to add rounded borders to an element. You can give absolute(eg. in px) or relative(eg. in %) value to this property.
 
Eg., if we add a border-radius property to the first border example, will show like,
 
The border-radius can be provided in the elliptical form as well. Therefore, you need to provide horizontal and vertical radius differently. This is done using a slash ("/")
between horizontal and vertical radius. 

4. Text and Font Styling

 
Various properties are provided to change the look and style of text in the HTML document. These styles will apply only to the content of any element that is text. We will look into some of the most used text and font styling properties.
 
Font properties define the look of the font like font family, boldness, size, and style. The first 4 are font properties.
 
Text properties define the layout and presentation of the text on the HTML page.
 
4.1. font-size
 
This defines the size of the text. The font-size value can be an absolute or relative size, i.e., values can be applied in px, %, em, etc.
 
4.2. font-family
 
The font family of a text is set with the font-family property. The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.
 
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family if no other fonts are available.
 
4.3. font-weight
 
The font-weight property specifies the weight/thickness of a font. The weight ranges from light to bold. Values can be bold, bolder, inherit, initial, lighter, normal, unset. Alternatively, we can use numeric values ranging from 100-900 to define the weight of the Font will show
 
Border Radius
 
The border-radius can be provided in the elliptical form as well. Therefore, you need to provide horizontal and vertical radius differently. This is done using a slash ("/") between horizontal and vertical radius.
 
4. Text and Font Styling
 
Various properties are provided to change the look and style of text in the HTML document. These styles will apply only to the content of any element that is text. We will look into some of the most used text and font styling properties.
 
Font properties define the look of the font like font family, boldness, size, and style. The first 4 are font properties.
 
Text properties define the layout and presentation of the text on the HTML page.
 

5. Background

 
The background properties are used to define the background effects for elements. The background of an element is the total size of the element and includes padding and border but not the margin. Backgrounds can be filled with a color or image, clipped or resized, and otherwise modified. CSS background properties:
  • background-image
  • background-repeat
  • background-position
  • background-size
5.1 Background Color
 
The background-color property sets the background color of an element. It has the same value as that of the color property.
 
5.2 Background Image
 
The background-image property is used to specify an image to use as the background of an element. This can set one or more background images for an element.
 
By default, a background-image is placed at the top-left corner of an element and is repeated so it covers the entire element both vertically and horizontally.
 
The values it can take are:
  • URL('URL') - specifies the URL of the image. You can specify more than one image by separating the URLs with a comma
  • none - this is the default value. No background image will be displayed
  • linear-gradient() - sets a linear gradient as the background image. At least two colors needed to be mentioned (default direction is top to bottom)
  • radial-gradient () - sets a radial gradient as the background image. At least two colors needed to be mentioned (default is from the center to edges)
  • repeating-linear-gradient () - repeats a linear gradient
  • repeating-radial-gradient() - repeats a radial gradient
In the above example, we are using both the image and linear-gradient together. Try to swap the sequence of image and gradient and see what happens.
 
5.3. background-repeat
 
The background-repeat property is used to specify how/if a background image will be repeated. By default, a background image repeats both vertically and horizontally, so background-repeat will how will the image repetition works.
 
The values this property can take are:
  • repeat - this is the default value. The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit
  • repeat-x - the image is repeated only horizontally
  • repeat-y - the image is repeated only vertically
  • no-repeat - the image will only be shown once
  • space - the background-image is repeated without clipping. Space remaining is distributed evenly between images with first and last images pinned to sides of the element
  • round - the image is repeated and shrink or stretch to fill the space
Box Model
 
Box model describes the layout of the elements. The HTML elements are considered boxes.
 
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and content.
 
Web Application Code
  1. <!DOCTYPE html>    
  2.     
  3. <head>    
  4. </head>    
  5. <style>    
  6.     .navbar {    
  7.         /*here we can use background as video which isgiven in    
  8.     <video src="" control:autoplay;   
  9.     */    
  10.         background-color: rgb(26, 116, 122);    
  11.         margin: 7px;    
  12.         padding: 9px;    
  13.         top: auto;    
  14.         opacity: 0.6;    
  15.         position: relative;    
  16.         display: flex;    
  17.         background-attachment: fixed;    
  18.     }    
  19.     
  20.     .h1 {    
  21.         position: relative;    
  22.         display: inline-flex;    
  23.     }    
  24.     
  25.     .h1 a {    
  26.         color: white;    
  27.         font-size: 18px;    
  28.         margin: 8px;    
  29.         padding: 10px;    
  30.         text-decoration: none;˜    
  31.     }    
  32.     
  33.     .h1 a:hover {    
  34.         color: red;    
  35.     }    
  36.     
  37.     .sec {    
  38.         background-color: rgb(91, 114, 218);    
  39.         position: absolute;    
  40.         height: 75%;    
  41.         width: 100%;    
  42.     }    
  43.     
  44.     .sec h1 {    
  45.         top: 10px;    
  46.         margin: 12px auto;    
  47.         width: 35%;    
  48.         display: flex;    
  49.         color: white;    
  50.         font-size: 55px;    
  51.     }    
  52.     
  53.     .sec2 {    
  54.         top: 10px;    
  55.         margin: 12px auto;    
  56.         width: 35%;    
  57.         display: flex;    
  58.         color: white;    
  59.         font: 5px;    
  60.         border-radius: 4px 4px 4px 4px;    
  61.         border: 2px solid white;    
  62.         padding: 5px;    
  63.         margin: 3px auto;    
  64.     }    
  65.     
  66.     .aa {    
  67.         top: 10px;    
  68.         margin: 12px;    
  69.         width: 35px;    
  70.         display: flex;    
  71.         color: white;    
  72.         font: 5px;    
  73.         border-radius: 4px 4px 4px;    
  74.         border: 2px solid white;    
  75.         padding: 5px;    
  76.         margin: 3px auto;    
  77.         background-color: green;    
  78.     }    
  79.     
  80.     .aa:hover {    
  81.         color: white;    
  82.         cursor: pointer;    
  83.     }    
  84.     
  85.     .para li {    
  86.         padding: 12px;    
  87.         margin-top: 12%;    
  88.         position: relative;    
  89.         width: 12%;    
  90.         margin:12px ;    
  91.         display: block;    
  92.     }    
  93.     
  94.     .my{    
  95.         top:15%;    
  96.         margin:12px;    
  97.     }    
  98.     
  99.     .my h1 {    
  100.         top: 10px;    
  101.         margin: 12px auto;    
  102.         width: 35%;    
  103.         display: flex;    
  104.         color: white;    
  105.         font-size: 55px;    
  106.     
  107.     }.black{    
  108.         background-color:red;    
  109.         height: 50%;    
  110.         width: 100%;color: white;    
  111.     }    
  112.     
  113.     .another {    
  114.         background: url("https://www.gettyimages.in/detail/news-photo/founder-and-ceo-of-spotify-daniel-ek-speaks-onstage-during-news-photo/474099162"))no-repeat center center/cover;    
  115.     }    
  116.         
  117.     .b{    
  118.         font-size: 25px;    
  119.         display:block;    
  120.         margin: 10px;    
  121.         padding: 10px;    
  122.     }    
  123. </style>    
  124.     
  125. <body>    
  126.     <div class="navbar">    
  127.         <div class="spot"><img src="https://www.spotifyjobs.com/wp-content/themes/spotify-career/assets/img/spotify-logo.svg">    
  128.             <ul class="h1">    
  129.                 <li>    
  130.                     <select>    
  131.                         <optgroup label="company">    
  132.                             <option value="Sumsung">Sumsung</option>    
  133.                             <option value="apple">apple</option>    
  134.                             <option value="google">google</option>    
  135.                         </optgroup>    
  136.                     </select>    
  137.                 <li><a href="www.mcn.com">location</a></li>    
  138.                 <li><a href="">life at spotify</a></li>    
  139.                 <li><a href="">student</a></li>    
  140.                 <li><a href="">search job</a></li>    
  141.                 <li><a href=""><img src="https://www.instagram.com/spotifyjobs"></a></li>    
  142.                 <li><a href=""><img src="https://twitter.com/spotifyjobs"></a></li>    
  143.                 <li><a href=""><img src="https://www.instagram.com/spotifyjobs"></a></li>    
  144.                 <li><a href=""><img src="https://twitter.com/spotifyjobs"></a></li>    
  145.             </ul>    
  146.         </div>    
  147.     </div>    
  148.     <section>    
  149.         <div class="sec">    
  150.             <h1>    
  151.                 join the band </h1><br>    
  152.             <div class="sec2"><input type="text" placeholder="serach job title or keyword">    
  153.             </div><br>    
  154.             <div class="sec2"><input type="text" placeholder="choose job category">    
  155.             </div>    
  156.             <div class="aa"><button type="submit" value="register">GO</button>    
  157.             </div>    
  158.             <div class="my">    
  159.                 <h1> WHAT IS YOUR PASSION?</h1><br>    
  160.                 <br>    
  161.                 <br>    
  162.                 <ul class="para">    
  163.                     <li>    
  164.                         <h1> RESUME UPGRADE</h1><img src="https://storage.googleapis.com/spotifyjobs_live/1/2016/12/content_feature_image_hero-350x350.png">    
  165.                     </li>    
  166.                     <h1>COMPANY MEMORIES</h1>    
  167.                     <li><img src="https://storage.googleapis.com/spotifyjobs_live/1/2019/11/customer_service_hero_feature-350x350.png">    
  168.                     </li>    
  169.                 </ul>    
  170.             </div>    
  171.             <div class="another">    
  172.                 <p>The most rewarding thing is when you see people grow.<br>    
  173.                     To see them taking on more responsibility, <br>    
  174.                     setting their own goals and realizing what’s important to them. <br>This happens at Spotify, every day.    
  175.                     <br> Daniel Ek, CEO</p>    
  176.             </div>    
  177.             <div class="black">    
  178.                 <div class="b">    
  179.                     <h1>    
  180.                         company    
  181.                     </h1>    
  182.                     <p>A company is a legal entity formed by a group of individuals to engage in and operate a business—commercial or industrial—enterprise. ... The line of business the company is in will    
  183.                         generally determine which business structure it chooses such as a partnership, proprietorship, or corporation.    
  184.                     </p>    
  185.                 </div>    
  186.                 <ul class="ul">    
  187.                     <li> ABOUT </li>    
  188.                     <li>PRESS CONFRESS </li>    
  189.                     <li>NEWS</li>    
  190.                 </ul>    
  191.             </div>    
  192.     </section>    
  193. </body>    
  194.     
  195. </html>      
The output is as follows:
 
  
 

Conclusion

 
This web app is made up of HTML, CSS, and Javascript. It is easy to learn about them, as described above.