Bhavitha Cherukuri: September 2023

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

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:

Building Static Website(part6) HTML Lists

Report Abuse