HTML CSS Archives - https://careersknowledge.in/category/html-css/ Thu, 22 May 2025 04:59:20 +0000 en-US hourly 1 https://wordpress.org/?v=7.0 What is opacity in CSS with example https://careersknowledge.in/what-is-opacity-in-css-with-example/ https://careersknowledge.in/what-is-opacity-in-css-with-example/#respond Sat, 23 Dec 2023 15:03:53 +0000 https://careersknowledge.in/?p=1187 CSS Opacity / Transparency The opacity property specifies the opacity/transparency of an element. In other word we can say that opacity change the visibility of an image. When You can decrease the image opacity then you will see the image in blur form. The following example show the image opacity in opacity in CSS with example Transparent Image ... Read more

The post What is opacity in CSS with example appeared first on .

]]> CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. In other word we can say that opacity change the visibility of an image. When You can decrease the image opacity then you will see the image in blur form. The following example show the image opacity in opacity in CSS with example

Transparent Image

The opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent:Example

<html>

<head>

<style>

img {

  opacity:0.5;

}

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>

<img src=”Tulips.jpg” alt=”image” width=”270″ height=”200″>

</body>

</html>

Output

opacity in CSS with example?

CSS table style with examples

Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the opacity on mouse-over. When you are on image then you will see the image highlighted.

<!DOCTYPE html>

<html>

<head>

<style>

img {

  opacity: 0.5;

}

img:hover {

  opacity: 1;

}

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>

<img src=”Desert.jpg” alt=”Forest” width=”270″ height=”200″>

<img src=”Tulips.jpg” alt=”Mountains” width=”270″ height=”200″>

<img src=”Desert.jpg” alt=”Italy” width=”270″ height=”200″>

</body>

</html>

Output

opacity in CSS with example?

For Live class Click on the below link

Live class

Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read. Here you will see the div element in Transparent Box

<!DOCTYPE html>

<html>

<head>

<style>

div {

  background-color: orange;

  padding: 10px;

}

div.first {

  opacity: 0.1;

}

div.second {

  opacity: 0.3;

}

div.third {

  opacity: 0.6;

}

</style>

</head>

<body>

<h1>Transparent Box</h1>

<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read.</p>

<div class=”first”><p>opacity 0.1</p></div>

<div class=”second”><p>opacity 0.3</p></div>

<div class=”third”><p>opacity 0.6</p></div>

<div><p>opacity 1 (default)</p></div>

</body>

</html>

Output

opacity in CSS with example

Thanks For Reading the Article in hope you will understand the topic opacity in CSS with example.

Also Check

Libreoffice calc mcq questions in hindi

libreoffice writer mcq questions in hindi

The post What is opacity in CSS with example appeared first on .

]]> https://careersknowledge.in/what-is-opacity-in-css-with-example/feed/ 0 CSS table style with examples https://careersknowledge.in/css-table-style-with-examples/ https://careersknowledge.in/css-table-style-with-examples/#respond Fri, 22 Dec 2023 07:36:12 +0000 https://careersknowledge.in/?p=1178 CSS Table Style Cascading Style Sheets (CSS) play a pivotal role in shaping the visual appeal and user experience of a website. Among the myriad elements you can style, tables stand out as versatile components that can be transformed into eye-catching and functional entities. In this exploration, we dive into the art of CSS Table Styles, ... Read more

The post CSS table style with examples appeared first on .

]]> CSS Table Style

Cascading Style Sheets (CSS) play a pivotal role in shaping the visual appeal and user experience of a website. Among the myriad elements you can style, tables stand out as versatile components that can be transformed into eye-catching and functional entities. In this exploration, we dive into the art of CSS Table Styles, discovering how they can elevate your web design to new heights. If you seaching HTML CSS table property then you are on right place here we will get CSS table style with examples.

Let us see the detailed example

Example

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th { 

  border: 1px solid #ddd;

  text-align: left;

}

 

table {

  border-collapse: collapse;

  width: 100%;

}

th, td {

  padding: 15px;

}

</style>

</head>

<body>

<h2>The padding Property</h2>

<p>This property adds space between the border and the content in a table.</p>

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>Amit</td>

    <td>Sharma</td>

    <td>100000</td>

  </tr>

  <tr>

    <td>Rohit</td>

    <td>Gupta</td>

    <td>500000</td>

  </tr>

  <tr>

    <td>Rehan</td>

    <td>Khan</td>

    <td>300000</td>

  </tr>

  <tr>

    <td>Cleveland</td>

    <td>Brown</td>

    <td>$250</td>

  </tr>

</table>

</body>

</html>

Output

1) Bottom Border-

This property adds border at the bottom of each row. Example

<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid red;
}
</style>
</head>
<body>

<h2>The Bottom Property</h2>

<p>This property adds border at the bottom of each row.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Amit</td>
<td>Sharma</td>
<td>100000</td>
</tr>
<tr>
<td>Rohit</td>
<td>Gupta</td>
<td>500000</td>
</tr>
<tr>
<td>Rehan</td>
<td>Khan</td>
<td>300000</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

Output

CSS table style with examples

2) Hoverable Table

This property is used  to highlight table rows on mouse over:

Syntax-

tr:hover {background-color: red;}

3) Striped Tables

 We can use  zebra-striped tables with  nth-child() selector and add a background-color to all even (or odd) table rows:Example

<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {background-color:green}
</style>
</head>
<body>

<h2>Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Amit</td>
<td>Sharma</td>
<td>100000</td>
</tr>
<tr>
<td>Rohit</td>
<td>Gupta</td>
<td>500000</td>
</tr>
<tr>
<td>Rehan</td>
<td>Khan</td>
<td>300000</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

css properties list with examples

Output

4) Table Color 

By using this propert we can apply colors on table text. 

Syntax- color:color-name;

Example

<html>
<head>
<style>
table {
border:1px solid black;
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
color: blue;
border:1px solid black;
padding: 8px;
}

th {

color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Amit</td>
<td>Sharma</td>
<td>100000</td>
</tr>
<tr>
<td>Rohit</td>
<td>Gupta</td>
<td>500000</td>
</tr>
<tr>
<td>Rehan</td>
<td>Khan</td>
<td>300000</td>
</tr>

</table>

</body>
</html>

css background property with example

Output

5) CSS Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect.To create a responsive table, add a container element (like div) with overflow-x:auto around the table element.

<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the
screen is too
small to display the full content. Resize the browser window to see
the effect:</p>
<p>To create a responsive table, add a container element (like div)
with <strong>overflow-x:auto</strong> around the table element:</p>

<div style=”overflow-x: auto;”>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>

</body>
</html>

Output

I hope you will understand the topic CSS table style with examples well.

For Live class click on the link

Table Property Live Class

The post CSS table style with examples appeared first on .

]]> https://careersknowledge.in/css-table-style-with-examples/feed/ 0 css properties list with examples https://careersknowledge.in/css-properties-list-with-examples/ https://careersknowledge.in/css-properties-list-with-examples/#respond Fri, 15 Dec 2023 08:43:31 +0000 https://careersknowledge.in/?p=1149 In this blog you will get css properties list with examples . So must checkout the full blog so you will get detailed Information. CSS List Properties The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the ... Read more

The post css properties list with examples appeared first on .

]]> In this blog you will get css properties list with examples . So must checkout the full blog so you will get detailed Information.

CSS List Properties

The CSS list properties allow you to:

  • Set different list item markers for ordered lists
  • Set different list item markers for unordered lists
  • Set an image as the list item marker
  • Add background colors to lists and list items

1) Different List Item Markers

The list-style-type property specifies the type of list item marker.

Example

<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: upper-alpha;
}
</style>
</head>
<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>
<ul class=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class=”b”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class=”c”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class=”d”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Output

css properties list with examples

2) An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker: Example

<html>
<head>
<style>
ul {
list-style-image: url(“Desert.jpg”);
}
</style>
</head>
<body>

<h2>The list-style-image Property</h2>

<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Output

css properties list with examples

Css border properties with examples

3) Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

Example

<html>
<head>
<style>
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<ul class=”a”>
<li>Red</li>
<li>Green</li>
<li>Yellow</li>
</ul>
<ul class=”b”>
<li>Red</li>
<li>Green</li>
<li>Yellow</li>
</ul>
</body>
</html>

Output

4) Remove Default Settings

The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:

<html>
<head>
<style>
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>

<p>Default list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Remove bullets, margin and padding from list:</p>
<ul class=”demo”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Output

css properties list with examples

5) Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items:

Example

<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html

Output

For Live Class click on the link

Live Class

Thanks For Reading the Blog css properties list with examples .

The post css properties list with examples appeared first on .

]]> https://careersknowledge.in/css-properties-list-with-examples/feed/ 0 Css border properties with examples https://careersknowledge.in/css-border-properties-with-examples/ https://careersknowledge.in/css-border-properties-with-examples/#respond Sun, 10 Dec 2023 15:00:43 +0000 https://careersknowledge.in/?p=1135 Css border properties with examples Cascading Style Sheets (CSS) empowers web developers to enhance the visual appeal of HTML elements, and one crucial aspect is the use of border properties. Borders not only provide structural definition but also contribute to the overall aesthetics of a webpage. In this article, we’ll explore the various CSS border ... Read more

The post Css border properties with examples appeared first on .

]]> Css border properties with examples

Cascading Style Sheets (CSS) empowers web developers to enhance the visual appeal of HTML elements, and one crucial aspect is the use of border properties. Borders not only provide structural definition but also contribute to the overall aesthetics of a webpage. In this article, we’ll explore the various CSS border properties and provide examples to illustrate their usage.

The Basics of CSS Border Property

The border property in CSS is a shorthand property that combines three individual border-related properties: border-width, border-style, and border-color. The basic syntax is as follows:

selector {
border: [border-width] [border-style] [border-color];
}

  • border-width: Specifies the width of the border (e.g., thin, medium, thick, or a specific length).
  • border-style: Defines the style of the border (e.g., solid, dashed, dotted, double).
  • border-color: Sets the color of the border.

1) CSS border-block Property

The CSS border-block property is very similar to CSS property border, but the border-block property is dependent on block direction.

<html>
<head>
<style>
h1, h2, div {
background-color: green;
}
h1 {
border-block: 5px solid red;
}

h2 {
border-block: 4px dotted blue;
}

div {
border-block: double;
}
</style>
</head>
<body>

<h1>A heading with a solid red border in the block direction</h1>

<h2>A heading with a dotted blue border in the block direction</h2>

<div>A div element with a double border in the block direction.</div>

</body>
</html>

Output

Css border properties with examples

2) CSS border-block-color Property 

The CSS border-block-color property is very similar to CSS properties border-bottom-color, border-left-color, border-right-color and border-top-color, but the border-block-color property is dependent on block direction.

<html>
<head>
<style>
div {
background-color: lightgreen;
inline-size: 70%;
border-block-width: 10px;
}

#example1 {
border-block-style: solid;
border-block-color: pink;
}

#example2 {
border-block-style: solid;
border-block-color: pink lightblue;
}
</style>
</head>
<body>
<h2>border-block-color: pink:</h2>
<div id=”example1″>
<p>The border-block-color property defines the color of the borders in the block direction.</p>
</div>
<h2>border-block-color: pink lightblue:</h2>
<div id=”example2″>
<p>If two values are set; the first one is for the start in the block direction, and the second one is for the end in the block direction.</p>
</div>
</body>
</html>

Output 

3) The border-block-end Property

The CSS border-block-end property is very similar to CSS properties border-bottom, border-left, border-right and border-top, but the border-block-end property is dependent on block direction

<html>
<head>
<style>
div {
background-color: lightgreen;
inline-size: 70%;
border-block-end: 20px red solid;
}
</style>
</head>
<body>
<h2>The border-block-end Property</h2>
<div>
<p>The border-block-end property defines the width, color and style for the border at the end of the block direction.</p>
</div>
</body>
</html>

css background property with example

Output

 

 

Css border properties with examples

4) CSS border-block-style Property

The CSS border-block-style property is very similar to CSS properties border-bottom-style, border-left-style, border-right-style and border-top-style, but the border-block-style property is dependent on block direction.

<html>
<head>
<style>
div {
background-color: lightgreen;
inline-size: 70%;
border-block-width: 5px;
}

#example1 {
border-block-style: solid;
}

#example2 {
border-block-style: dotted dashed;
}
</style>
</head>
<body>

<h2>border-block-style: solid:</h2>
<div id=”example1″>
<p>The border-block-style property defines the style of the border at the start and end in the block direction.</p>
</div>

<h2>border-block-style: dashed dotted:</h2>
<div id=”example2″>
<p>If two values are set; the first one is for the start in the block direction, and the second one is for the end in the block direction.</p>
</div>

</body>
</html>

Html css selectors types with examples

Output

Css border properties with examples

5) CSS border-block-width Property

The CSS border-block-width property is very similar to CSS properties border-bottom-width, border-left-width, border-right-width and border-top-width, but the border-block-width property is dependent on block direction.

<html>
<head>
<style>
div {
background-color: lightgreen;
inline-size: 70%;
border-block-start-style: solid;
}

#example1 {
border-block-style: solid;
border-block-width: 20px;
}

#example2 {
border-block-style: solid;
border-block-width: thin thick;
}
</style>
</head>
<body>

<h2>border-block-width: 10px:</h2>
<div id=”example2″>
<p>The border-block-width property defines the width of the border in the start and end in the block direction.</p>
</div>

<h2>border-block-width: thin thick:</h2>
<div id=”example1″>
<p>If two values are set; the first one is for the start in the block direction, and the second one is for the end in the block direction.</p>
</div>

</body>
</html>

Output

Css border properties with examples

6) CSS border-top-left-radius Property

The border-bottom-left-radius property defines the radius of the bottom-left corner.

<html>
<head>
<style>
#example1 {
border: 2px solid red;
padding: 10px;
border-top-left-radius:25px;
}

#example2 {
border: 2px solid red;
padding: 10px;
border-top-left-radius: 50px 20px;
}
</style>
</head>
<body>

<h2>border-top-left-radius: 25px:</h2>
<div id=”example1″>
<p>The border-top-left-radius property defines the radius of the top-left corner.</p>
</div>

<h2>border-top-left-radius: 50px 20px:</h2>
<div id=”example2″>
<p>If two values are set; the first one is for the top border, the second one for the left border.</p>
</div>

</body>
</html>

Output

Css border properties with examples

7) CSS border-top-right-radius Property

The border-bottom-right-radius property defines the radius of the bottom-left corner.

<html>
<head>
<style>
#example1 {
border: 2px solid red;
padding: 10px;
border-top-right-radius: 25px;
}
#example2 {
border: 2px solid red;
padding: 10px;
border-top-right-radius: 50px 20px;
}
</style>
</head>
<body>
<h2>border-top-right-radius: 25px:</h2>
<div id=”example1″>
<p>The border-top-right-radius property defines the radius of the top-right corner.</p>
</div>

<h2>border-top-right-radius: 50px 20px:</h2>
<div id=”example2″>
<p>If two values are set; the first one is for the top border, the second one for the right border.</p>
</div>
</body>
</html>

Output

https://www.youtube.com/@olevelguruji

The post Css border properties with examples appeared first on .

]]> https://careersknowledge.in/css-border-properties-with-examples/feed/ 0 css background property with example https://careersknowledge.in/css-background-property-with-example/ https://careersknowledge.in/css-background-property-with-example/#respond Fri, 08 Dec 2023 15:21:14 +0000 https://careersknowledge.in/?p=1124 css background property with example Cascading Style Sheets (CSS) is a fundamental technology in web development that empowers developers to enhance the visual presentation of HTML documents. If you are searching about the css background property then you are on right place here you will learn css background property with example. One crucial aspect of ... Read more

The post css background property with example appeared first on .

]]> css background property with example

Cascading Style Sheets (CSS) is a fundamental technology in web development that empowers developers to enhance the visual presentation of HTML documents. If you are searching about the css background property then you are on right place here you will learn css background property with example. One crucial aspect of CSS is the background property, which allows you to control the background of an element. In this article, we’ll delve into the CSS background property, exploring its various components and providing examples to illustrate its versatility.

The Basics of CSS Background Property

The background property is a shorthand property that combines several individual background-related properties into a single declaration. It can be applied to any HTML element, enabling developers to customize the appearance of elements by setting background colors, images, and more. 

There are the following types of background properties –

1) background-color- : Sets the background color of the element. Example-

<html>
<head>
<style>
body {
background-color: coral;
}
</style>
</head>
<body>

<h1>The background-color Property</h1>

<p>The background color can be specified with a color name.</p>

</body>
</html>

Output

css background property with example

2) background-image: Specifies the URL or path to an image file to be used as the background. Example

<html>
<head>
<style>
body {
background-image: url(“Desert.jpg”);
background-repeat: no-repeat;
background-color: yellow;
}
</style>
</head>
<body>

<h1>The background-image Property</h1>

<p>Hello World!</p>

</body>
</html>

Output

css background property with example

Html css selectors types with examples

3) CSS background-position-X Property- This property repeat image in x-axis. Example-

<html>
<head>
<style>
body {

background-image: url(“Desert.jpg”);
background-repeat:repeat-x;
}
</style>
</head>
<body>

<h1>The background-position-x Property</h1>
<p>Here, the background image will be positioned in the center of the element on x-axis (in this case, the div element).</p>
<div></div>

</body>
</html>

https://www.youtube.com/@olevelguruji

Output

 

4) CSS background-position-Y Property- This property repeat image in Y-axis. Example-

 

5) CSS background-size Property – The background-size property specifies the size of the background images.

<html>

<head>

<style>

