Home >> html >> HTML Styles - CSS

HTML Styles - CSS

Cascading Style Sheets (CSS) is an acronym for Cascading Style Sheets. CSS helps you save time and effort. It has the ability to control the layout of numerous web pages at the same time.

What exactly is CSS?

The layout of a webpage is created using Cascading Style Sheets (CSS).

Color, font, text size, spacing between components, how elements are positioned and laid out, what background pictures or background colours are to be used, different representations for different devices and screen sizes, and often more can all be controlled with CSS.

Tip: Cascading refers to the fact that a style given to a parent element will be applied to all children elements within the parent. So, if the body text is set to "blue," all headings, paragraphs, and other text elements within the body will be the same colour (until you specify otherwise)!

Using of CSS

Inline - when the style attribute is used within HTML elements.
Internal - a <style> element in the <head> section is used.
External - by linking to an external CSS file with the <link> element.

Inline CSS

Inline CSS is a style that is applied to a single HTML element.

The style attribute of an HTML element is used in an inline CSS.

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

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>
</body>
</html>

Try with example

Output:

External CSS

For many HTML pages, an external style sheet is required to specify the style. Add a link to an external style sheet in the section of each HTML page:

Consider the following scenario:

Any text editor can be used to create the external style sheet. The file must be saved with a .css extension and must not contain any HTML code.

Example :

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

“styles.css”
body {
 background-color: powderblue;
}
h1 {
 color: blue;
}
p {
 color: red;
}

Tip: Editing the look of a complete website using an external style sheet is as simple as changing one file!

CSS Colors, Fonts and Sizes

We'll show you how to use some of the most common CSS properties here. Later on, you'll discover more about them.

Color: The text color is determined by the CSS color attribute.

Fonts: The font-family CSS attribute specifies the typeface that will be used.

Sizes: The font-size attribute in CSS determines the text size that will be employed.

Example:

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

<!DOCTYPE html>
<html>
  <head>
    <style>
  h1 {
 color: blue;
 font-family: verdana;
 font-size: 300%;
}
p {
 color: red;
 font-family: courier;
 font-size: 160%;
}
    </style>
  </head>
<body>

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

</body>
</html>

Try with example

Output :

CSS Border

A border around an HTML element is defined using the CSS border attribute.

Tip: Nearly all HTML components can have a border defined.

Example :

Use of CSS border property:

p {
 border: 2px solid powderblue;
}

Try with example

Output :

CSS Padding

The padding (space) between the text and the border is defined by the CSS padding property.

Example :

Use of CSS border and padding properties:

p {
 border: 2px solid powderblue;
 padding: 30px;
}

Try with example

CSS Margin

The margin (space) outside the border is defined by the CSS margin attribute.

Example:

Use of CSS border and margin properties:

p {
 border: 2px solid powderblue;
 margin: 50px;
}

Try with example

External style sheets can be referred to using either a full URL or a relative path to the current web page.

-Advertisement-