Style a Web Page - Basic CSS Explained
Introducing the basics about applying the layout customization to a page.
Setup Cascading Style Sheets (CSS) for a Webpage
To start, we create a text file with the name styles.css (name can be chosen freely, filename extension not!)
This file which will have all style instructions must be referred to by the page we are building. In the head section between opening and closing "head" tag add this line:
<link rel="stylesheet" type="text/css" href="/styles.css">
Note that with href we are referring to the file location which is located in the root of the website in this case. For our web sites, we prefer /_assets/css/ as the folder to located style sheets.
Adding Styles
Within this short tutorial we won't dive to deep into style sheet instructions. We would open a mystic can of worms without bottom. For now, we add a few simple instructions for the html tags we use.
A css instruction starts with a selector, in this case the corresponding html tag followed by the instruction within {}. Each instruction consists of the property to address and the value to assign. E.g. assigning Arial font family to all content within the body tag:
body {font-family:Arial;}
Multiple instructions for one selector are separated by ";". For example:
body {font-family:Arial; font-size: 16px}
To point out the meaning of the name "Cascading Style Sheets", in the following example, there are two instructions for the same tag with values for the same property. If there are multiple assignments in this manner, when the page is displayed in a browser, rendering the page runs through all of them and remains with the last one:
body {font-family:Arial; font-size: 16px}
body {font-family:Verdana; font-size: 14px}
The page will end up showing all text with the font Verdana of 14px size. It isn't always obvious that there are different instructions for the same property of a tag. For example:
body {font-family:Arial; font-size: 16px}
h1 {font-family:Arial; font-size: 18px}
p {font-family:Verdana; font-size: 14px}
As a style instruction applies to the tag and all children tags within that tag, the instructions for p are first font-family Arial of size 16 px and then refreshed with the new instructions font-family Verdana of size 14px.
Having multiple instructions for an html tag maybe either a nightmare or a dream to be debugged, dependent if you love or hate resolving puzzles.
Fell free to add instructions for all tags used in our page.
Finishing Touch
We skipped on purpose any information about the important concept of "Mobile First" and "Responsive Design". We consider them advanced topics and go into more details here.
Did you find this page useful? Please let us know using the "Feedback" link below.