CSS Fundamentals
Time to talk about style.
Styling is one of the best ways to attract users to your application. The more technology advances, the more we crave aesthetic landing pages. Back in the early 2000s, the user interface was as best as it could be with a super clunky and pixelated design. Let’s think about how Microsoft looked back then just to get an idea in our head. Now that we have the ability to design beautiful and captivating websites, we begin to realize how important it is. Sure you can build out a fully functional application with no styling but, who would actually want to use it? I know for me personally, I love to use applications that are aesthetically pleasing and this is something that should be considered when building out your applications! Today, we will be discussing the basics of CSS and how it intertwines with HTML.
What is CSS?
HTML and CSS work closely together in frontend development, as well as Javascript but we will not talk about that in this blog post. As we know, HTML is used to describe the contents of a web page. CSS, which stands for Cascading Stylesheets, describes the visual style and presentation of the content written in HTML. Similar to HTML, CSS consist of a number of properties that developers use to style the contents on a web page. CSS properties include text, font, spacing, etc. These properties typically describe how you will style an element. CSS code can be broken down like such:
h1 { color: blue; text-align: center; font-size: 20px;}
CSS code starts with a selector, in this case, it is the h1. Next, we have the declaration block that is defined by the beginning and end of the curly braces {}. Within the declaration block is where our CSS properties and values live and these are called declarations or styles. Declarations have a key-value syntax in which the property is the key and the value gives the direction that the property needs to take. The selector + declaration block is called a CSS Rule. Each stylesheet consists of multiple CSS rules that are implemented from top to bottom.
Inline, Internal, External
Inline
Inline CSS is written inside the element tag in the HTML document like such:
<h1 style="color: blue">This is inline CSS</h1>This method of utilizing CSS is not typically the best practice as we want to avoid mixing styling and writing HTML.
Internal
Internal CSS is typically written within the <head></head> tag of an HTML document and declared using the <style></style> like such:
This acts as a stylesheet within the HTML file. However, this isn’t something that you want to gravitate towards. Its best practice to separate the files, aka separation of concerns concept, so HTML and CSS should stay as separate files. Acceptable if you are building a very small-scale application but it's best to follow separation of concerns in order to avoid future mistakes on wide-scale projects.
External
External CSS files are called stylesheets that can take any name as long as it ends in .css. With an external stylesheet, we would need to tell our HTML document about the CSS file. This is typically done in the <header></header> and we use the <link></link> element like such:
The href should be the name of your external stylesheet.
Combing Selectors
To combine selectors, we would do as such:
This will select the h1, h2, and h3 tags and make the font the color indicated by the value keyword.
The descendant selector allows you to grab the child elements and specifically style these instead of the whole parent element and all of its children. This would look like such:
This would style all <p> tags within the <footer></footer> tag.
The structure of the HTML document for this nested descendant selector looks like such:
<article>
<header>
<p>Hello World!</p>
</header>
</article>Descendant selectors are typically not best practice as they can easily lead to errors if you were to change or add one of the child elements.
Class and ID Selectors
To avoid writing descendant selectors, it's best practice to give HTML elements an ID or class name. This will allow us to select the specific elements using their class or ID. New programmers, like me, often get confused about when to use IDs and when to use classes. The most common way is to solely use classes instead of IDs because if you ever need to change or add content, you won’t have to change the ID to a class, you can just use the same class name. When using IDs, only one ID name gets to be assigned and cannot duplicate to other elements. Classes are used for multiple elements that are related and can have the same name. Using duplicate IDs for multiple elements will throw an error so that is why using classes as default is best practice.
Conflicts Between Selectors
Conflicting selectors occur when multiple CSS rules apply to the same element. When multiple declarations exist for the same element, CSS will take the highest priority selector as such (highest to lowest):
- ID selector
- Class selector/ pseudo-class selector
- Element selector
- Universal selector
If there are more than one of the same kind of selectors, the last one will be taken. All properties from selectors will still apply but only recurring selectors will go through priority selection. Inline styling has a higher priority than ID selector but is typically not used as it is bad practice but you should still know where they stand in the priority list of selector types. The highest priority is selector type is the !important keyword which is used as a last resort to solve issues. However, this should not be used, it’s just good to know that it exists.
- Can add multiple classes to one element like such:
So now we have a class of copyright and a class of text. In this case, if we styled it like such:
The ID would be shown because it has the highest priority.
Styling
Text
Each property can take different types of values: length and keywords. Font-family property — can specify different fonts for text. However, you cannot simply just use a font family that you’ve installed on your computer. If someone else tries to access your application with this font, they must also have it installed or installed on their local computer. In order to avoid having font errors, we typically give the browser the keyword, sans-serif, so we can use any font that is sans-serif.
- Text-transform property — can turn specific text uppercase (all letters uppercase).
- Line-height property — the value will be number without unit because we are simply saying that we want the line-height x times the font size.
- Text-align property allows you to move the text to the left, right, or center of its parent element
There are definitely a lot more properties to mention, so make sure to find the right property that you want for your user experience.
Hyperlinks
When styling hyperlinks, we automatically think of doing something like this:
a {
color: blue;
}However, simply selecting the anchor tag and styling this element is not the best practice. Instead, we should use a pseudo-class of the anchor tag because that will allow us to target the different states of clicking a link. These 4 states are always defined in this specific order:
text-declaration: none; gets rid of the underline that is typically seen when we have hyperlinks.
Colors
Two different methods when it comes to colors in CSS: RBG Model and Hexadecimal Model. RGB Model — every color can be represented by a combination of red, green, and blue. Each of the 3 base colors can take a value between 0–255 so there are 16.8 million different colors available. When pure colors are at a maximum of 255 as such:
- When pure red: R= 255, G = 0, B = 0
- Pure blue: R = 0, G = 0, B = 255
- Pure green: R = 0, G = 255, B = 0
- White: R = 255, G = 255, B = 255
- Black: R = 0, G = 0, B = 0
Defining colors when writing CSS:
RGB/RGBA Notation:
- rgb(red, green, blue)
- Ex: rgb(0, 255, 255) - rgba(red, green, blue, alpha) — transparency
- Ex: rgba(0, 255, 255, 0.3)
Hexadecimal Notation:
- More widely used in CSS
- Uses scale from 0 to ff (same as 255)
- #00ffff
- Can also be written in shorthand if all colors are identical pairs
- #0ff
In practice, we mostly use hexadecimal notation, however, if transparency is needed, we will use the RGBA notation. When all 3 channels are the same, we get a grey color and there are 256 pure grays to choose from. There is no need to really memorize these colors because we can just use the lovely VS Code color picker!
Inheritance and Universal Selectors
Inherited values have the lowest priority between selector types. Children elements get access to properties of the parent element through inheritance. It's important to note that not all properties get inherited from the parent element as it’s typically just properties related to text.
Universal selectors select every single element on the HTML document. The big difference between universal selectors and inheritance is that universal selectors simply apply to all elements and there is no inheritance involved. Inheritance means that all the children will inherit all text properties from their parent element.
Your Turn!
These are only a select few fundamental topics in CSS that I discussed today and it’s important to understand why we use specific properties or selectors over others. Take some time to practice styling a simple HTML document and use Chrome DevTools to the elements you to style and see how they display on the page. Happy coding everyone!
