Saturday, September 30, 2023

CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

A new webpage opens as shown below with the selected borders and colors:

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Example

Use of CSS border and padding properties:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

A new webpage opens as shown below with the selected padding:

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid hsl(28, 80%, 47%);
  margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

A new webpage opens as shown below with the selected margins:

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example

This example uses a full URL to link to a style sheet:

<!DOCTYPE html>
<html>
    <head>
        <title>My website</title>
        <link rel="stylesheet" href="style2bor.css">
    </head>
    <body>
        <h1>borders in css</h1>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo assumenda unde ducimus autem inventore fugit similique in eos libero sequi tempore natus dolores laborum vitae non ipsa aperiam, hic ullam.</p>

    </body>
</html>

The external link in the html is shown below:

h1{
    border-style:solid;
    border-width:3px;
    border-color:black;
    border-radius:20px;
}
p{
    border-bottom: 3px solid #ff0000;
    border-top: 3px solid hsl(120, 35%, 57%);
    border-left: 3px dotted yellow;
    border-right: 3px dotted orange;
    border-radius: 10px;
}

A new webpage opens as shown below with the selected borders:

Friday, September 29, 2023

CSS Colors, Fonts and Sizes

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

FONT-FAMILY:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>

A new webpage opens as shown below with the selected font-family

FONT-SIZE:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:500%;">This is a heading</h1>
<p style="font-size:100%;">This is a paragraph.</p>

</body>
</html>

A new webpage opens as shown below with the selected font-size

FONT-COLOR:

<!DOCTYPE html>
<head>
    <title>
        css colors
    </title>
    <body>
        <h1 style="color:hsl(60, 87%, 34%)">Hello</h1>

        <p style="color:hsl(0, 100%, 50%)">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A earum dicta sunt quos? Corporis officia ad reprehenderit veniam hic! Nisi, magni eum! Repudiandae, veritatis accusantium vel repellendus assumenda animi mollitia?</p>
    </body>
</head>

A new webpage opens as shown below with the selected font-colors

Thursday, September 28, 2023

HTML Styles — CSS

HTML Styles — CSS

Let us continue the last topic…

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:

Example

<!DOCTYPE html>
<html>
    <head>
        <title>website</title>
        <style>
            body{
                background-color:black;
            }
            h1{
                color:white;
            }
            p{
                color:white;
            }
        </style>
    </head>
    <body>
        <h1>this is my website</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id officia ipsum labore harum iusto error laborum dolor nihil delectus facilis quas, nemo magni excepturi quia voluptate veniam? Sint, culpa libero.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio reiciendis ipsum eos totam porro voluptates placeat accusamus aperiam eveniet consequatur. Pariatur ullam esse dolorum! Reprehenderit molestias distinctio ut numquam aliquid.</p>
    </body>
</html>

A newwebpage opens with the given background color and text color:

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Example

<!DOCTYPE html>
<html>
    <head>
        <title>
            my website
        </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>this my website</h1>
        <p id="p1" class="odd">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quisquam nostrum similique nam, veniam voluptas dicta tempora eum aut officiis pariatur fugiat et minus iusto omnis consequuntur rerum dolor. Placeat!</p>
        <p id="p2" class="even">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum vero a ab quis nesciunt quod est quas ipsam molestias veniam enim, commodi fugiat dolorum ea suscipit at perspiciatis nisi rerum!</p>
        <p id="p3" class="odd">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae et excepturi quibusdam nam? Eos sed ratione aut beatae asperiores est nemo optio fugiat harum, adipisci, nihil repellat dolorum, commodi reiciendis.</p>
    </body>
</html>

we need to add external style sheet in the header section so that the styles that we added will be applied to the text.

External STYLE SHEET:

body{
    background-color:hsl(120, 6%, 3%);
}
h1{
    color:white;
}
#p1{
    color:red;
}
#p2{
    color:rgb(196, 18, 173)
}
#p3{
    color:#2cf540;
}
#p4{
    color: hsl(0, 44%, 49%);
}

And this is how a new webpage opens with the applied styles

Wednesday, September 27, 2023

HTML Styles — CSS

HTML Styles — CSS

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces.

Using CSS

CSS can be added to HTML documents in 3 ways:

Inline — by using the style attribute inside HTML elements
Internal — by using a <style> element in the <head> section
External — by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Example

<!DOCTYPE html>
    <head>
        <title>This is my first webpage</title>
    </head>
    <body style="background-color:black">
        <!--inline-->

        <h1 style="color:white">This is my website</h1>

        <p style="color:white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt corporis suscipit cupiditate iusto! Accusamus facilis similique repudiandae voluptatibus maxime molestiae nam doloremque. Perspiciatis accusamus neque cum. Id quia illo natus.</p>
        <p style="color:white">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem natus magnam excepturi beatae, repellendus facilis architecto sunt laboriosam nisi a eum nostrum dolor nemo omnis dolores, nobis animi quia? Culpa?</p>
        <p style="color:white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati tempore aliquam vel magni fuga pariatur vitae iste! Fugit modi explicabo veritatis nihil laborum autem, distinctio similique sed ut laboriosam dignissimos?</p>

     </body>
</html>

A new webpage opens with the black background and with the white text.

Let us talk about the Internal and External CSS in next story…

Bhavitha Cherukuri

Saturday, September 30, 2023

HTML Styles — CSS

CSS Border

Example

CSS Padding

Example

CSS Margin

Example

Link to External CSS

Example

Friday, September 29, 2023

CSS Colors, Fonts and Sizes

Example

FONT-FAMILY:

FONT-SIZE:

FONT-COLOR:

Thursday, September 28, 2023

HTML Styles — CSS

Internal CSS

Example

External CSS

Example

External STYLE SHEET:

Wednesday, September 27, 2023

HTML Styles — CSS

What is CSS?

Using CSS

Inline CSS

Example

Building Static Website(part6) HTML Lists

Report Abuse