Week 4

Stylesheets

What is a stylesheet?

This is what the browser reads to style the website

What are the 3 ways of implementing a stylesheet?
  1. External
  1. Internal
  1. Inline
How do i link to an external stylesheet?

<link rel='stylesheet' href='styles.css'>

How do i create an internal stylesheet?
<style>
//styles here
</style>
How do i create an inline stylesheet?
<element style='//styles here'>

Is there a preference towards a certain type of stylesheet?

No the last one defined will be override any prior unless they have a higher priority

Classes

What is the class attribute used for?

To point at elements and manipulate them in the HTML file

How do you point towards a class in a stylesheet?

using a . followed by the class name .className

How do you assign an element multiple classes?
<div class='classOne classTwo'>

IDs

What is the id attribute used for?

This is used for pointing at HTML elements to manipulate them

Does an ID hold more specificity than a class?

Yes

How do you point towards a ID in the stylesheet?

using a # followed by the IDs name #idName

How many elements can use an ID on a page?

ONE

unlike classes which can be as many as you want

Note: you can do more than one its just bad practice

How to create a bookmark?
<link href='#idName'>jump to id name here</link>
<!-- loads of html -->
<div id='idName'></div>
  • When the link is pressed the user will jump down the page to bookmark or id

CSS units

Absolute lengths

Relative lengths

for all of the below guess what they are relative to

em

relative to the font size 2em = 2x the font size

ex

relative to font height

ch

relative width to a '0'

rem

relative to the size of the root element

vw

relative to 1% of the width of the viewport

vh

relative to 1% of the height of the viewport

vmin

relative to 1% of the viewports smallest dimension

vmax

relative to 1% of the viewports largest dimension

%

relative to the parent element

CSS Flex-box basics

.largeContainer {
display: flex;
}

.contentDiv {
flex: 50%;
}