Applying CSS

Site: ΕΛ/ΛΑΚ Moodle
Course: Study / Web Design and Web Development
Book: Applying CSS
Printed by: Guest user
Date: Saturday, 12 June 2021, 8:02 PM

Description

  • Colors
  • Google fonts
  • Font Awesome
  • Box model

Colors

Colors are specified using:
  • color names
  • HEX (hexadecimal) values
  • RGBA values
  • and others

Have a look here

It's easy to find the color you want:

Have a look here

It's easy to detect a color:

Use the "Show Pixel Color" of your browser! Click here to install on Chrome or use the Web developer> Eyedropper tool of your Firefox.

Exercise

What is the RGB value of this color?

Use Show Pixel Color

Solution:

RGB (245, 130, 32)

Google fonts

Using Fonts we can achieve a unique look at our web pages.

There are lot available Fonts Libraries.

The most commonly used gallery is the Google Fonts.

It has a huge variety and detailed instructions on how to use it.

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
  </head>
  <body>
    <p style="font-family: 'Pacifico', cursive;" style = >Google Gonts</h3>
  </body>
</html>

will create a page displayed as:

Google fonts

Icons

Icons is a very smart way to create visual contents without using images.

There are lot icon Libraries.

Here we will use the Font Awesome library. 

It is easy to insert Font Awesome icons into your code and there are detailed instructions for that.

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Note, that you can change their color using the common CSS rules.

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <h3> <i class="fa fa-info-circle" aria-hidden="true"></i> Information icon</h3>
  </body>
</html>

will create a page displayed as:

Font Awesome

For more information about icons: https://www.w3schools.com/icons/

Box model

With the term Box model we describe the surrounding area of every HTML element. 

You can imagine that as an invisible box where the elements are laying inside.

 Box Model

These "boxes" consists of four layers.

  • The first is the content. The content is the actual text or media that we have inside our element.
  • The second is the padding. Padding is the area around our content.
  • The third one, the border, surrounds both the padding area and the content. The border can be displayed on the page using the "border" CSS property and assign it values.
  • Lastly, we have the margin. Margin surrounds all the above and defines the distance from other element areas in our code.
Example

The CSS rules:

<html lang="en">
  <head>
      <title>Style - CSS</title>
      <style>
        p{
           width: 33%;
           text-align: left;
           font-size: 0.75em;
           color: #006600;
           background: #fefecd;
           padding: 2%;
           margin: 0.75em;
           border-width: 10px;
           border-style: dotted;
           border-color: #900000;
        }
      </style>
  </head>
  <body>
      <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:

Box model properties

For more information about the Box model: https://www.w3schools.com/css/css_boxmodel.asp

For more information about the Borders: https://www.w3schools.com/css/css_border.asp

For more information about the Margin: https://www.w3schools.com/css/css_margin.asp

For more information about the Padding: https://www.w3schools.com/css/css_padding.asp