Related: [[./Programming MOC|Programming MOC]], [[../../../CSS Lecture 2|CSS Lecture 2]]
Summary CSS (Cascading Style Sheets) can be used in 3 ways for styling HTML: in-line style for specific elements, internal styling for staying in the same file, and external styling for applying style across whole elements/pages
In-line styling
This is used to apply styles to specific blocks of html, using the style= "property: value;" attribute in the same line. Use it at the opening of the html tag to apply to that html element. Used with
You can have as many property-value pairs as you want. Separate each with a colon.
Not recommended for consistent styling because there’s a lot of repetition!
In-styling has highest priority, so it can be used to override most rules in internal/external style sheets.
example 1:
<h1 style="color: red; font-size: 40px;">Hello World</h1>example 2:
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutoriels</h1>
<p style="color:white;">Quelque chose d'utile ici.</p>
</body>
</html>Example of override:
Assume we have two paragraph texts with inline styling set to red and internal styling set to green — the CSS from the inline styles will override the CSS from the internal styling, so both paragraphs will be red.
<html>
<head>
<title>Hello World</title>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p style="color: red;">Paragraph one is red.</p>
<p style="color: red;">Paragraph two is also red.</p>
</body>
</html>Internal style sheets
For internal (or integrated) style sheets, use <style> inside the <head> element, and use curly brackets to define all the property-value pairs.
Internal style sheets are in the same file as the HTML code, and useful if one particular page must be styled. You can use [[class and ID selectors|class and ID selectors]] for this.
example
<html>
<head>
<style type="text/css">
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
</body>
</html>External style sheets
In this method, you link your html file with a separate .css file. When the html file is transmitted onto a website, it will take all the style rules noted in the .css file.
This is useful to define styles across multiple pages/site-wide
First, create a .css file
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}Then in your html file, link the file using link rel=, type=, and href=. Place this link af
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
</body>
</html>