Sunday, April 20, 2025

CSS DIVs

In HTML and CSS, a <div> element is a container or a "division" used to group together other HTML elements and apply styles to them collectively. A <div> is a block-level element and is commonly used to structure and organize a web page layout into sections, columns, and rows.

For example, you might use a <div> to group together a navigation menu, a header image, and a main content area. You can then apply CSS styles to the <div> to control its size, position, and appearance.

Using <div> elements can make it easier to create complex web page layouts, and can also make it simpler to change the appearance of your web page later on, since you can update the styles of the <div> rather than modifying individual elements. 


<!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.</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.</p>
</div>

</body>
</html>

The HTML document contains two paragraphs of text that are wrapped in a div element with a class of "content". The CSS file is used to define styles for the elements in the HTML document, including the div element with the "content" class, and the paragraphs of text within it. 


.content {
	border-style: solid;
	border-width: 20px;
	border-color: red;
	background: yellow;
	margin: auto;
	width: 500px;
	
	padding: 5px 10px 25px 50px;	
}

This CSS code targets an element with the class name "content" and applies several styling rules to it.

The border-style, border-width, and border-color properties set the style, width, and color of a solid border around the element. The background property sets the background color of the element to yellow.

The margin property centers the element horizontally on the page by setting the left and right margins to "auto". The width property sets the width of the element to 500 pixels.

The padding property sets the amount of padding inside the element. The four values specify the amount of padding for the top, right, bottom, and left sides of the element, respectively. In this case, the top padding is 5 pixels, the right padding is 10 pixels, the bottom padding is 25 pixels, and the left padding is 50 pixels.

Just like any other HTML element, <div> elements can be targeted using CSS selectors such as classes and IDs.

For example, you can target a <div> element with a class of "my-class" like this: 

.my-class {
  /* CSS rules here */
}

Or you can target a <div> element with an ID of "my-id" like this: 

#my-id {
  /* CSS rules here */
}

Using classes and IDs allows you to apply specific CSS styles to specific <div> elements, which can help with organization and styling. 


<!DOCTYPE html>

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

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

<body>

<div id="advert">
	<h1>Advert</h1>
</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.</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.</p>
</div>

</body>
</html>

This is an HTML code for a div element with an id attribute of "advert" and a child h1 element containing the text "Advert". The id attribute is used to uniquely identify the div element, and it can be targeted in CSS using the "#" selector. 


#advert {
	border-style: solid;
	border-width: 20px;
	border-color: blue;
	background: lightblue;
	
	margin: auto;
	width: 500px;
	
	padding: 5px 10px 25px 50px; 
	margin-bottom: 5px;
}

.content {
	border-style: solid;
	border-width: 20px;
	border-color: red;
	background: yellow;
	margin: auto;
	width: 500px;
	
	padding: 5px 10px 25px 50px;	
}

In this code snippet, a CSS rule is applied to an HTML element with the ID of "advert".

The rule sets various properties for the element, including a solid blue border with a width of 20 pixels, a light blue background color, auto margins to center the element horizontally, a width of 500 pixels, and padding of 5 pixels on the top, 10 pixels on the right, 25 pixels on the bottom, and 50 pixels on the left.

Additionally, the rule sets a margin-bottom of 5 pixels, which adds a 5-pixel margin to the bottom of the element. This can be useful for creating some space between this element and other elements that come after it. 


<!DOCTYPE html>

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

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

<body>

<div class="main">

<div id="advert">
	<h1>Advert</h1>
</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.</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.</p>
</div>

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

W have here three div tags: one with a class of "main" and two nested div tags, one with an ID of "advert" and another with a class of "content".

The div with an ID of "advert" contains an h1 tag with the text "Advert". The div with a class of "content" contains two p tags with some sample text. 


.main {
	background: lightgreen;
	width: 800px;
	margin: auto;	
}

#advert {
	border-style: solid;
	border-width: 20px;
	border-color: blue;
	background: lightblue;
	
	margin: auto;
	width: 500px;
	
	padding: 5px 10px 25px 50px; 
	margin-bottom: 5px;
}

.content {
	border-style: solid;
	border-width: 20px;
	border-color: red;
	background: yellow;
	margin: auto;
	width: 500px;
	
	padding: 5px 10px 25px 50px;	
}

This CSS code applies styles to an HTML element with class "main".

  • The background color of the element will be light green.
  • The width of the element will be set to 800 pixels.
  • The element will be horizontally centered on the page using the margin property with a value of "auto".

No comments:

Post a Comment

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple  for loop that will spawn 5 instances of blank Tk window .  ...