General
9 Step Tutor
Linked Style Sheets
Linked style sheets are placed in a separate text file and saved in the root directory.
The file is saved with a css extension.
The link to the file 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="mystyle.css" type="text/css"> </head>
Example of lines in mystyle.css text file:
body {
max-width: 1200px;
margin: 0 auto;
font-family: Arial, sans-serif ;
font-size : 18px ;
color: #000000
}
p {
text-indent : 16px;
text-align: left}
h1 {
font-size : 22px;
text-align :center
}
strong{
font-weight : 700;
color: #876541
}
p.red{ font-weight : 600; color : #ff0000}
#reddiv {
width: 100%;
background: #ff3300
}
Adding Media Queries for Responsive Design
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. Over 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
}
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. See: Web Developer Emulator Tool Tutorial.