Inserting CSS
| Site: | ΕΛ/ΛΑΚ Moodle |
| Course: | Study / Web Design and Web Development |
| Book: | Inserting CSS |
| Printed by: | Guest user |
| Date: | Friday, 26 April 2024, 3:40 PM |
Description
How to Insert CSS:
- Inline style
- Internal Style Sheet
- External style sheet
Style rules Priorities
How to Insert CSS
CSS can be applied using three different ways:
- Inline style,
styleattribute 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 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 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:
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:
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.
For more information: https://www.w3schools.com/css/css_howto.asp