6.2 KiB
6.2 KiB
Lecture 1 (13:00) - Intro to CSS
Style Rules
- CSS associates rules with HTML elements
- These rules govern how content of specified elements should be displayed
- Selector - Indicates the element(s) the rule applies on
- Declaration - Indicates how said elements should be formatted
Example 1
p {
font-family: Arial;
}
phere is the selector - it indicates all<p>elements should be selected.{ font-family: Arial; }is the declaration - indicating that all selected elements should be styled in the font family of Arial.
Example 2
h1, h2, h3 {
font-family: Arial;
color: yellow;
}
- Selector:
h1, h2, h3are selected - Declaration:
font-family: Arial; color: yellow;. All text will be yellow Arial text.
Using External CSS
- In the
<head>of the HTML page, we can link a CSS file for the browser to use for the current page. It takes 3 attributes:- href - path to CSS file
- type - the type of document being linked (
text/css) - rel - relationship to the HTML files (
stylesheet)
Example
<!DOCTYPE html>
<html>
<head>
<title>Using External CSS</title>
<link rel="stylesheet" type="text/css" href="src/styles/style.css" />
</head>
<body>
<!-- Content Here -->
</body>
</html>
- The
<link />element links a stylesheet of type "text/css" at location "src/styles/style.css", relative to the HTML file.
Using Internal CSS
- We can also include CSS directly in the HTML file using the
<style>tag. - This is usually done in the
<head>element, but can also be done inline. - Implementing CSS this way still requires a mime type to be defined ("text/css")
Example
<!DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);
}
h1 {
color: rgb(255,255,255);
}
</style>
</head>
<body>
<!-- Content Here -->
</body>
</html>
Internal Vs External CSS
- When building a website with more than one page, external CSS should be used.
- Allows all pages to be similar & familiar.
- Avoids redundant code.
- Abstracts content from style.
- Allows entire site to be updated from a single file.
- CSS can be cached.
- Internal CSS is, in the majority of cases, bad practice. Under certain circumstances such as the following, it may be useful.
- Single page sites (still bad practice)
- One page requires additional / special rules
CSS Selectors
| Selector | Matches | Example |
|---|---|---|
| Universal | All Elements | * { } |
| Type | Element Names | h1, h2 { } |
| Class | Class Names | h1.titlebar { } |
| ID | ID Attr. Value | #introduction |
| Child | Direct Child Element | li>a { } |
| Descendant | (Nested) Child Element | p a { } |
| Adjacent Sibling | Direct Adjacent Element | h1+p { } |
| General Sibling | Non-Direct Adjacent Element | h1~p { } |
Cascading
- If two or more rules apply to the same element we must be careful to ensure which rule will take precedence
- Last Rule
- Specificity
- Important
Last Rule
- If two selectors are identical, the last one will take precedence.
Example
h1 {
font-family: Arial;
}
i {
color: green;
}
p {
font-size: 75%;
}
i {
color: blue;
}
In this example, i would be coloured blue, since it is the last selector of i to appear in the stylesheet.
Specificity
- If one selector is more specific than the others, the more specific rule will take precedence over more general ones.
Example
* {
color: blue;
}
p {
color: red
}
p#intro {
color: green;
}
In this example, p#intro text would be coloured green, even though * (all text) is coloured blue, and p is coloured red. This is due to p#intro being a smaller scope than the rest.
Important
- Adding
!importantafter a property value will ensure that it is used over other values, even if it should be considered less specific, or not the last.
Inheritance
- Certain properties will be inherited by most child elements to minimise redundant code and simplify stylesheets.
font-familyassigned at the<body>of an element will ensure any<p>elements have the same font family, unless specified otherwise.
- Other properties such as
borderorbackground-colorare not inherited by default, but can be forced to do so by using a property value ofinherit.paddingis not inherited by default, but we can force this by typingpadding: inherit;.
CSS and Browsers
- Some browsers may not have the same CSS rules, and there are certain quirks between them.
- ex. Firefox does not have the same scrollbar rule as chromium / IE based browsers. Chromium browsers use
::-webkitCSS code, which Firefox does not have, instead opting for just ascrollbar-widthandscrollbar-colorelement. - https://browsershots.org and https://crossbrowsertesting.com can both help to develop and debug these quirks.
- ex. Firefox does not have the same scrollbar rule as chromium / IE based browsers. Chromium browsers use
Defining Colour (Color)
RGB(A)
- We can specify an RGB(A) value with a function:
rgba(102, 205, 170, 0.2), where the values correspond to Red, Green, Blue and Alpha (transparency).- All values are decimal converted to 8 bit binary positive integers, ranging from 0 to 255.
HSLA
- We can define colour by using HSLA too:
hsla(159.612, 51%, 60%, 0.2), where the values correspond to Hue, Saturation, Lightness and Alpha
Hex Codes
- We can specify hexadecimal RGB codes this way, using 2 characters for each channel.
#66CDAA32, where#RRGGBBAAis used for RGBA, or#RRGGBBfor RGB, we just convert from the decimal format ofrgba(), to hexadecimal.- All values are 2-bit hex values converted to 8-bit binary positive integers, ranging from 0 to 255.
#66CDAA32-rgba(102, 205, 170, 0.2)-hsla(159.612, 51%, 60%, 0.2)
Colour Names
- In CSS, there are 140 hard coded colour names that can be found in several places.
CSS Property Overview
Color
- This property is used to change the foreground colour (text) inside an element
Background-color
- This property changes the background colour inside the box. If unset, this is set to transparent by default, using the browsers colour.