Applying CSS
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Study / Web Design and Web Development |
| Book: | Applying CSS |
| Printed by: | Guest user |
| Date: | Thursday, 21 November 2024, 4:56 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?
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:
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:
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.
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:
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