There are nine units in Lambda School’s Full Stack Web Development Pre-course. I’m going to summarize what the pre-course covers for each of them. This material is basically ground-floor information that students need to know before they start the full course.
Learn what CSS is and describe its place in Web Development
The sixth lesson in Lambda School’s Full Stack Web Development Pre-course is their introduction to CSS. It goes over the following topics:
- What is CSS?
- The STYLE and LINK elements
- Introduction to CSS Selectors
- Anatomy of Styling Rules (Syntax)
- Styling Rules
What is CSS?
CSS is an acronym for Cascading Style Sheets. Its a different language than HTML. HTML deals with placing elements onscreen – both inserting the data as well as positioning it. CSS is more focused on presenting that information in an eye-pleasing manner to the viewer. Its used to add color and other visual enhancements to HTML elements.
One of the powers of CSS, which I wish I had taken more advantage of at work, is the ability to modify the properties of multiple HTML elements at once – not only on a single web page, but across multiple pages. As I said in a previous post, I didn’t know how to code in HTML or CSS, so I relied on Microsoft Expression Web and Visual Studio to design the interface for our EMR application at work. Those programs got the job done, but I was (and still am) adding inefficiency to our application. This is part of the reason that I joined Lambda School – I want to correct this.
Currently, I use Expression Web to place CSS in each and every web page that I have designed for our application. This, of course, leads to larger file-size downloads for clients, slowing our system down, even if its only by seconds. Those do add up, and can even make an otherwise lean system feel sluggish. I was somewhat aware that CSS can be saved to its own file and called or referenced by other pages, so it doesn’t have to be duplicated (or recreated from scratch, in some of my work) for each page that needs it.
But, as I was saying, one of the strengths of CSS is that it can be saved on a single file and called by other pages of a website or web application. This means that a developer can modify the appearance of an entire website from a central location – something I was unable to take advantage of because of my lack of knowledge. There was a period in which we spent about 9 months revising our entire system, with visual updates as well as reformatting certain sections – which coincided with actual program and logic updates due to changes in federal laws that we have to comply with. I had to update many elements of dozens of pages individually. This work could have been significantly reduced if I knew how to use CSS properly. My aim is to learn all of that now and employ it going forward.
The “STYLE” and “LINK” elements
As per the Lambda School text:
Before we can add CSS to our web page, we need to inform the browser that what it is reading is in fact CSS. We can tell the browser that through HTML elements known as the style and link elements. These elements will go in between the head tags, as it is not necessarily data we need to appear on the screen.
There are two ways to let the browser know that CSS is included in our HTML:
1. We can write CSS directly between two style tags. This is what I currently do, via Expression Web. Its fine for a single page, or a very small website or web application, but it falls short for larger projects.
<style> <CSS stuff goes in here> </style>
2. We can link to an external CSS file using the link element. This is the technique i’d like to learn and then utilize at work – which will cause me to have to modify all of the pages I already updated, but should make for a leaner and faster program.
The link element includes two attributes: rel and href.
- rel refers to the type of file being linked to. For CSS, this file type is “stylesheet”.
- href points to the location of the file. Its generally a web address, because it points to a file on a webserver.
<head> <link rel="stylesheet" href="www.website.com/folder/styles.css" /> </head>
Introduction to CSS Selectors
CSS selectors are commands that pick which HTML elements we want to style using CSS. Essentially, they’re commands that tell the browser, “Hey, make all of these boxes red” or “Turn all of these headers blue and make them bold” or “Change the text color for this specific paragraph to white and give it a border of this style and in this thickness.” So, they’re exactly what their name implies: they select what elements we want to apply a set of CSS code to.
CSS can be used to select all elements of a certain type on a web page – so all paragraphs, divs, everything in the entire body, and so on. Elements can also be given custom names and CSS can select only the elements with that name. These are called classes. For example, at work, I might be updating a nursing assessment and I might want to group everything to do with vital signs (temperature, pulse, blood pressure, height, weight, etc.) and give them a class called vitals. Then, I can style them all together and make them look the same. I might want to do the same with all medications that a patient is taking, and I can call that class meds.
An element can also be given an individual name. This is called an id. CSS could then be applied to only that particular element. For example, I might have a section on a form called contact info that has a patient’s name, address, phone number and other information needed to identify and contact him or her. I can give that specific section an id and call it contact_info, and then use CSS to style only that section. This way, even if its a paragraph, and other paragraphs are styled in a certain way, it can still be made distinct by essentially calling it out and giving it its own custom appearance.
Selectors are applied to HTML tags as attributes, which means that they’re included inside of the element’s brackets. (Again, I spelled “div” as “d1v” to stop my browser from actually running the code.)
<d1v id="contact_info"></d1v> <d1v class="vitals"></d1v>
As per the Lambda School text:
Id`s: are titles that can only appear on a single element. Think of it as you would your driver’s license number. ONLY you have that one number.
Classes: on the other hand can apply to multiple elements. Think of it like a classroom. Usually, you aren’t the only person in a class, although you might be. The class is big enough for lots of people.
Anatomy of Styling Rules (Syntax)
CSS, naturally, has its own syntax. It tells the browser which selectors to use and what style properties to apply to the selected elements.
- Classes always begin with a period (.)
- IDs always begin with a hashtag (#)
- Elements just use their name (<p>)
- After a selector is named, the styling rules follow, encapsulated between curly braces ({})
<style>
body {CSS stuff that affects all elements on a page goes here}
.vitals {CSS stuff for the vital signs class goes here}
#contact_info {CSS stuff for the resident's contact info section}
</style>
Styling rules follow this format: Inside of the braces we have the property name, a colon and the property’s value. The style for that property is closed by a semicolon.
div {
styling_property: value of rule;
}
For example:
<style>
p {
font-size: 20px;
color: blue;
}
</style>
Styling Rules
Once HTML elements are selected, they can be styled with CSS. There are many ways to style an object: size, color, placement on screen, visibility, and more. Three of the more common ones are as follows:
background or background-color
The most common uses for background are setting an image or paragraph’s background color. To be more explicit, “background-color” can be used to set the color of the background – there are actually a bunch of different background properties that can be manipulated.
.vitals {
background: red;
}
#contact_info {
background: url('http://www.website.com/folder/backg.jpg');
}
body {
background-color: blue;
}
color
Color sets the color of the selected text.
p {
color: magenta;
}
font-size
This property sets the size of text. Px, or pixel, is the most commonly used, but other units (like inches) or percentages (120%) or even certain text descriptors (large) can also be used.
.vitals {
font-size: 15px;
}
#contact_info {
font-size: large;
}
div {
font-size: 150%;
}
REDO FROM START 
One thought on “Lambda School Pre-course 6: Learn what CSS is and describe its place in Web Development”