Examples of CSS Code: Understanding Inline Style, External Stylesheet, and HTML/CSS Integration

To incorporate CSS into HTML documents, there are three methods:
1. Inline: This involves using the attribute within HTML elements.
2. Internal: This method entails using a element within the section.
3. External: This approach includes using a element to link to an external CSS file.
The most popular way to add CSS is by utilizing external CSS files. However, there are drawbacks to using inline styles:
1. It makes the HTML code messy and harder to maintain, reducing its readability.
2. Inline styles cannot be reused across multiple HTML files.
3. There is a risk of overriding internal or external stylesheets.
4. The range of available styling options is limited.
Another alternative is using internal styles within HTML.


Cascading Style Sheets, commonly known as CSS.
“””.

CSS is highly efficient as it allows for the simultaneous control of layout across multiple web pages, resulting in significant time savings.


Manipulate Text
Colors,

Boxes


What is CSS?

CSS is utilized for the formatting of a webpage’s layout.
“””.

CSS provides the ability to manipulate various aspects of a webpage, including text color, font, size, spacing between elements, element positioning and layout, background images and colors, responsive design for different devices and screen sizes, and many other features.


A helpful tip is that when a style is cascading, it means that any changes made to a parent element’s style will also be applied to all of its children elements. For example, if you choose to make the body text color “blue”, all headings, paragraphs, and other text elements within the body will automatically have the same color, unless you decide to specify a different color.


Using CSS

HTML documents can have CSS added in three different ways.

  • To include inline styles in HTML elements, employ the

    style

    attribute.
  • To incorporate an element labeled

    <style>

    within the

    <head>

    section, internal methods can be employed.
  • To link to an external CSS file, you can use an element called

    <link>

    .

In order to avoid repetition, the preferred method for incorporating CSS is to store the styles in external CSS files. Nevertheless, for the purpose of this tutorial, we will utilize inline and internal styles, as they are more convenient to showcase and for you to experiment with.


Inline CSS

A single HTML element can be uniquely styled using an inline CSS.

The attribute of an HTML element,

style

, is used for an inline CSS.
“””.

The text color of the

<h1>

is set to blue, while the

<p>

is set to red.

Example

A Blue Heading

A red paragraph.

Try it Yourself »



Internal CSS

An internal CSS is employed to establish a unique style for an individual HTML page.

An internal CSS is specified within the

<head>

section of an HTML page, contained within a

<style>

element.

The provided example applies the color blue to the text of all elements with the ID ”

<h1>

” and the color red to the text of all elements with the ID ”

<p>

“. Furthermore, the page will have a background color of “powderblue”.

Example

This is a
heading

This is a paragraph.

Try it Yourself »


External CSS

A single external style sheet is employed to specify the styling for multiple HTML pages.

In order to incorporate an external style sheet, simply include a link to it within the

<head>

section of every HTML page.

Example

This is a heading

This is a paragraph.

Try it Yourself »

The external style sheet can be composed in any text editor, without including any HTML code, and it should be saved with a .css extension.

This is the appearance of the “styles.css” file.

“styles.css”:
body {

background-color: powderblue;

}

h1 {

color: blue;

}

p {

color: red;

}

By utilizing an external style sheet, it is possible to modify the appearance of an entire website by making alterations to just one file.


CSS Colors, Fonts and Sizes

In this demonstration, we will showcase a few frequently utilized CSS properties, which will be further elaborated on later.

The CSS property,

color

, is responsible for specifying the desired color of the text.

The CSS property, known as

font-family

, sets the specified font for use.

The CSS property

font-size

is responsible for specifying the desired text size.

Example

Utilize the CSS properties of color, font-family, and font-size.

This is a heading

This is a paragraph.

Try it Yourself »


CSS Border

The CSS

border

attribute specifies the creation of a border surrounding an HTML element.

An important point to note is that you have the ability to set borders for almost all HTML elements.

Example

Use of CSS border property:

p {

border: 2px
solid powderblue;

}

Try it Yourself »


CSS Padding

The CSS code

padding

specifies the padding, which is the space between the text and the border.

Example

Application of CSS border and padding attributes.

p {

border: 2px
solid powderblue;

padding: 30px;

}

Try it Yourself »


CSS Margin

The CSS property

margin

is used to specify the margin, which is the space outside the border.

Example

The CSS properties for border and margin have been employed.

p {

border: 2px
solid powderblue;

margin: 50px;

}

Try it Yourself »


Link to External CSS

External style sheets can be linked to using either a complete URL or a path that is relative to the current web page.

Example

The given illustration employs a complete URL for the purpose of linking to a style sheet.

Try it Yourself »

Example

The example provided is a hyperlink that connects to a style sheet situated in the html directory of the present website.

Try it Yourself »

Example

This illustration demonstrates the connection between the current page and a style sheet that is located in the same folder.

Try it Yourself »

More information on file paths can be found in the HTML chapter titled “File Paths”.


Chapter Summary

  • Apply the HTML attribute

    style

    to implement inline styling.
  • Define internal CSS by utilizing the HTML

    <style>

    element.
  • Implement the HTML element

    <link>

    to make a reference to a CSS file located externally.
  • Utilize the HTML element

    <head>

    to contain both

Frequently Asked Questions