What is CSS?
CSS stands for Cascading Style Sheets, a coding language that assists the development of webpages and is often incorporated with HTML and Javascript. CSS describes the presentation of HTML elements by modifying an element’s property and value.
CSS vs Inline Styling
CSS is used in a separate .css file made up of rulesets. However, similar functions can also be utilized through inline styling inline with an HTML tag. Commonly, rulesets are the better option as they allow for more organized and readable code. Inline CSS should only be used in isolated cases, NOT to style entire webpages.
Here are some major pros/cons of each style:
| CSS | Inline Styling |
| Organized and readableSimple to editAbility to specify categories of elements instead of a single elementImproved website speed Lack of securityIncompatible with specific browsers | Easy and fast to implementLess complicatedEverything stays in a single file Messier and clutters codeLimited to only modifying a single element at a time |
CSS Ruleset Anatomy
CSS is made up of rulesets, which are blocks of code that style text and pertain to specified elements. Let’s take a look at a basic ruleset.
selector {
property: value;
}
Selectors are used to determine which element/s are affected by the ruleset. Usually, a special character is used before the selector to specify a category, which we’ll dive into later.
Properties correspond to a specific property in an element, whether that be color, style, size, ect.
Values modify the specified element’s property with a specific value.
If you are unfamiliar and unsure about these terms, do not worry! Everything will make sense after further explanation. Let’s take a specific look at each term.
Selectors
Without selectors, the computer would never know which elements to change! Selectors are either a category of elements or a specific element. Now, what does a “category of elements” mean? We can group elements by common properties and change all those elements by defining a common property.
Type
Type selectors, as the name implies, can modify all elements that use a specific type.
p {
color: green;
}
Using this ruleset, all elements using the <p> tag will be green. Note that selecting the type does not include the angle brackets, only the tag inside.
Universal
What if we wanted to change everything on our webpage? We can do that using a *.
* {
font-family: “Times New Roman”;
}
ID/class of an element
One extremely useful attribute in HTML is id, which stands for Identifier. As evident from the name, this attribute allows other code to specifically access this element. For example, giving an image an identifier allows CSS styling scripts to target that one image. Note that each unique id can only be paired with a single element, and that each element can only be paired with a single id.
CSS classes have a very similar utility to id, however, classes can be used on multiple elements and a single element can ‘belong’ to multiple classes.
Think of classes as an actual class in school – many elements belong to that single class, and a single element can be in multiple different classes. Continuing the analogy, identifiers can be thought of as peoples’ names- each one specific to only one person and no person can have two different names.
Classes and IDs can have any name you choose.
To select a class with CSS, a . is used before the class name. To select an ID, prefix the name with an #.
HTML element set to the descriptions class
<p class = ‘descriptions’ > . . . </p>
Ruleset defining the ‘descriptions’ class
.descriptions {
. . .
}
Giving this element an ID of ‘title’
<h1 id = ‘title’ > . . . </h1>
Ruleset defining the ‘title’ ID
#title {
. . .
}
Attributes
The attribute selector targets HTML elements with specified attributes. Surround the attribute name with [].
<img src = ‘banana.jpg’ > . . . </h1>
[src] {
. . .
}
We can also specify the value of an attribute for further utility. The basic syntax is tag[attribute *= ‘value’]. The computer will search for the string value in the attribute. Let’s take a look at the syntax in our example.
img[src *= ‘banana’] {
. . .
}
Even though the actual value of the src attribute is ‘banana.jpg’, the string ‘banana’ is contained in the value so it executes as true.
Properties and Values
Each element is made up of many different properties set to values. They can be size, color, font, ect. In a ruleset, we can modify an element’s properties simply by setting that property to a valid value. These are pretty intuitive:
Font
.bolded_text {
font-weight: bold;
}
Color
.blue_text {
color: blue;
}
Size
.blue_text {
font-size: 15px;
}
Highlight/background color
.red_highlight {
background-color: red;
}
These are obviously just examples of the basics. There are a lot more properties, not just for text but also for media as well.
Linking Files
As mentioned earlier, to use CSS, code must be defined in a separate .css file, usually named “style.css”. So how do we attach this styling file to our HTML file? It’s actually quite simple. Within the <head> element in our HTML file, write
<link rel=”stylesheet” href=”style.css”>
Now, what is actually going on here? The rel attribute defines the type of relationship between the current file and the specified file, specified using href. Assuming “style.css” was used to style elements in rulesets, the value should be set to “stylesheet”. Note that <link> is self closing and does not contain a /.
Inline Styling
Perhaps the line
<p style = “background-color: white; color: black; font-size: 12px; font-weight: bold;”>
looks daunting at first, but at closer look, it is simply just a CSS ruleset crammed into a single line. This is called inline styling. Within the opening tag, declare the style attribute, and there you can change the element’s properties. Each inline style only pertains to the element it was defined in, so categorized styling is impossible and selectors don’t exist. Be sure to enclose all properties and definitions in a single set of quotations right after the equals sign and right before the closing angle bracket.
Review
We covered a lot of CSS concepts in this blog series, and now you should have a basic understanding of how to style your own webpage and why it works. Let’s review some major takeaways.
Selectors determine which HTML elements are modified by a ruleset. They can be types, classes, IDs, attributes, universal, and more that we haven’t covered in this series.
- Types have no prefix
- Class is prefixed by a .
- ID is prefixed by #
- Attributes are surrounded by []
- Universal is simply a *
Properties and values are assets of elements. Usually, they define what an element looks like on screen.
Link HTML files and CSS styling files with <link rel=”stylesheet” href=”style.css”>. The <link> tag is self closing without /.
Inline Styling is written inside the element you are styling and is specific to only that element. No selectors are used. To style elements, the style attribute is used, and defined properties and values belong inside the style tag.