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.
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:
- name
- content
- charset
- 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 > (internal≅ external) > 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.
- <h2 style="color:orangered;">orangered</h2>
- <h2 style="color:#ff6347;">#ff6347</h2>
- <h2 style="color:#ff6347;">#ff6347</h2>
- <h2 style="color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h2>
- <h2 style="color:rgba(255, 99, 71, 0.7);">rgba(64, 213, 240, 0.5
- )</h2>
- <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)
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.
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
The output is as follows: