Milan Smudja: HTML

Showing posts with label HTML. Show all posts

Sunday, April 20, 2025

CSS Bootstrap 4 Introduction

Bootstrap is a popular front-end web development framework that provides pre-designed CSS styles and JavaScript plugins for building responsive and mobile-first websites. It was created by Twitter and is now maintained by a large open-source community.

For beginners in CSS, Bootstrap can be a helpful tool because it allows you to quickly create professional-looking websites without having to write custom CSS code from scratch. It provides a wide range of pre-designed components such as buttons, forms, tables, and navigation bars that can be easily added to your web pages. Additionally, Bootstrap is designed to be responsive, which means your web pages will automatically adjust to different screen sizes, making them mobile-friendly.

Using Bootstrap can save you a lot of time and effort when building websites, especially if you are new to CSS and web development. It can help you learn the basics of web development and CSS while creating professional-looking websites.


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

This code includes the Bootstrap CSS and JavaScript files.

The code includes the required meta tags for character set and responsive design, and a link to the Bootstrap CSS file hosted on a content delivery network (CDN). The title tag sets the document title to "Hello, world!".

The body section of the document includes a heading that says "Hello, world!" and three script tags that load jQuery, Popper.js, and Bootstrap JavaScript files from CDNs.

By including the Bootstrap CSS and JavaScript files, developers can easily create responsive and visually appealing web pages without writing custom CSS and JavaScript code.


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>

</nav>

This is a Bootstrap navigation bar, which includes a header with a brand name and a toggler button that displays the navigation links on smaller screens.

The navigation links are organized as a list, with each list item represented by an <li> tag, and each link represented by an <a> tag with the nav-link class.

The navigation bar has a dark background (bg-dark) and uses the navbar-expand-lg class to indicate that it should be expanded on large screens.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>

</nav>	
	
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

The navbar contains a logo (Navbar), a toggle button to collapse the menu on small screens, and four links: Home, Features, Pricing, and Disabled.

The page will also load three JavaScript files (jQuery, Popper.js, and Bootstrap) from content delivery networks (CDN) to enable dynamic behavior of the navbar. The title of the page is "Hello, world!" which will appear in the browser's title bar.

CSS Html Forms

HTML forms can be styled using CSS. You can use CSS to control the layout, fonts, colors, and other visual aspects of form elements such as input fields, checkboxes, and buttons.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div class="f">
<form>
	<label>Name: </label>
	<input type="text" id="name" name="name">
	
	<label>Last Name: </label>
	<input type="text" id="lastname" name="lastname">
	
	<input type="submit" value="Submit">	

</form>
</div>

</body>
</html>

This HTML code creates a simple form that includes two input fields for the user's name and last name, along with a submit button.

The form is contained within a div element that has a class of "f", and an external CSS file is linked to the HTML page using the link tag in the head section.


.f {
	max-width: 500px;
	border: 2px solid black;
	background: yellow;
	padding: 5px;
	margin: 5px;
}

input[type="text"] {
	width: 95%;
	padding: 5px;
	margin: 5px;
	display: block;
}

input[type="submit"] {
	padding: 5px;
	margin: 5px;
	display: block;
}

This CSS code is styling an HTML form with a class of "f" and contains two text input fields and a submit button.

The ".f" class sets a maximum width of 500px, adds a 2px solid black border, and sets a yellow background color with 5px of padding and margin.

The "input[type='text']" selector applies styles to all text input fields, setting the width to 95%, adding 5px of padding and margin, and displaying them as blocks.

The "input[type='submit']" selector applies styles to the submit button, adding 5px of padding and margin, and displaying it as a block.

CSS Vertical Menu


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">About</a></li>
</ul>

</body>
</html>

Our simple navigation.


body {
	margin: 0px;
	padding: 0px;
}

ul {
	width: 150px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	background: black;
	overflow: hidden;
}

li a {
	display: block;
	background: black;
	color:white;
	padding: 5px;
	text-decoration: none;
}

li a:hover {
	background: red;
}

This CSS code will create a vertical navigation menu.

The ul element has a width of 150px and is given a black background color with no bullet points for the list items.

The list items (li) are floated to the left so that they stack vertically, and each anchor (a) element is displayed as a block with a black background, white text, and 5px of padding. When the anchor element is hovered over, it will change its background color to red.

CSS Navigation Bar


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">About</a></li>
</ul>

</body>
</html>

This is a basic HTML document that contains an unordered list <ul> with four list items <li>. Each list item contains a hyperlink <a> element with a hashtag # as its href attribute value, indicating that it is a placeholder link that does not lead to any particular web page.

This HTML code can be further styled with CSS to apply visual styles to the list items and hyperlinks, such as changing their font size, color, background color, borders, and positioning, among other things.


body {
	margin: 0px;
	padding: 0px;
}

ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	background: black;
	overflow: hidden;
}

li {
	float: left;
}

li a {
	display: block;
	background: black;
	color:white;
	padding: 5px;
	text-decoration: none;
}

li a:hover {
	background: red;
}

This is a CSS code block that styles an HTML navigation bar with a horizontal layout. Here's what each part of the code does:

body: Sets the margin and padding of the page to 0, so there are no gaps around the edge of the page.
ul: Styles the unordered list element that contains the navigation items. Sets the list-style-type to none, so there are no bullet points next to the list items. Sets the margin and padding of the list to 0, so there are no gaps between the list and other elements. Sets the background color of the list to black. Sets the overflow to hidden, so any content that exceeds the width of the list is hidden.
li: Styles each list item element. Floats each list item to the left, so they display horizontally.
li a: Styles the anchor tag that contains each navigation link. Displays the link as a block-level element, so it fills the entire width of the list item. Sets the background color of the link to black, sets the text color to white, sets padding around the text, and removes any underlines on the link.
li a:hover: Styles the link when the user hovers over it with the mouse. Changes the background color to red.

CSS Image Opacity

Image opacity refers to the level of transparency or how much an image is see-through.

In CSS, image opacity can be controlled using the opacity property. The opacity property takes a value between 0 and 1, with 0 being completely transparent and 1 being completely opaque.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<img src="trol.jpg">

</body>
</html>

Our simple page.


img {
	opacity: 0.5;
}

By setting the opacity property to a value between 0 and 1, you can make an image partially transparent. For example, opacity: 0.5; would make the image 50% transparent, allowing the content beneath the image to show through.


img {
	opacity: 0.5;
}

img:hover {
	opacity: 0.3;
	width: 400px;
	height: 400px;
	float: right;	
}

This CSS code sets the opacity of all images on the page to 0.5, meaning they will be semi-transparent.

The second rule sets up a hover effect on the images - when the user hovers over an image with their mouse, its opacity will change to 0.3, making it even more transparent. Additionally, the image will increase in size to 400px by 400px and float to the right.

CSS Inline Block

In CSS, inline-block is a display property value that combines the characteristics of both inline and block elements. It allows an element to be displayed as an inline-level block container, which means that it will appear inline with other elements but can also have a specific width, height, padding, and margin just like a block-level element.

When an element is set to inline-block, it can contain text and other inline-level elements just like an inline element. However, it also has the ability to have dimensions and spacing properties applied to it, like a block element. This makes inline-block elements useful for creating more complex layouts where you need a mixture of both inline and block level elements.

Some common use cases for inline-block include creating inline navigation menus, creating side-by-side elements, or creating a row of elements that wrap to the next line when there isn't enough space.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
  
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

This is a basic HTML document that contains four div elements with class name content. They each contain a paragraph of text.


.content {
	display: inline-block;
	width: 200px;
	height: 200px;
	background: yellow;
	margin: 5px;
	padding: 5px;
}

This CSS code defines a class named "content". The properties for this class are:

display: inline-block; makes the element behave like an inline element, but with the ability to set a width and height.
width: 200px; sets the width of the element to 200 pixels.
height: 200px; sets the height of the element to 200 pixels.
background: yellow; sets the background color of the element to yellow.
margin: 5px; sets the margin around the element to 5 pixels.
padding: 5px; sets the padding inside the element to 5 pixels.

This code creates a block element with a fixed size of 200x200 pixels, with a yellow background and some spacing around it. The display: inline-block; property allows multiple elements with this class to be displayed side-by-side horizontally, as opposed to stacking vertically like normal block elements.

CSS Float

CSS float is a property used for positioning and aligning content within a container.

When an element is floated, it is moved to one side of its container, allowing other elements to flow around it. Float is commonly used to create layouts with multiple columns or to position images within text.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div class="content">

<img src="trol.jpg">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  
</div>
</body>
</html>

This is a basic HTML code that includes an image and two paragraphs in a div container.


img {
	float: right;
}

.content {
	width: 600px;
	border: 2px solid black;
	padding: 5px;
	margin: 5px;
}

The CSS code we provide floats the image to the right using the float property with a value of right.

This causes the image to be positioned to the right of the text content that comes before it in the HTML. The .content class is used to style the container element that holds the image and text.

It sets a width of 600px, adds a black border of 2px thickness, and sets a margin and padding of 5px. This provides some space between the content and the edges of the container element.

CSS Absolute vs Fixed

In CSS, absolute and fixed are both values for the position property, which is used to position an element on a web page.

When an element has position: absolute, it is positioned relative to its closest positioned ancestor element. If no ancestor element is positioned, then the element is positioned relative to the body element. This means that the element is removed from the normal document flow, and its position is set by the top, bottom, left, and right properties.

On the other hand, when an element has position: fixed, it is positioned relative to the viewport, which means it always stays in the same position even if the page is scrolled. This means that the element is also removed from the normal document flow, and its position is set by the top, bottom, left, and right properties.

In short, absolute positioning is relative to the nearest positioned ancestor element, while fixed positioning is relative to the viewport.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Well known experimental html code.


.first{
	width: 400px;
	border: 1px solid red;
	
	position: absolute;
	top: 0px;
	left: 0px;
}

.second {
	max-width: 400px;
	margin: auto;
	border: 1px solid red;
	background: yellow;
	
	position: fixed;
	bottom: 0px;
	left: 0px;		
}

In this CSS code, we have two div elements, .first and .second. The .first div has a width of 400 pixels and a red border. It is positioned absolutely with the top and left properties set to 0 pixels, which means it will be positioned relative to its nearest positioned ancestor element or the initial containing block if there is no positioned ancestor.

The .second div has a max-width of 400 pixels, a red border, and a yellow background color. It is positioned fixed with the bottom and left properties set to 0 pixels, which means it will be positioned relative to the browser viewport and will stay in the same position even if the page is scrolled.

Here's an example HTML code with internal CSS that demonstrates the difference between position: absolute and position: fixed:

<!DOCTYPE html>
<html>
<head>
	<title>Absolute vs Fixed Positioning</title>
	<style>
		.first {
			width: 400px;
			border: 1px solid red;
			position: absolute;
			top: 0px;
			left: 0px;
		}

		.second {
			max-width: 400px;
			margin: auto;
			border: 1px solid red;
			background: yellow;
			position: fixed;
			bottom: 0px;
			left: 0px;		
		}
	</style>
</head>
<body>
	<div class="first">
		<h2>This is a div with absolute positioning.</h2>
		<p>This div is positioned absolutely at the top-left corner of the page, because it has a position property of "absolute" and top and left values of 0.</p>
	</div>

	<div class="second">
		<h2>This is a div with fixed positioning.</h2>
		<p>This div is positioned fixed at the bottom-left corner of the page, because it has a position property of "fixed" and bottom and left values of 0.</p>
	</div>
</body>
</html>

In this example, the first div is positioned absolutely at the top-left corner of the page, while the second div is positioned fixed at the bottom-left corner of the page. You can see the difference in their behavior by scrolling the page and observing how the second div remains fixed in place, while the first div moves along with the page.

CSS Static vs Fixed

Static position is the default position for any element on a webpage. When an element is positioned as static, it is placed according to the normal flow of the page, and it cannot be moved from that position even if the page is scrolled.

Fixed position, on the other hand, is used to position elements that should stay in a fixed location on the screen, regardless of scrolling. Elements with fixed position are positioned relative to the browser window, rather than the normal flow of the page. This means that they will stay in the same location even if the page is scrolled.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Our experimental simple html page.


.first{
	width: 400px;
	border: 1px solid red;
	
	position: static;
}

.second {
	max-width: 400px;
	margin: auto;
	border: 1px solid red;
	background: yellow;
	
	position: fixed;
	bottom: 0px;
	left: 0px;		
}

In this CSS code, there are two div elements with the classes "first" and "second".

The first div has a width of 400 pixels and a red border. Its position property is set to static, which is the default value and means that the element will be positioned according to the normal flow of the page.

The second div has a maximum width of 400 pixels and a red border. It has a yellow background color and its position property is set to fixed. This means that the element will be positioned relative to the browser window and will not move when the page is scrolled. The bottom and left properties are also set to 0 pixels, which means the element will be fixed to the bottom left corner of the window.

Here's an example that demonstrates the differences between static and fixed positioning using internal CSS:

<!DOCTYPE html>
<html>
<head>
	<title>Static vs Fixed</title>
	<style>
		.container {
			width: 800px;
			margin: 0 auto;
			background-color: #f2f2f2;
			padding: 20px;
			border: 1px solid #ccc;
		}

		.static {
			position: static;
			width: 300px;
			height: 150px;
			background-color: #a9a9a9;
			margin: 20px;
			padding: 20px;
			border: 1px solid #333;
		}

		.fixed {
			position: fixed;
			width: 300px;
			height: 150px;
			background-color: #ffa500;
			margin: 20px;
			padding: 20px;
			border: 1px solid #333;
			bottom: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Static vs Fixed</h1>
		<div class="static">
			<h2>Static</h2>
			<p>This box is positioned statically, which means it follows the normal flow of the document. If you scroll the page, the box will scroll along with the content.</p>
		</div>
		<div class="fixed">
			<h2>Fixed</h2>
			<p>This box is positioned fixed, which means it stays in the same position relative to the viewport. If you scroll the page, the box will remain in the same place on the screen.</p>
		</div>
	</div>
</body>
</html>

In this example, we have a container div that has a width of 800px and is centered on the page. Inside the container, we have two divs, one with the class "static" and one with the class "fixed".

The "static" div has a position of static, which is the default positioning value, and a width of 300px. It has a gray background color and a border, and it's positioned 20px away from the edges of the container.

The "fixed" div has a position of fixed and is positioned 20px away from the bottom and right edges of the viewport. It has an orange background color and a border, and it's also 300px wide.

When you view this HTML file in a browser, you should see the two boxes side by side inside the container. If you scroll the page, you'll notice that the "static" box scrolls along with the content, while the "fixed" box stays in the same position on the screen.

CSS Max Width

CSS max-width is a property that sets the maximum width a specific element can have.

If the content inside an element exceeds the set max-width, it will overflow and create horizontal scrollbars. max-width is often used with responsive design to ensure that an element does not become too wide on larger screens, making the content difficult to read or causing other layout issues.

When used in conjunction with width, max-width specifies the maximum width of an element, and width specifies the minimum width.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

This HTML code creates two div elements with the classes "first" and "second" inside the body element. Each div element contains a paragraph element with some Lorem Ipsum text inside.


.first{
	width: 800px;
	margin: auto;
	border: 1px solid red;
}

.second {
	max-width: 800px;
	margin: auto;
	border: 1px solid red;
}

In this CSS code, we have two classes: .first and .second.

The .first class has a fixed width of 800px, a margin set to "auto" (which centers the element horizontally), and a border of 1px solid red.

The .second class has a maximum width of 800px, a margin set to "auto" (which centers the element horizontally), and a border of 1px solid red.

The difference between these two classes is that the .first class has a fixed width, while the .second class has a maximum width. This means that the .second class will resize itself to fit the available width, but will not exceed a width of 800px.

CSS Table Rows

We can style HTML table rows using CSS. We can use the tr selector to target table rows and apply CSS properties to them.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<table>
	<tr>
		<th>Name</th>
		<th>Last Name</th>
	</tr>
	
	<tr>
		<td>Slavoj</td>
		<td>Zizek</td>
	</tr>
	
	<tr>
		<td>Jordan</td>
		<td>Peterson</td>
	</tr>		
</table>

</body>
</html>

This is an HTML table with three rows and two columns.

The first row contains two table headers (th) with the labels "Name" and "Last Name".

The other two rows contain data cells (td) with the names "Slavoj" and "Zizek" in the first row, and "Jordan" and "Peterson" in the second row.

The first row with the headers is used to describe the content of the following rows, which represent the actual data.


table, th, td {
	width: 500px;
	border: 2px blue solid;
	border-collapse: collapse;
	margin: auto;
}

th {
	background: lightblue;
	color: black;
	height: 40px;
	text-align: left;
	padding-left: 5px; 
}

tr:hover {
	background: yellow;	
}

td {
	padding: 25px;	
}

This CSS code targets the table rows and table data cells of an HTML table.

tr:hover selector applies the styles to the table row when the user hovers over it with their mouse, changing the background color of the row to yellow.

The td selector applies padding to all table data cells within the table, making the content inside each cell have a distance of 25 pixels from the border of the cell.


table, th, td {
	width: 500px;
	border: 2px blue solid;
	border-collapse: collapse;
	margin: auto;
}

th {
	background: lightblue;
	color: black;
	height: 40px;
	text-align: left;
	padding-left: 5px; 
}

tr:nth-child(even) {
	background: yellow;	
}

tr:nth-child(odd) {
	background: lightblue;	
}

tr:hover {
	background: white;
	border: 10px red solid;	
}

td {
	padding: 25px;	
}

This CSS code styles HTML table rows with alternating colors and a different color on hover:

tr:nth-child(even) selects all even rows (2nd, 4th, 6th, etc.) and sets their background color to yellow.
tr:nth-child(odd) selects all odd rows (1st, 3rd, 5th, etc.) and sets their background color to lightblue.
tr:hover selects the row that the mouse is hovering over and sets its background color to white. Additionally, it adds a red solid border with a width of 10 pixels to the hovered row.

The td selector sets a padding of 25 pixels to all table cells.

CSS Table Columns

Experiments with table columns:


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<table>
	<tr>
		<th>Name</th>
		<th>Last Name</th>
	</tr>
	
	<tr>
		<td>Slavoj</td>
		<td>Zizek</td>
	</tr>
	
	<tr>
		<td>Jordan</td>
		<td>Peterson</td>
	</tr>		
</table>

</body>
</html>


table, th, td {
	width: 500px;
	border: 2px blue solid;
	border-collapse: collapse;
}

th {
	background: lightblue;
	color: black;
	height: 40px;
	text-align: left;	
}

td {
	background: lightyellow;
	height: 40px;
	vertical-align: center;
	text-align: center;	
}

This CSS code sets the style of an HTML table and its elements.

The table element and its th and td child elements are all set to have a width of 500 pixels, a blue border with a width of 2 pixels, and collapsed borders.

The th elements have a light blue background color, black text color, a height of 40 pixels, and left-aligned text.

The td elements have a light yellow background color, a height of 40 pixels, centered vertical alignment, and centered text alignment.


table, th, td {
	width: 500px;
	border: 2px blue solid;
	border-collapse: collapse;
	
	margin: auto;
}

th {
	background: lightblue;
	color: black;
	height: 40px;
	text-align: left;
	
	padding-left: 5px; 
}

td {
	background: lightyellow;
	padding: 25px;	
}

This CSS code styles an HTML table by setting a blue solid border of 2px width, collapsing table borders, and centering it horizontally using margin: auto.

The table headers (<th>) have a light blue background, black text color, and a height of 40px. The text is aligned to the left using text-align: left and a padding of 5px is added on the left side of the content using padding-left: 5px.

The table data cells (<td>) have a light yellow background and a padding of 25px on all sides. The content is aligned vertically to the center of the cell using vertical-align: center and text is aligned to the center using text-align: center.

CSS Tables

We can style HTML tables in CSS by targeting the table, tr, td, and th elements using CSS selectors and applying various CSS properties to them.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<table>
	<tr>
		<th>Name</th>
		<th>Last Name</th>
	</tr>
	
	<tr>
		<td>Slavoj</td>
		<td>Zizek</td>
	</tr>
	
	<tr>
		<td>Jordan</td>
		<td>Peterson</td>
	</tr>		
</table>

</body>
</html>

The HTML code above creates a simple table with two columns and three rows. The table consists of three main elements: <table>, <tr>, and <td>.

The <table> element defines the table and contains all the other elements that make up the table. Inside the <table> element, there are two rows defined by the <tr> element. The first row contains two header cells, defined by the <th> element, with the titles "Name" and "Last Name". The second and third rows contain two data cells each, defined by the <td> element, with the names "Slavoj" and "Zizek" in the second row, and "Jordan" and "Peterson" in the third row.

The <th> element is used to define header cells in a table, which are typically used to provide a title for a column. The <td> element, on the other hand, is used to define data cells in a table, which contain the actual data for each row and column.

By default, the table has no styling, but it can be styled using CSS to change its appearance, such as setting the border, background color, font size, and so on.


table {
	width: 500px;
	border: 2px blue solid;
}

This CSS code sets the width of the table to 500 pixels and applies a blue solid border with a thickness of 2 pixels to the table.

By default, tables in HTML do not have borders, so this CSS code adds a visible border to the table to separate it visually from other elements on the page. The border style is set to "solid", which means the border is a continuous line, and the color is blue.

The width of the table is set to 500 pixels, which means that the table will take up 500 pixels of horizontal space on the page. This can be useful to ensure that the table fits within a certain area on the page and to give it a consistent size across different devices and screen sizes.


table {
	width: 500px;
	border: 2px blue solid;
}

th, td {
	width: 500px;
	border: 2px blue solid;
}

The th, td selector targets both the table header cells (th) and regular table cells (td) in an HTML table, and sets their width to 500 pixels and adds a blue 2-pixel wide solid border around them.

Combination


table, th, td {
	width: 500px;
	border: 2px blue solid;
}

This CSS code will apply a 2px wide blue solid border to all table elements including the table itself, table headers (th), and table data cells (td). It will also set the width of all these elements to 500px.


table, th, td {
	width: 500px;
	border: 2px blue solid;
	border-collapse: collapse;
}

This CSS code is styling the table, table headers (th), and table cells (td) by setting the width of each element to 500px, and setting a 2px blue solid border for each element. The border-collapse: collapse property is also added, which merges the borders between adjacent cells to make the table look like a single border.

Overall, this CSS code will give a consistent width and border styling to the table, headers, and cells, making the table look more organized and visually appealing. The border-collapse: collapse property will also ensure that the table cells are tightly spaced and the borders are not unnecessarily repeated.


table, th, td {
	width: 500px;
	border: 2px blue solid;
	border-collapse: collapse;
}

th {
	background: lightblue;
	color: black;
	height: 40px;
}

This CSS code sets the following styles for the HTML table and its elements:

The width of the table, table headers (th), and table data (td) is set to 500px.
The border of the table, table headers, and table data is set to a 2px blue solid line.
The border-collapse property is set to collapse, which means that the table borders will merge into a single border where they meet.
The background color of table headers is set to light blue.
The text color of table headers is set to black.
The height of table headers is set to 40px.

Overall, this code will create a table with a blue border, a fixed width of 500px, and collapsed borders. The table headers will have a light blue background, black text, and a height of 40px. The table data will have the same width and border style as the headers.

CSS Lists

We can style lists in CSS using various properties. Here are some common CSS properties used to style lists:

list-style-type - sets the type of bullet point or numbering for list items.
list-style-position - sets the position of the bullet points or numbering relative to the list item text.
list-style-image - specifies an image to be used as the bullet point or numbering.
padding - sets the space between the list item text and the bullet point or numbering.
margin - sets the space between the list and surrounding elements.

We can also apply general styling to the list itself, such as changing the font or color of the text.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<ul id="u_list">
	<li>First Element</li>
	<li>Second Element</li>
	<li>Third Element</li>
</ul>

</body>
</html>

Simple list in html.


ul#u_list {
	background: yellow;
	color: black;
}