#example1 {

  border: 2px solid black;

  padding: 25px;

  background: url(mountain.jpg);

  background-repeat: no-repeat;

  background-size: auto;

}

#example2 {

  border: 2px solid black;

  padding: 25px;

  background: url(mountain.jpg);

  background-repeat: no-repeat;

  background-size: 300px 100px;

}

</style>

</head>

<body>

<h2>background-size: auto (default):</h2>

<div id=”example1″>

  <h2>Hello World</h2>

  <p>The background image is displayed in its original size.</p>

</div>

<h2>background-size: 300px 100px:</h2>

<div id=”example2″>

  <h2>Hello World</h2>

  <p>Here, the background image is set to 300px wide and 100px high.</p>

</div>

</body>

</html>

Output

css background property with example

Also Check Out Latest Uploads

Html css selectors types with examples

Html css and types of css with examples

Remote Jobs in India

The post css background property with example appeared first on .

]]> https://careersknowledge.in/css-background-property-with-example/feed/ 0 Html css selectors types with examples https://careersknowledge.in/html-css-selectors-types-with-examples/ https://careersknowledge.in/html-css-selectors-types-with-examples/#respond Wed, 06 Dec 2023 15:01:16 +0000 https://careersknowledge.in/?p=1098 Html css selectors types with examples HTML and CSS are the building blocks of web development, enabling developers to create visually appealing and interactive websites. One of the fundamental concepts in styling web pages is the use of selectors. Selectors are patterns used to select and style HTML elements, allowing developers to apply various styles ... Read more

The post Html css selectors types with examples appeared first on .

]]> Html css selectors types with examples

HTML and CSS are the building blocks of web development, enabling developers to create visually appealing and interactive websites. One of the fundamental concepts in styling web pages is the use of selectors. Selectors are patterns used to select and style HTML elements, allowing developers to apply various styles to different parts of a webpage. In this article, we will delve into HTML and CSS selectors, exploring their types and providing Html css selectors types with examples.

HTML CSS Selectors:

HTML CSS selectors are used to target specific HTML elements for styling or manipulation. The most basic selector is the element selector, which selects elements based on their tag name. For instance, to style all paragraphs in a document, you can use the following CSS rule:

CSS Syntax

Selector {Property 1:value 1; Property 2:value 2;}

p {

color: blue;

font-size: 16px;

}

This CSS rule will apply the specified styles to all <p> (paragraph) elements in the HTML document.

Types of CSS Selector

1) Universal Selector

2) ID Selector

3) Tag Selector

4) Class Selector

5) Group Selector

6 ) Attribute Selector

1) Universal Selector-

It is used for selecting all element on a page.

Syntax-

*  {

Style Properties;

}

<!DOCTYPE html>

<html>

<head>

<style>

*
{

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p>Welcome in Universal Tag !</p>

<p>And me!</p>

</body>

</html>

Output

2) ID Selectors:

ID selectors are prefixed with a hash (#) and are used to select a single element with a specific ID attribute. IDs are meant to be unique on a page, and thus, an ID selector targets a single element. Here’s an example:

<html>

<head>

<style>

#para
{

text-align: center;

color: red;

font-weight:bold;

}

</style>

</head>

<body>

<p id=”para”>Hello World!</p>

<p>This paragraph is not affected by the style here the #para is not working becoz here we do not use id #para. </p>

</body>

</html>

Output

Html css selectors types with examples




3) Tag Selector-

The tag selector in CSS is used to select and style HTML elements based on their tag name. The tag name is the name of the HTML element, such as <p> , <h1> , <div> , etc. To use a tag selector, you simply specify the tag name you want to select, preceded by a period ( . )

p {

text-align:center;

color:red;

}

<html>
<head>
<style>
body
{
background-color:green;
}
p
{

text-align:center;

color:red;

}
h1
{
color:white;
}
</style>
</head>
<body>
<h1> This is Tag Selector</h1>
<p> This is the Tag selector example</p>
</body>
</html>

Html css selectors types with examples

4) Class Selectors:

Class selectors are prefixed with a dot (.) and are used to select elements with a specific class attribute. Classes are a way to group and style multiple elements with the same characteristics. Here’s an example:

<html>
<head>
<style>
.abc
{

background-color: yellow;

font-weight: bold;

}
</style>
</head>
<body>

<p class=”abc”>This paragraph is highlighted.</p>
</body>
</html>

Output

Html css selectors types with examples

5) Group Selector–

The grouping selector selects all the HTML elements with the same style definitions.

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

h1, h2, p {
text-align: center;
color: red;
}

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

<p>This is a paragraph.</p>

</body>

</html>

Output

Html css selectors types with examples




6) Attribute Selectors:

Attribute selectors allow you to select elements based on their attributes. You can target elements with a specific attribute, attribute value, or a combination of both. The Generic syntax consist of square brackets([ ]) containing an attribute name followed by an option condition to match against the value of attributre.  For example:

<input type=”text” required>

input[required] {

border: 2px solid red;

}

i) CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:

<!DOCTYPE html>

<html>
<head>
<style>
a[target]
{
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href=”https://careersknowledge.in/html-css-selectors-types-with-
examples/” target=”_blank”>Olevel Notes</a>
<a href=”http://www.disney.com”>disney.com</a>
<a href=”http://www.wikipedia.org” target=”_top”>wikipedia.org</a>
</body>
</html>

Output

ii) CSS [attribute=”value”] Selector

The selector is used to select elements with a specified attribute and value.

The following example selects all <a> elements with a target=”_blank” attribute:

<!DOCTYPE html>

<html>
<head>
<style>
a[target=”_top”]
{
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href=”https://careersknowledge.in/html-css-selectors-types-with-examples/” target=”_blank”>Olevel Notes</a>
<a href=”http://www.disney.com” target=”_blank”>disney.com</a>
<a href=”http://www.wikipedia.org” target=”_top”>wikipedia.org</a>

</body>

</html>




Output

iii) CSS [attribute~=”value”] Selector

The [attribute~=”value”] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is “flower”:

<html>
<head>
<style>
[title~=”flower”]
{
border: 5px solid yellow;
}

</style>

</head>

<body>

<h2>CSS [attribute~=”value”] Selector</h2>

<p>All images with the title attribute containing the word “flower” get a yellow border.</p>

<img src=”Desert.jpg” title=”klematis flower” width=”150 height=”113>

<img src=”Desert.jpg” title=”flower” width=”224 height=”162>

<img src=”Desert.jpg” title=”tree” width=”200 height=”358>

</body>

</html>

Output

iv) CSS [attribute|=”value”] Selector

The selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).

Note: The value has to be a whole word, either alone, like class=”top”, or followed by a hyphen( – ), like class=”top-text”.

<!DOCTYPE html>

<html>
<head>
<style>
[class|=”top”] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|=”value”] Selector</h2>
<h1 class=”top-header”>Welcome</h1>
<p class=”top-text”>Hello world!</p>
<p class=”topcontent”>Are you learning CSS?</p>
</body>
</html>

Output




v) CSS [attribute^=”value”] Selector

The  selector is used to select elements with the specified attribute, whose value starts with the specified value.

The following example selects all elements with a class attribute value that starts with “top”:

<!DOCTYPE html>

<html>
<head>
<style>
[class^=”top”]
{
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute^=”value”] Selector</h2>
<h1 class=”top-header”>Welcome</h1>
<p class=”text-top”>Hello world!</p>
<p class=”topcontent”>Are you learning CSS?</p>
</body>
</html>

Output

 

vi) CSS [attribute$=”value”] Selector

The selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with “test”:

<!DOCTYPE html>

<html>
<head>
<style>
[class$=”top”]
{
background:yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$=”value”] Selector</h2>
<h1 class=”headertop”>Welcome</h1>
<p class=”text-top”>Hello world!</p>
<p class=”topcontent”>Are you learning CSS?</p>
</body>
</html>

Output

 

vii) CSS [attribute*=”value”] Selector

The  selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains “te”:

<!DOCTYPE html>

<html>
<head>
<style>
[class*=”te”]
{
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*=”value”] Selector</h2>
<div class=”first_test”>The first div element.</div>
<div class=”second”>The second div element.</div>
<div class=”my-test”>The third div element.</div>
<p class=”mytest”>This is some text in a paragraph.</p>
</body>
</html>

Output

 

Thanks For Learning the Html css selectors types with examples.

Also Checkout Our Latest Update

Html css and types of css with examples

Remote Jobs in India

The post Html css selectors types with examples appeared first on .

]]> https://careersknowledge.in/html-css-selectors-types-with-examples/feed/ 0 Html css and types of css with examples https://careersknowledge.in/html-css-and-types-of-css-with-examples/ https://careersknowledge.in/html-css-and-types-of-css-with-examples/#respond Sat, 02 Dec 2023 14:28:46 +0000 https://careersknowledge.in/?p=1085 Html css and types of css Embarking on the dynamic realm of web development, the synergy between HTML and CSS forms the backbone of crafting captivating digital experiences. As we unravel the intricacies of HTML and CSS, our focus pivots towards understanding the diverse landscape of CSS, exploring its types, and delving into the pivotal ... Read more

The post Html css and types of css with examples appeared first on .

]]> Html css and types of css

Embarking on the dynamic realm of web development, the synergy between HTML and CSS forms the backbone of crafting captivating digital experiences. As we unravel the intricacies of HTML and CSS, our focus pivots towards understanding the diverse landscape of CSS, exploring its types, and delving into the pivotal role it plays in elevating the aesthetics and functionality of web pages. Join us on this enlightening journey into the realms of “HTML, CSS, and types of CSS,” where we decode the foundational elements that shape the online world and empower developers to master the artistry of web design.

In the vast and ever-evolving landscape of web development, two foundational technologies stand tall, shaping the visual appeal and structure of websites — HTML and CSS. Together, they form the backbone of the digital world, harmonizing content and design seamlessly. In this article, we delve into the intricacies of HTML, CSS, and explore the different types of CSS that contribute to the artistry of the web.

Understanding HTML (HyperText Markup Language)

HTML, the cornerstone of web development, serves as the structural framework for content on the internet. It employs a system of tags, each with a specific purpose, to define and organize elements on a webpage. From headings (<h1> to <h6>) that establish hierarchy to paragraphs (<p>) that contain textual content, HTML structures information in a way that is both logical and meaningful.

Example

<html>
<head>
<style>
h1 {
color:red;
}
p {
color:green;
}
h2 {
color:blue;
}
</style>
<body>
<h1>This is heading- 1</h1>
<p>This is Paragraph</p>
<h2>This is heading 2</h2></body>
</html>

Output

 

Enter CSS (Cascading Style Sheets)

While HTML structures content, CSS steps in to add the stylistic flair. CSS allows developers to control the layout, color, and typography, transforming a simple HTML document into a visually appealing and user-friendly experience. Selectors, properties, and values work in tandem to define the look and feel of a webpage.

Types of CSS

1. Inline CSS: This type of CSS is applied directly within the HTML tags using the style

  Example

<html>
<body>
<h1 style=”color:red”>This is red color heading</h1>
<p style=”color:green”>This is para in green color<p>
</body>
</html>

Output                          

 

2. Internal or Embedded CSS: CSS rules are defined within the <style> tag in the HTML <head> section.

Example

<html>
<head>
<style>
body {
background-color:green;
}
h1 {
color:white;
}
p {
color:red;
}
</style>
</head>
<body>
<h1> Internal CSS Example</h1>
<p> This is the example of internal css here i am using background color green and heading color white using internal css with the help of <style></p>
</body>
</html>

Output

3. External CSS: CSS rules are stored in a separate external file and linked to the HTML document.

styles.css

body {
background-color:yellow;
}
h1 {
color:white;
}
p {
color:red;
}
h2 {
color:green;
}

File Saved With the Name “External.html”

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<h1> This is External Css File</h1>
<p> We already created the css file externally by the name “abc.css” here we link our css file</p>
<h2> In external css we are not use style tag </h2>
</body>
<html>

Output

For Live Class Subscribe Our Youtube Channel

https://www.youtube.com/@olevelguruji

Also Check The Below Links

Html Table Tag (Colspan Vs Rowspan)

HTML Formatting Tags With Examples

The post Html css and types of css with examples appeared first on .

]]> https://careersknowledge.in/html-css-and-types-of-css-with-examples/feed/ 0 Rowspan and colspan in HTML with example https://careersknowledge.in/rowspan-and-colspan-in-html-with-example/ https://careersknowledge.in/rowspan-and-colspan-in-html-with-example/#comments Thu, 26 Oct 2023 15:58:48 +0000 https://careersknowledge.in/?p=1062 Html Table Tag (Colspan Vs Rowspan) Hello Students Welcome to our new article. In this Article You will learn about Html Table Tag (Colspan Vs Rowspan). So must read the article till end. Table in HTML Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each ... Read more

The post Rowspan and colspan in HTML with example appeared first on .

]]> Html Table Tag (Colspan Vs Rowspan)

Hello Students Welcome to our new article. In this Article You will learn about Html Table Tag (Colspan Vs Rowspan). So must read the article till end.

Table in HTML

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). Td stands for “table data,” and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Example

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML Table Tags

<table> -Defines a table

<th>- Defines a table header

<tr>- Defines a table row

<td>- Defines a table cell

<caption> Defines a table caption

Example

Example
A simple HTML table:

<table>
<tr>
<th>Team</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Indian Cricket</td>
<td>Rohit</td>
<td>Ind</td>
</tr>
<tr>
<td>India Cricket</td>
<td>Virat</td>
<td>Ind</td>
</tr>
<tr>
<td>Aus Cricket</td>
<td>David Warner</td>
<td>Aus</td>
</tr>
<tr>
<td> Aus Cricket</td>
<td>Smith Warner</td>
<td>Aus</td>
</tr>
</table>

HTML Table

The HTML table tag (<table>) is used to represent data in a structured way by creating a table. For example,

<table border=”1″ >

  <tr>

    <th>Name</th>

    <th>Age</th> 

    <th>Country</th>

  </tr>

  <tr>

    <td>Harry Depp</td>

    <td>28</td>

    <td>Britain</td>

  </tr>

  <tr>

    <td>John Smith</td>

    <td>35</td>

    <td>USA</td>

  </tr>

  <tr>

    <td>Ram Krishna</td>

    <td>19</td>

    <td>Nepal</td>

  </tr>

</table>

Browser Output

In the above example, you can see we have used multiple tags to create a table in HTML.

  • <table>
  • <tr>
  • <td>
  • <th>

Table tag <table> in HTML

The <table> tag is used to define a table. For example,

<table>

  ….

<table>

Table Row <tr> in HTML

The <tr> tag is used to define a row in a table. For example,

<table>

<tr>

  …

</tr>

</table>

The table row can include either table heading, <th> or table data, <td>.

<tr>

  <th>Name</th>

  <th>Country</th>

</tr>

<tr>

  <td>Prasanna</td>

  <td>Nepal</td>

</tr>

<tr>

  <td>Simon</td>

  <td>USA</td>

</tr>

In a table, there can be any number of rows.

Table Heading, <th> in HTML

The <th> tag is used to define a table header. It is generally the top row of the table. For example,

<table>

  <tr>

    <th>Item</th>

    <th>Count</th>

  </tr>

  <tr>

    <td>Mango</td>

    <td>125</td>

  </tr>

  <tr>

    <td>Orange</td>

    <td>75</td>

  </tr>

</table>

Browser Output

In the above example, Item and Count are table headers and they are used to represent the category of data in a particular row.

Here, the styling of the table headers is bold and center-aligned. This is because the <th> tag has some default styling.

Table Cell <td> in HTML

The <td> tag is used to define table cells (data). The table cells store data to be displayed in the table. For example,

<tr>

  <td>Apple</td>

  <td>Mango</td>

  <td>Orange</td>

</tr>

In the above example, <td>Apple</td>, <td>Mango</td> and <td>Orange</td> are table cells.

Table cells are generally inside the table row or table headers.

Table Border

Remember we have used the border attribute in our first example.

<table border=”1″>

  …

</table>

In HTML, the border attribute is used to add a border to a table and all the cells.

Note: We can have borders of various styles in tables, however for more specific borders, we need to use CSS.

To prevent double borders like the one in the example above, we can set the border-collapse property of the table. For example,

<table border=”1″ style=”border-collapse: collapse;”>

  …

</table>

Table Head, Body, and Footer

The HTML table can be divided into three parts: a header, a body, and a footer.

  1. Table Header

We use the <thead> tag to add a table head. The <thead> tag must come before any other tags inside a table. For example,

<table>

  <thead>

    <tr>

        <th>Head1</th>

        <th>Head2</th>

    </tr>

  </thead>

 

  …

  …

</table>

The content of <thead> is placed on the top part of the table and we usually place the rows with table headers inside the <thead> tag.

  1. Table Body

We use the <tbody> tag to add a table body. The <tbody> tag must come after <thead> and before any other tags inside a table. For example,

<table>

  <thead>

    …

  </thead>

  <tbody>

    <tr>

      <td>Cell 1</td>

      <td>Cell 2</td>

    </tr>

  </tbody>

 

  …

  …

</table>

The content of <tbody> is placed on the center part of the table and we usually place the rows with the content we want to represent in the <tbody>.

  1. Table Footer

We use the <tfoot> tag to add a table footer. The <tfoot> tag must come after <tbody> and before any other tags inside a table. For example,

<table>

  <thead>

    …

  </thead>

  <tbody>

    ,,,,

  </tbody>

  <tfoot>

    <tr>

      <td>foot 1</td>

      <td>foot 2</td>

    </tr>

  </tfoot>

</table>

