Day -HTML ans CSS-CSS Tutorial-php.cn

Day -HTML ans CSS

Mary-Kate Olsen

Release： 2025-01-03 20:54:45

Original

278 people have browsed it

HTML:
HTML stand for Hyper Text Markup Language.
HTML is the standard language used to create web pages.
It defines the structure of a webpage using a system of tags or elements.

CSS:

CSS stands for Cascading Style Sheets.
It is used to style and format the layout of a webpage created with HTML.
It controls things like colors, fonts, spacing, positioning, and responsive design.
CSS allows you to separate the structure (HTML) from the design (styles), making the website easier to maintain and more flexible.

JS:
Js stands for JavaScript.
It is a programming language used to create dynamic and interactive effects within web browsers.
While HTML structures the page and CSS styles it, JavaScript enables interaction with the page and can modify the content dynamically.

HTML:
HTML is text based language that defines the structure and meaning of web content.

Day -HTML ans CSS

Stand alone tags:
In HTML, stand-alone tags refer to HTML elements that don't require a closing tag. These are also often referred to as self-closing tags or void elements.

Example:

<br>
<hr>
<input>

Copy after login

Structure tags:
Tags typically come in pairs: an opening tag and a closing tag.

Example:

<html>
<head>
<body>

Copy after login

Element:
Elements are the building blocks of a webpage and represent the various types of content and structure in the document.

Components of an HTML Element:

Opening Tag: The starting part of the element that defines the type of content that follows.
    Example:<p>, <h1>, <div>, <img>

Content: The content placed between the opening and closing tags (if applicable). This could be text, images, links, or other elements.
    Example: This is a paragraph.

Closing Tag: The closing part of the element that indicates the end of the element. It is the same as the opening tag, but with a forward slash (/) before the tag name.
   Example: </p>, </h1>, </div>

Attributes (Optional): Additional properties that provide extra information about the element. Attributes are added inside the opening tag.
    Example:>
<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><html>
<head>
    <title>ILUGC</title>
<style>
.container{
    border:1px solid;
    height:200%;
    width:85%;
    margin:auto;
}
.header h4{
    text-transform: uppercase;
    color:#e22d30;
    border-top:1px solid green;
    width: fit-content;
    padding-top:10px;
}
.header{

    margin:25px;
}
</style>
</head>
<body>
   <div>



<p><strong>Explanation of the HTML Structure:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><html>: Root element of the HTML document.
        <head>: Contains metadata for the page, including the title and styles.
        <body>:Contains the content visible on the page.

    Inside the <head>:
        The <title> tag gives the webpage its title when viewed in the browser tab.
        The <style> tag contains the internal CSS to style the page.

    Inside the <body>:

        .container:A container div with a class container that holds all the page elements.
            It's styled with a border, height, width, and centered using margin:auto.

        .header: A section that contains the main title (<h1>) and a subtitle (<h4>) about the ILUGC group.
            The h4 tag is styled with uppercase letters, a red color, a border on top, and some padding.

        navbar: This seems to be a placeholder for a navigation bar.

        layout: A section for the main content layout, with two subsections:
            mainLayout: Likely for the main content area.
            sideLayout: Likely for a sidebar or additional content.

        footer: Placeholder for the footer section.

Copy after login

div:
The element is a block-level container used to group other elements together and apply styling or layout properties to them.

Class Selector:

The class selector is used to select and style elements that have a specific class attribute. It is one of the most commonly used selectors in CSS. A class selector is defined by a dot (.) followed by the class name.

Syntax:

.classname {

}

Copy after login

Element Selector:

The element selector (also known as the type selector) is used to select and style HTML elements based on their tag name. It allows you to apply styles to all instances of a particular type of HTML element in the document.

Syntax: