Print bookPrint book

Submodule 3.2: Inserting CSS

Site: ΕΛ/ΛΑΚ Moodle
Course: Web Design and Digital Content Production
Book: Submodule 3.2: Inserting CSS
Printed by: Guest user
Date: Thursday, 28 November 2024, 7:29 AM

Description

How to Insert CSS:

  • Inline style
  • Internal Style Sheet
  • External style sheet

Style rules Priorities

Table of contents

How to Insert CSS

CSS can be applied using three different ways:

  • Inline style, style attribute in element
  • Internal style sheet, <style> element in HTML head
  • External style sheet through the <link> element in HTML head

Inline style

Inline styles are defined within the HTML body. In this case, we place the style and our rules inside the element to which we want to apply the style.

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
  </head>
  <body>
    <h2>Inline style</h2>
    <p>This is the default text</p>
    <p style= "color:red;"> This text would appear read! </p>
    <p style= "background-color: teal;"> This text has background color! </p>
    <p style= "text-transform: capitalize;"> This first letter of each word is capitalized! </p>
    <p style= "text-indent: 50px;"> This text has indent of 50px! </p>
    <p style= "letter-spacing: 3px;"> This text has letter spacing of 50px! </p>
  </body>
</html>


will create a page displayed as:

Inline style

Inline style is used when we want to apply a unique style to a specific element of our html. 

Styling text

The commonly used style properties for text are:

  • color for text color
  • background for background color
  • font‐family for text fonts
  • font‐size for text sizes
  • text‐align for text alignment

For more information about styling text: https://www.w3schools.com/css/css_text.asp

Internal Style Sheet

Internal styles are defined in the <head> area of the HTML document inside the <style> tag.

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
    <style>
      h2 {
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
      }
      h4 {
        font-family: "Verdana", Sans-serif;
        font-variant: small-caps;
      }
      p {
        font-family: "Lucida", Monospace;
        font-size: 1.1em;
      }
    </style>
  </head>
  <body>
    <h2>This is a Heading 2</h2>
    <h4>This is a Heading 4</h4>
    <p>This is lorem ipsum paragraph: <br>
      Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
      Ne omnesque detraxit eam, cu qui movet affert volutpat. <br>
      Qui amet option eu. Utamur euismod hendrerit vel no, ius natum salutatus forensibus in. <br>
      Sea diceret vivendo constituam at, duo an adhuc viderer evertitur.
    </p>
  </body>
</html>

will create a page displayed as:

Internal stylesheet

Internal style sheet can be used when we have only one HTML page or when we have multiple HTML pages but we want special rules for the specific HTML page.

 For more information about styling fonts: https://www.w3schools.com/css/css_font.asp

External style sheet

An external style sheet is a separate file which is saved with the .css extension. It can be produced with the same editor that is used for html.

An external style sheet can be used for multiple html pages.

In order for the styles to be applied to the html elements, we should reference our style sheet inside the <link> element which will be placed in the head area of the html document.

The syntax used is:

<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="https://example.com/css/thestyle.css">

The rel attribute specifies the relationship between the current and linked document. The rel with value "stylesheet" informs the current page that it should import a style sheet.

The type attribute specifies the Internet media type. The type attribute with value ="text/css" defines that the content of the document would be CSS.

The href contains the url at which our css file can be found.

 Note

It is good practice to save the .css file in a separate folder named css. 

Example

This is a simple HTML file:

Just HTML

We insert in this HTML file an external style sheet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
      <!-- This is an external style sheet-->
      <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/Core/Swiss">
  </head>
  <body>
    <h2>This is a Heading 2</h2>
    <h4>This is a Heading 4</h4>
    <p>This is lorem ipsum paragraph: <br>
        Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
    </p>
    <ul>
        <li>The first list item</li>
        <li>The second list item </li>
        <li>The third list item!</li>
    </ul> 
    <a href="https://www.w3schools.com/ target="_blank"">This a link</a>
  </body>
</html>

This style sheet will create a page displayed as:

HTML + CSS result

Style rules Priorities

As we show, there are three ways to apply styles in the HTML.

Assume that we have defined styles for an element using all three ways and giving different properties and values each time.

For example, take p element.

The external style sheet is:

p { color: red; text-align:center;}

The internal style sheet is:

p { color: green; }

The inline style is:

<p style="color:pink; background-color:grey;">

 How do you expect the paragraph to be displayed?

According to the rule, the closest the style is to the element the highest priority will have.

Thus we have : inline style >  internal style sheet > external style sheet

This means that for mutual properties, the inline style will overwrite the value that is placed in the internal or external style sheet. Also, the internal style sheet will overwrite the external’s property value.

Note

The rule is only applied for mutual properties. Properties that are not defined elsewhere will still be displayed.

According to the above, the paragraph will be displayed with pink color, grey background and aligned to the center of the page.

inline>internal>external

For more information: https://www.w3schools.com/css/css_howto.asp

Exercises

You have the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Style - CSS</title>
    <!-- This is an external style sheet-->
    <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/Core/Swiss">
  </head>
  <body>
    <h2>This is a Heading 2</h2>
     <h4>This is a Heading 4</h4>
     <!-- Paragraph 1-->
     <p>Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea.</p>
     <!-- Paragraph 2-->
     <p>Solet dictas periculis et mea, in omnesque periculis eloquentiam vis.</p>
     <!-- Paragraph 3-->
     <p>Mea id tale delicata conclusionemque, ut dicam everti vel, est ei ornatus probatus efficiantur. </p>
     <!-- Paragraph 4-->
     <p>Te adipisci delicatissimi usu, ridens copiosae pri no, etiam verterem molestiae eos te.</p>
  </body>
</html>

Exercise

This is an exercise to understand the priorities rules.

  1. Open your editor, create a new file and save it as exersice03.2.04.html in the folder "Exercises".
  2. Copy the above code and paste it in the new file.
  3. Modify and save the file. The browser's output should be as shown in the following image:

The result is ...

Solution: