In the beginning was html and only html. But programmers wanted to add styling to their web pages to help distinguish themselves from others on the web. Initially, the answer was no. But in October 1994, Håkon Wium Lie introduced Cascading Style Sheets to the world. Today it is better known as CSS.
Built on top of HTML to add more visual control and complexity, CSS specifies styles on an HTML element or set of elements. The CSS code specifies visual properties unrelated to the written content on an HTML page. In practice there are 2 uses for CSS: element styling and layout.
CSS helps us change visual properties of HTML elements, such as fonts, background images, or rounded corners on buttons. Together with JS DOM manipulation, we can use CSS to implement visual logic within an application, such as hiding or showing cards and flipping elements 90 degrees.
CSS can help us divide our UI into visual sections. This is one of the most tricky aspects of CSS, because CSS was not originally intended for layout design. CSS content in RA's Bootcamp will focus on implementing UI layouts.
How CSS Works
CSS is a declarative language. It doesn't tell the browser what to do but rather describes the rules that the browser then uses to render the page. CSS became popular because it was predictable and forgiving in its syntax. It was also easy to learn.
The concept of cascading styles is unique to CSS. To cascade means that styles can inherit and overwrite styles through its hierarchy called specificity. More on that in section 2. This concept also allowed for many style sheets to be applied to one page. That is what made CSS so popular.
As a declarative language, CSS uses selectors and declarations to apply styling rules to HTML pages. The syntax for CSS starts with a selector which tells the browser the rules for styling the selected elements. Then a code block is created using open and closing curly braces. Inside the code block declarations or rules are created. A declaration is made up of a property name followed by a colon and then the value of the property followed by a semi-colon. You can have as many declaration statements as needed. It is the standard to put each declaration on its own line in code. The semi-colon tells the browser that the end of the line is reached so be sure to add it at the end of every declaration.
There are three places where CSS styling can occur:
In-line styling is written inside the HTML opening tag as an attribute-value pair. Like this:
<pstyle=“color:red;”> This text would be red </p>
If more than one style declaration is applied:
<pstyle=“color:red;font-weight:bold;”> This text is red and bold</p>
Internal styling is placed inside the head tag of the page and is wrapped inside the style tag. In this example, the selector of p is chosen to style all the paragraph tags on the page.
<title> Page Title </title>
<p> This text is white </p>
External styling links a css stylesheet to the HTML page. This is done by adding a link tag in the head of the HTML file.
The stylesheet would contain the same css coding that would be put in the head directly.
External Styling is the standard and should always be used. The other two ways should seldom if ever be used.
In these examples, we will be using internal styling as it makes it easier for teaching purposes. However, in the coding world, all css should be externally linked to the html page.
Remember that every browser has a CSS engine and that engine has default declarations for HTML elements. So to change the look of an h2 tag requires that a declaration block be made to apply new rules to the h2 tags in the file. Let's start with the following file.
<title> Page Title </title>
<h2> Styling H2 tags </h2>
Copy and paste the above code snipet and save the file as index.html. Then open the file in a browser and notice how the text looks.
Next insert the following code just after the title tag and just above the closing head tag.
This code targets all h2 tags in the file and makes the background-color blue and the color of the text white.
Refresh your browser and you should see that the h2 has a blue background-color and white text.
So far we have been looking at a single selector and applying declarations for that element. CSS offers many ways to target more than one element or get very specific about which element to style using selector combinations.
Below is a table that shows how to use different selector combinations and the elements they target.
Targets all elements
Targets all p tags
p , h1, h3
Targets p, h1 and h3 tags
Targets p tags that are descendants of a div
div > p
Targets p tags that are immediate children of a div
h2 + p
Targets p tag that is immediately adjacent to an h2 tag
Targets elements that contain the specified attribute and value
Fontawesome docs may give examples where the icon base classes must change- fas might need to be changed to fa if the icon doesn't appear.
Consider Using Google Fonts
Google's font collection is a relatively standard font collection of readable fonts. See their catalogue of fonts here and an exercise on how to use Google fonts here.
Use Viewport Tag for Mobile Views (Important!)
Many students miss this, causing CSS layout issues in mobile views. Please add this to websites we want to work on mobile.
For mobile first layouts we need to add a scaling meta tag in our head tag. This is to develop for mobile on desktop without squinting. Chrome DevTools assumes we have this scaling tag when debugging mobile layouts. Read more about the viewport tag here.