CSS, or cascading style sheets, is an acronym.

A lot of work is saved via CSS. It can manage the design of several web pages simultaneously.

Describe CSS.

A web page’s layout can be formatted using Cascading Style Sheets (CSS).
The color, font, size, spacing between items, positioning of elements, background images or background colors, different displays for various devices and screen sizes, and much more may all be controlled with CSS.
Cascading refers to the idea that any style applied to a parent element will also be applied to all of the child elements included within the parent. Therefore, unless you indicate otherwise, if you set the color of the body text to “blue,” all headings, paragraphs, and other text elements within the body will likewise have that color!

CSS styles for HTML


With CSS

There are three techniques to include CSS in HTML documents:
  • Utilizing the style attribute inside HTML elements, or inline
  • Internally, using the <style> element in the <head> section.
  • External by linking to an external CSS file using the <link> element.
Keeping the styles in separate CSS files is the most typical method of including CSS. However, since using inline and internal styles makes it simpler to illustrate and easier for you to try it yourself, we’ll do so in this lesson.

Inline CSS in HTML

To apply a particular style to a single HTML element, use an inline CSS.
The style attribute of an HTML element is used by inline CSS.

The example below changes the text color of the <h1> element to yellow and the <p> element to blue:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Inline CSS in HTML</title>
</head>
<body>

   <h1 style="color: yellow;">A Yellow Heading</h1>

   <p style="color: blue;">A Blue paragraph.</p>

</body>
</html>

Internal CSS in HTML


A style for a single HTML page is established using an internal CSS.
A <style> element in the <head> section of an HTML page contains the definition of an internal CSS.
The example below changes the text color of EVERY <h1> element (on that page) to Yellow and EVERY <p> element (on that page) to green. In addition, a “skyblue” backdrop color will be used to display the page:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Internal CSS in HTML</title>
<style> body {background-color: skyblue;} h1 {color: yellow;} p {color: green;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

External CSS in HTML

Many HTML pages require an external style sheet to specify their look.
For each HTML page that uses an external style sheet, include a link to it in the <head> section:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>External CSS in HTML</title>

    <link rel="stylesheet" href="styles.css">

</head>
<body>

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

</body>
</html>
Any text editor can be used to create the external style sheet. The file must be saved with a.css extension and cannot contain any HTML code.

The “styles.css” file appears as follows:

Example:

body {
    background-color: skyblue;
}
h1 {
    color: yellow;
}
p {
    color: green;
}
Tip: By modifying only one file in an external style sheet, you can alter the appearance of a complete website!

CSS Colors, Fonts and Sizes in HTML

Here, we’ll show you a few frequently used CSS properties. Later on, you will discover more about them.
The text color to be used is specified by the CSS color attribute.
The typeface to be used is specified using the CSS font-family attribute.
The text size to be utilized is specified by the CSS font-size attribute.

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

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Colors, Fonts and Sizes in HTML</title>

    <style>
        body {background-color: skyblue;}
        h1   {
            color: yellow;
            font-family: verdana;
            font-size: 300%;
        }

        p {
            color: green;
            font-family: courier;
            font-size: 160%;
        }

    </style>

</head>
<body>

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

</body>
</html>

CSS Border in HTML

An HTML element’s border can be defined using the CSS border attribute.
The borders of almost all HTML components can be set.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Border in HTML</title>

    <style>

        p {
            border: 2px solid skyblue;
        }

    </style>

</head>
<body>

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

</body>
</html>

MR STAR EDIT

BART MARK (download)                                                            
SONG LYRICS (download)          

HDR & SHAKE XML (download)                                               

Rate this post

Categorized in: