CSS Fundamentals

Photo by KOBU Agency on Unsplash

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;}

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>

Internal

Internal CSS is typically written within the <head></head> tag of an HTML document and declared using the <style></style> like such:

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:

Combing Selectors

To combine selectors, we would do as such:

nested descendant selector
<article>
<header>
<p>Hello World!</p>
</header>
</article>

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
  • Can add multiple classes to one element like such:

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

Hyperlinks

When styling hyperlinks, we automatically think of doing something like this:

a {
color: blue;
}

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
  • rgb(red, green, blue)
    - Ex: rgb(0, 255, 255)
  • rgba(red, green, blue, alpha) — transparency
    - Ex: rgba(0, 255, 255, 0.3)
  • 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

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.

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store