Linked Style Sheets

🔗 Linked style sheets are placed in a separate text file and saved in the same folder as your web pages or in a designated folder.

The file is saved with a css extension.

The link to the file including its path is placed in the head section of each document.

Linked style sheets contribute to the creation of consistency throughout your web pages.

Code in Head Section:

<head>
<link rel="stylesheet" href="css/yourstyle.css" type="text/css">
</head>

Example of lines in yourstyle.css text file:

body {
max-width: 100dvw;
font-family: Arial, sans-serif ;
font-size : 1.25rem ;
line-height: 1.5;
color: #000;
background: whitesmoke
}

p { 
text-indent : 1rem;
text-align: left}

h1 {
font-size : 2rem;
line-height: 1.2;
text-align :center
 }


strong{ 
	font-weight : 700;
 color: #876541
}

p.red{ font-weight : 600; color : #ff0000}

#reddiv {
max-width: 50dvw;
background: #ff3300
}

Using Media Queries

One of the greatest tools added to the CSS3 arsenal is the Media Query

Placed at various places in the linked style sheet at what are called breakpoints, they allow the author to change font sizes, resize or swap out images, change the size, margins and padding of container elements like headers, nav elements divisions , footers and more.

You can even hide things and make things appear at opportune times using the CSS property display.

To make the best use of breakpoints and Media Queries, study the devices used to visit websites today. More than 50% of site visitors these days are using cell phones with screen widths from 344 pixels to about 414 pixels.

A strategic breakpoint could be placed in the linked style sheet at 450 pixels using the following code which would adjust the page at 450 pixels viewing width.

@media all and (max-width: 450px){
Adjustments Here
}

Another could be placed at 360 pixels

@media all and (max-width: 360px){
Adjustments Here
}

👉 The introduction of newer functions like the Clamp Function and Container Queries can be used to replace the need for a lot of Media Queries.

👉Testing With Developer Tools

You can actually test these width settings using your browser's Developer Tools. Most browsers have them and most carry a function that simulates looking at your pages using different sized devices.

First open the web Page in your browser of choice.

You can open Developer tools in most browsers by pressing CTRL Shift j or the F12 key.

See: Web Developer Emulator Tool Tutorial.

🔺