This CSS code styles an unordered list with an ID of "u_list". It sets the background color of the list to yellow and the text color to black.

This means that any unordered list element with an ID of "u_list" will have a yellow background color and black text color. The "#" symbol is used to target the element by its ID, and "ul" specifies that it is an unordered list.


ul#u_list {
	background: yellow;
	color: black;
	
	list-style-type: circle;
}

Additionally, we set the list-style-type to "circle", which means that each list item will be preceded by a filled circle.

So any unordered list element with an ID of "u_list" will have a yellow background color and black text color, and each list item will have a filled circle as a bullet point.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<ol id="o_list">
	<li>First Element</li>
	<li>Second Element</li>
	<li>Third Element</li>
</ol>

</body>
</html>

The ordered list is given the id "o_list", which can be used to style the list using CSS. The list items are labeled as "First Element", "Second Element", and "Third Element".


ol#o_list {
	background: yellow;
	color: black;
	
	list-style-type: decimal;
}

The CSS code ol#o_list targets an ordered list with the id attribute of o_list and sets the following properties:

background: yellow: sets the background color of the list to yellow.
color: black: sets the text color of the list items to black.
list-style-type: decimal: sets the list item marker to decimal numbers.

So, in the HTML code, the ordered list with id attribute of o_list will have a yellow background, black text color for the list items, and each item will have a decimal number as the marker.


	list-style-type: decimal-leading-zero;
	list-style-type: lower-alpha;
	list-style-type: upper-alpha;
	list-style-type: upper-roman;
	list-style-type: lower-roman;