The content of <tbody> is placed on the bottom part of the table and we usually place the rows with the footer in the <tfoot>.

All these tags must be placed inside a <table> tag and must contain at least one <tr>. For example,

Example: HTML Table Head, Body, and Footer

<table>

  <thead>

    <tr>

      <th>S.N</th>

      <th>Item</th>

      <th>Quantity</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>1</td>

      <td>Apple</td>

      <td>2</td>

    </tr>

    <tr>

      <td>2</td>

      <td>Mango</td>

      <td>2</td>

    </tr>

    <tr>

      <td>3</td>

      <td>Orange</td>

      <td>1</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td></td>

      <td>Total</td>

      <td>5</td>

    </tr>

  </tfoot>

</table>

Browser Output

Colspan and Rowspan

Colspan

The colspan attribute merges cells across multiple columns. For example,

<table>

  <tr>

    <th>S.N</th>

    <th>Item</th>

    <th>Quantity</th>

  </tr>

  <tr>

    <td>1</td>

    <td>Apple</td>

    <td>2</td>

  </tr>

  <tr>

    <td>2</td>

    <td>Mango</td>

    <td>2</td>

  </tr>

  <tr>

    <td>3</td>

    <td>Orange</td>

    <td>1</td>

  </tr>

  <tr>

    <td colspan=”2″>Total</td>

    <td>5</td>

  </tr>

</table>

Browser Output

In the above example, you can see that the last row only has 2 cells with one cell occupying 2 columns.

The value of the colspan attribute determines how many columns the cell occupies.

Rowspan

The rowspan attribute merges cells across multiple rows. For example,

<table>

  <tr>

    <th>Name</th>

    <th>Subject</th>

    <th>Marks</th>

  </tr>

  <tr>

    <td rowspan=”3″>Mark Smith</td>

    <td>English</td>

    <td>67</td>

  </tr>

  <tr>

    <td>Maths</td>

    <td>82</td>

  </tr>

  <tr>

    <td>Science</td>

    <td>91</td>

  </tr>

</table>

Browser Output

Html Table Tag (Colspan Vs Rowspan)

In the above example, you can see that the first column only has 2 cells with one cell occupying 2 rows.

The value of the rowspan attribute determines how many rows the cell occupies.

For Live Class Subscribe Our Youtube Channel

https://www.youtube.com/@olevelguruji

Also Check Our Latest Upload

Html Link With Examples

 

The post Rowspan and colspan in HTML with example appeared first on .

]]> https://careersknowledge.in/rowspan-and-colspan-in-html-with-example/feed/ 2 How to create hyperlink in HTML with example https://careersknowledge.in/html-link-with-examples/ https://careersknowledge.in/html-link-with-examples/#comments Sun, 22 Oct 2023 15:46:33 +0000 https://careersknowledge.in/?p=1056 HTML Links Hello Students Welcome to our new blog in this blog you will learn about Html Link With Examples. So must check the full blog. HTML links or hyperlinks connect one resource on the web to another. The resource may be an image, a web page, a program, a video clip, an audio clip, ... Read more

The post How to create hyperlink in HTML with example appeared first on .

]]> HTML Links

Hello Students Welcome to our new blog in this blog you will learn about Html Link With Examples. So must check the full blog.

HTML links or hyperlinks connect one resource on the web to another. The resource may be an image, a web page, a program, a video clip, an audio clip, an element within a web page, etc, or anything that can be hosted on the internet.

We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is

<a href=”URL”> Text </a>

Here,

  • URL- the destination of the link
  • Text- the part that will be visible as a link

Clicking on the text will navigate you to the resource in the URL. For example,

<a href=”https://careersknowledge.in/introduction-to-html-head-body> HTML Notes </a>

Browser Output

HTML Notes

 Image Links

You can insert almost any content inside a <a> tag to make it a link. Hence, we can also use images as a link.

<a href=”https://careersknowledge.in/“>

          <img src=”logo.png” alt=”careersknowledge Logo”>

</a>

 

target Attribute

By default, any link clicked will open in the same browser window. This may lead to a bad user experience. This is where the target attribute becomes useful. For example,

<a href=”https://careersknowledge.in/ ” target=”_blank”>Programiz</a>

Here, target= “_blank” opens the link in a new browser tab.

We use the target attribute to specify where the link is opened. The target attribute has 4 values.

Target Description
_self (Default) Opens the link in the same browser tab.
_blank Opens the link in a new browser tab.
_parent Opens the link in the parent frame.
_top Opens the link in the current tab window (topmost parent).

download Attribute

When linking to a web resource, we can specify that the resource is to be downloaded by using the download attribute. For example,

<a href=”/files/logo.png” download> Download Image </a>

Browser Output

Download Image

When the link is clicked, the file from /files/logo.png will be downloaded.

We can also provide an optional value to the download attribute. This value will be set as the filename of the downloaded resource. For example,

<a href=”/files/logo.png” download=”Programiz”>Download Image</a>

Here, the link is the same as the previous example, however, when downloading, the file will have the name Programiz.png rather than the previous original name logo.png.

Linking to an HTML element

As previously mentioned, along with linking to web sources, an <a> tag can also link to a respecific element within the web page. We use that by adding # to the URL followed by the id of the specific element. For example,

Link to an element in the same webpage:

<a href=”#title”>Go to Title</a>

Here, clicking on this link will scroll the web page to the element with the id of title

Link to an element in another webpage:

 

Email and Call links

We can also use HTML links as email links and call links to help users contact us or someone else using their email client or call app.

Email links:

The email link opens the user’s default mail client to make it easier for the user to send mail to a specific address. For example,

<a href=”mailto:name@domain.com” > Send Mail </a>

Call links:

Similar to email links, we can create call links to trigger the user’s call app with a phone number. For example,

<a href=”tel:+919898989896″> Call Us </a>

Thanks For Reading the Article. I hope you will understand the topic Html Link With Examples Well.

For Live Class Subscribe Our Youtube Channel link is given below

https://www.youtube.com/@olevelguruji

Also Check out Latest Uploads

HTML Formatting Tags With Examples

Introduction To Html head body tag with attribute

 

 

The post How to create hyperlink in HTML with example appeared first on .

]]> https://careersknowledge.in/html-link-with-examples/feed/ 1 What are formatting tags in HTML https://careersknowledge.in/html-formatting-tags-with-examples/ https://careersknowledge.in/html-formatting-tags-with-examples/#respond Wed, 18 Oct 2023 14:49:52 +0000 https://careersknowledge.in/?p=1047 HTML Formatting Tags Hello Students | Welcome our new blog here you will learn about HTML Formatting Tags With Examples. So must read the full article. HTML <b> and <strong> Tags In HTML <b> tag and <strong> tag display the text in bold front. Let us understand about both in detail: HTML <b> tag The HTML <b> ... Read more

The post What are formatting tags in HTML appeared first on .

]]> HTML Formatting Tags

Hello Students | Welcome our new blog here you will learn about HTML Formatting Tags With Examples. So must read the full article.

HTML <b> and <strong> Tags

In HTML <b> tag and <strong> tag display the text in bold front. Let us understand about both in detail:

HTML <b> tag

The HTML <b> tag specifies bold text, without any logical importance. It opens with <b> and ends with </b> tag.

Syntax:

<b>Content Goes Here.</b>

<html><head>

<title>Bold Text Example</title>

</head>

<body>

<p>This is normal text.</p>

<p><b>This is bold text.</b></p>

</body>

</html

Output:

HTML Formatting - Bold Text in HTML

HTML <strong> Tag

The HTML <strong> tag is a logical tag that specifies text with importance. The content inside the <strong> element appears in the bold text but with semantic importance. It opens with <strong> and ends with </strong> tag.

Syntax:

<strong>Content Goes Here.</strong>

Example of HTML <strong> Tag:

<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><strong>This is strong text with logical importance.</strong></p>
</body>
</htm
Output:
HTML Formatting - Strong Text in HTML

HTML <i> Tag

The HTML <i> tag displays the text in italics. It begins with <i> tag and ends with </i> tag.

Syntax:

<i>Content Goes Here.</i>

Example of HTML <i> Tag:

<html>
<head>
<title>Italics Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><i>This is italics text.</i></p>
</body>
</html\
edcOutput:
HTML Formatting - Italics Text in HTML

HTML <em> Tag

The HTML <em> tag emphasizes the text with semantic importance. It begins with <em> tag and ends with </em> tag.

Syntax:

<em>Content Goes Here.</em>
Example of HTML <em> Tag:

<html>

<head>

<title>Emphasized Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><em>This is emphasized text.</em></p>
</body>
</html>
Output:
HTML Formatting - Emphasize Text in HTML

HTML <mark> Tag

The <mark> tag in HTML is used to highlight a text. It begins with a <mark> tag and a closes with a </mark> tag.

Syntax:

<mark>Content Goes Here.</mark>

Example of HTML <mark> Tag:

<html>
<head>
<title>Highlighted Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><mark>This is highlighted text.</mark></p>
</body>
</html>
Output:
HTML Formatting - Mark Text in HTML

HTML <sup> Tag

The <sup> tag helps us to superscript a text. It has an opening <sup> tag and a closing </sup> tag. Superscript text displays with a raised baseline using a smaller font.

Syntax:

<sup>Content Goes Here.</sup>

Example of HTML <sup> Tag:

<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p>This is<sup>superscript</sup>text.</p>
</body>
</html>
Output:
Superscript tag

HTML <sub> Text

The <sub> element helps us to subscript a text on a web page. It has a starting tag <sub> and a closing tag </sub>. The subscript text appears with a lowered baseline using a smaller font.

Syntax:

<sub>Content Goes Here.</sub>

Example of HTML <sub> Tag:

<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p>This is<sub> subscript</sub>text.</p>
</body>
</html>
Output:
Subscript Tag

Example of HTML <big> Tag:

<html>
<head>
<title>Big Text Example</title>
</head>
<body>
<p>Big Font:<big> This is an example to show Larger Text.</big></p>
</body>
</html>
Output:
Big Tag

HTML <small> Tag

The HTML <small> tag specifies smaller text. It is mostly used for copyright and legal text on a web page. With this tag, the size of the text will reduce one font size more than the previous font size.

Syntax:

<small>Content Goes Here.</small>

Example of HTML <small> Tag:

<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>Small Font:<small> This is an example to show Smaller Text.</small></p>
</body>
</html>
Output:
Small Tag

HTML <big> Tag

The HTML <big> tag helps us make the text’s size larger than the surrounding text. Using this tag makes the font size larger than the previous one.

Syntax:

<big>Content Goes Here.</big>

HTML <del> Tag

The HTML <del> tag specifies that text that has been deleted from a document. The <del> element starts with a <del> tag and ends with a </del> tag. The text between these tags shows as deleted text with a line striking through it.

Syntax:

<del>Content Goes Here.</del>

Example of HTML <del> tag:

<html>
<head>
<title>Delete Text Example</title>
</head>
<body>
<p>Check out this example,<del>this text will be deleted.</del></p>
</body>
</html>
Output:
Delete Tag

HTML <ins> Element

The HTML <ins> tag specifies that text has been inserted into a document. It has a starting tag <ins> tag and a closing tag </ins>. The text between these tags appears as inserted text with an underline beneath it.

Syntax:

<ins>Content Goes Here.</ins>

Example of HTML <ins> Tag:

<html>
<head>
<title>Insert Text Example</title>
</head>
<body>
<p> Check out this example,<ins> to insert a new paragraph.</ins></p>
</body>
</html
Output:
Insert Tag
Thanks For Reading the Article HTML Formatting Tags With Examples.
For Live Class of HTML Formatting Tags With Examples.Subscribe Our Youtube Channel
Also check Our Latest Uploads

The post What are formatting tags in HTML appeared first on .

]]> https://careersknowledge.in/html-formatting-tags-with-examples/feed/ 0