list-style-type is a CSS property used to specify the type of marker for a list item. The following are the different values for list-style-type:

decimal-leading-zero: This displays a numeric value with a leading zero for values less than 10. For example, "01.", "02.", "03.", and so on.
lower-alpha: This displays lowercased alphabetical letters as markers. For example, "a.", "b.", "c.", and so on.
upper-alpha: This displays uppercase alphabetical letters as markers. For example, "A.", "B.", "C.", and so on.
lower-roman: This displays lowercase Roman numerals as markers. For example, "i.", "ii.", "iii.", and so on.
upper-roman: This displays uppercase Roman numerals as markers. For example, "I.", "II.", "III.", and so on.

CSS Link Decoration

Links can be decorated using CSS. You can style the different states of a link using the following pseudo-classes:

:link - selects unvisited links
:visited - selects visited links
:hover - selects links when the mouse cursor is over them
:active - selects links when they are clicked or tapped

The default colors for links in CSS depend on the user agent (web browser) and operating system being used. However, as a general guide, the default colors for links in CSS per pseudo-class are:

:link - blue
:visited - purple
:hover - blue
:active - red

It's important to note that these defaults can be overridden using CSS, and it's good practice to style links to ensure they are easily distinguishable from other text and elements on the page.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<a href="http://google.com">Google</a>

</body>
</html>

Our page with one link to Google.


a:link {
	color: orange;
}

a:visited {
	color: red;
}

a:hover {
	background: red;
	color: white;
}

This code styles links in three different states using CSS pseudo-classes. Here's what each declaration does:

a:link - Sets the color of unvisited links to orange.
a:visited - Sets the color of visited links to red.
a:hover - Sets the background color of links when the mouse cursor is over them to red, and sets the color of the link text to white.

So when a user visits the page, all links will appear as orange until they are clicked. Once clicked, the link will appear as red. When the user hovers their mouse over any link, the background of the link will turn red and the text color will change to white. This helps to give the user visual feedback and make the links more interactive.


a:link {
	color: orange;
}

a:active {
	color: yellow;
	background: black;
}

a:visited {
	color: red;
}

a:hover {
	background: red;
	color: white;
}

This code styles links in four different states using CSS pseudo-classes. Here's what each declaration does:

a:link - Sets the color of unvisited links to orange.
a:active - Sets the color of links when they are clicked to yellow and sets the background color of the link to black.
a:visited - Sets the color of visited links to red.
a:hover - Sets the background color of links when the mouse cursor is over them to red, and sets the color of the link text to white.

So when a user visits the page, all links will appear as orange until they are clicked. Once clicked, the link will appear as yellow with a black background. When the user hovers their mouse over any link, the background of the link will turn red and the text color will change to white. Visited links will appear as red.

This code uses different colors and backgrounds for each of the link states, which can help users navigate the website more easily and provide visual feedback when interacting with links.

CSS Font Sizes

In CSS, font sizes can be specified using different units of measurement, including pixels (px), percentages (%), and rems (root ems).

Pixels (px): This is an absolute unit of measurement that defines the size of the font in pixels. Pixels are fixed units, meaning that they will always be the same size on any device, regardless of the screen size or resolution. For example, font-size: 16px; sets the font size to 16 pixels.
Percentages (%): This unit of measurement is relative to the font size of the parent element. For example, font-size: 120%; sets the font size to 120% of the font size of the parent element.
Rems (root ems): This is a relative unit of measurement that is based on the font size of the root element (usually the <html> element). For example, font-size: 1rem; sets the font size to the same size as the font size of the root element, which is often set to 16 pixels by default. Using rems is recommended because it makes it easier to create scalable and responsive designs.

Percentages and rems are relative units of measurement in CSS, meaning they are based on the size of other elements or the root element, respectively.

Percentages are based on the font size of the parent element, while rems are based on the font size of the root element, which is usually set to a default value of 16 pixels.

Using relative units like percentages and rems can be beneficial because they allow for more flexible and responsive designs that can adapt to different screen sizes and resolutions.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam.</p>

</div>

</div>
</body>
</html>

Our well known simple html example.


p {
	width: 400px;
	font-family: Arial;
	
	font-size: 22px;
}

This CSS code sets the font family of all <p> elements to "Arial", the font size to 22 pixels, and the width to 400 pixels.

The font-family property sets the font family of the text, in this case to "Arial". The font-size property sets the size of the font to 22 pixels. The width property sets the width of the element to 400 pixels.

Together, these properties define the style of the text within the <p> element, specifying its font family, size, and width.


p {
	width: 400px;
	font-family: Arial;
	
	font-size: 22px;
	font-variant: small-caps;	
}

This CSS code sets the font size of the text to 22 pixels and applies the small-caps font variant.

The font-size property sets the size of the font to 22 pixels. The font-variant property applies the small-caps font variant to the text, which causes all lowercase letters to be rendered as small capitals.

Together, these properties define the style of the text, specifying its size and font variant.

There are several possible font variants that can be applied to text using CSS:

normal: The default value that specifies a normal font face.
small-caps: This variant causes all lowercase letters to be rendered as small capitals.
all-small-caps: This variant causes all letters to be rendered as small capitals.
petite-caps: This variant causes all lowercase letters to be rendered as smaller capital letters.
all-petite-caps: This variant causes all letters to be rendered as smaller capital letters.
unicase: This variant is a mix of uppercase and lowercase letters in a single set of characters.
titling-caps: This variant is designed for use in titles and causes all letters to be rendered as capital letters, with some letters being enlarged for emphasis.

These font variants can be applied using the font-variant property in CSS.

CSS Font Types, Families

CSS provides a wide range of properties to control the characteristics of fonts used on web pages. Here are some of the font characteristics that can be controlled using CSS:

Font family: The specific typeface used for the text.
Font size: The size of the font in pixels, ems, or other units of measurement.
Font style: Whether the font is normal, italic, or oblique.
Font weight: The thickness of the font, ranging from 100 (thin) to 900 (bold).

There are several font families that are commonly used on the web, as they are widely available and provide good readability on a variety of devices and screen sizes. Some of the most commonly used font families include:

Arial, sans-serif: A sans-serif font that is commonly used for its clean, modern look and excellent readability.
Times New Roman, serif: A serif font that is commonly used for its traditional look and readability, particularly in printed materials.
Verdana, sans-serif: A sans-serif font that is specifically designed for use on the web, with a high level of clarity and legibility even at small sizes.

These are just a few examples of commonly used font families, but there are many other options available depending on the design goals and requirements of a particular project.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam.</p>

</div>

</div>
</body>
</html>

Our simple html code.


p {
	width: 400px;
	font-family: Arial;
}

This CSS code sets the width of all <p> elements to 400 pixels and specifies the font family as Arial. The width property sets the width of the content area of an element, while the font-family property sets the font family used for the text within an element.

In this case, all paragraphs will have a fixed width of 400 pixels, and the text within each paragraph will be displayed in the Arial font. This can be useful for ensuring consistent typography across a website or application, and for specifying a preferred font family that is appropriate for the content being displayed.


p {
	width: 400px;
	font-family: "Times New Roman", Arial, Verdana;
}

In this case, the browser will first try to use the Times New Roman font for the text within each paragraph. If Times New Roman is not available, the browser will try to use the Arial font. If Arial is also not available, the browser will try to use the Verdana font. This is useful because it allows for a fallback font in case the preferred font is not available on a particular user's device.

It's worth noting that font family names with multiple words or spaces, such as "Times New Roman", need to be wrapped in quotation marks in CSS to ensure that the browser interprets them correctly.

CSS Text Spacing, Indentation

Text spacing and indentation can be controlled using the following properties:

letter-spacing: This property controls the amount of space between each letter in the text. A positive value will increase the space between letters, while a negative value will decrease it. For example:

h1 {
  letter-spacing: 2px;
}

In this example, the space between each letter in all <h1> elements will be increased by 2 pixels.

word-spacing: This property controls the amount of space between each word in the text. A positive value will increase the space between words, while a negative value will decrease it. For example:

p {
  word-spacing: -1px;
}

In this example, the space between each word in all <p> elements will be decreased by 1 pixel.

text-indent: This property controls the indentation of the first line of text in a block-level element. A positive value will indent the text, while a negative value will "outdent" it (move it to the left of the left margin). For example:

blockquote {
  text-indent: 1em;
}

In this example, the first line of all <blockquote> elements will be indented by 1em (where 1em is equal to the font size of the element).

These CSS properties can be used to adjust the spacing and indentation of text to achieve the desired visual effect.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam.</p>

</div>

</div>
</body>
</html>

Our usual html code.


p {
	width: 400px;
	background: yellow;
	
	text-indent: 20px;
	letter-spacing: 5px;
	word-spacing: 5px;
}

This CSS code applies styles to all <p> elements on the page. Here is an explanation of each property and its effect on the element:

width: 400px;: Sets the width of the paragraph to 400 pixels.
background: yellow;: Sets the background color of the paragraph to yellow.
text-indent: 20px;: Indents the first line of text in the paragraph by 20 pixels.
letter-spacing: 5px;: Adds 5 pixels of space between each letter in the text.
word-spacing: 5px;: Adds 5 pixels of space between each word in the text.

So this code will create a paragraph with a width of 400 pixels and a yellow background color. The text inside the paragraph will have the first line indented by 20 pixels, with 5 pixels of space between each letter and each word in the text.


p {
	width: 400px;
	background: yellow;
	
	text-indent: 20px;
	letter-spacing: 5px;
	word-spacing: 5px;
	
	text-align: center;
	text-decoration: underline;
	text-transform: uppercase;
}

This code will create a paragraph with a width of 400 pixels and a yellow background color.

The text inside the paragraph will have the first line indented by 20 pixels, with 5 pixels of space between each letter and each word in the text.

The text will be centered horizontally within the paragraph, underlined, and in all uppercase letters.

CSS Text Decoration

In CSS, text decoration is a property that is used to modify the appearance of text. It allows you to add a line, underline, overline, or strike-through to the text.

The text-decoration property is used to set the decoration on text. The following values can be used with this property:

none: The default value. No decoration is applied.
underline: Adds a line underneath the text.
overline: Adds a line above the text.
line-through: Adds a line through the text.
blink: Adds a blinking line to the text.


<!DOCTYPE html>

<html>
<head><title>Title</title></head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam.</p>

</div>

</div>
</body>
</html>

Our simple html code.


p {
	width: 400px;
	background: yellow;
	
	text-align: left;
	text-decoration: overline;
}

This CSS code applies styles to all <p> elements on the page. Here's an explanation of each property and its effect on the element:

width: 400px;: Sets the width of the paragraph to 400 pixels.
background: yellow;: Sets the background color of the paragraph to yellow.
text-align: left;: Aligns the text inside the paragraph to the left.
text-decoration: overline;: Adds a line over the text in the paragraph.

So this code will create a paragraph with a width of 400 pixels and a yellow background color. The text inside the paragraph will be left-aligned, and an overline will be added above the text.

Text transformations refer to changing the appearance of the text by transforming the case of the letters. There are four text transformation properties available in CSS:

text-transform: capitalize;: Capitalizes the first letter of each word in the text.
text-transform: uppercase;: Transforms all the letters in the text to uppercase.
text-transform: lowercase;: Transforms all the letters in the text to lowercase.
text-transform: none;: The default value, which specifies that no transformation should be applied to the text.


p {
	width: 400px;
	background: yellow;
	
	text-align: left;
	text-decoration: none;
	text-transform: uppercase; 
}

This CSS code applies styles to all <p> elements on the page. Here is an explanation of each property and its effect on the element:

width: 400px;: Sets the width of the paragraph to 400 pixels.
background: yellow;: Sets the background color of the paragraph to yellow.
text-align: left;: Aligns the text inside the paragraph to the left.
text-decoration: none;: Removes any text decoration from the paragraph.
text-transform: uppercase;: Transforms the text inside the paragraph to all uppercase letters.

So this code will create a paragraph with a width of 400 pixels and a yellow background color. The text inside the paragraph will be left-aligned, without any text decoration, and transformed to all uppercase letters.

Milan Smudja

Thursday, May 1, 2025

HTML Tutorial

Sunday, April 20, 2025

CSS Bootstrap 4 Introduction

CSS Html Forms

CSS Vertical Menu

CSS Navigation Bar

CSS Image Opacity

CSS Inline Block

CSS Float

CSS Absolute vs Fixed

CSS Static vs Fixed

CSS Max Width

CSS Table Rows

CSS Table Columns

CSS Tables

Combination

CSS Lists

CSS Link Decoration

CSS Font Sizes

CSS Font Types, Families

CSS Text Spacing, Indentation

CSS Text Decoration

Tkinter Introduction - Top Widget, Method, Button