7.5 KiB

Raw Blame History

Diving Into The Basics Of CSS

HTML file skeletion

HTML file skeleton that we will use as starting point.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>uHost</title>
</head>

<body>
    <main>
        <section>
            <h1>Get the freedom you deserve.</h1>
        </section>
    </main>
</body>

</html>

Adding CSS using inline styling

Use the style attribute inside an HTML tag by applying a CSS declaration, A declaration is simply means WHAT you want to style, and HOW you want to style it. What part of the declaration is defined by properties, lets say we want to change the background color of an element, we'll use the background property for that. And how is defined by a value, lets say we want to change the background color to red.

<section style="background: red;">
    <h1>Get the freedom you deserve.</h1>
</section>

Or we can use a hexadecimal value for the color, like #ff1b68.

Inline styling is where we use the style attribute directly on the HTML element which we want to style, and we would write all styles separated by semicolons on the same line if there are multiple, this way of styling is not recommended because of code readibility and maintainence issues.

`<style>` tag and CSS files

A better alternative to inline styles is using the <style> tag. Inside the <style> we define css rules, to define a css rule we need to first tell the browser on which element do we need to apply the css style, for that we use css selectors.

For example, to style the <sectino> element, we can declare a css selector:

<style>
    section {
        background: #ff1b68;
    }
</style>

And the browser will apply the style to all the sections on your HTML page.

There's another way of using styles, and that is using an external style sheet. For that we can create a new *.css file in the project, and in that file we can define css rules, without using the <style> tag because we are not in the HTML file anymore.

So now we have two fies, index.html and main.css. And now we would need to explicitly include the main.css into our index.html file. To do that we use the <link> element:

<head>
    ...
    <link> rel="stylesheet" href="main.css">
</head>

And our main.css file:

section {
   background: #ff1b68;
}

Applying additional styles and importing Google Fonts

We look how to change different things rather than just the background color, and also how we can apply different styles to different sections, rather than having a single section style for all sections.

Also, we will change the color and font of our h1 tag. We will start by adding a h1 selector to our main.css:

h1 {
  color: white;
  font-family: sans-serif;
}

To include a font which is not necessarily on the machine, we can use Google Fonts, and for that we can go to the link and look for the instructions to include the font we want.

Lets say we want to include the font called Anton, search for it, and copy the link tag and paste it BEFORE your main.css stylesheet import inside the index.html file:

<head>
    ...
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&family=Ubuntu:wght@300;400&display=swap" rel="stylesheet">
    <link> rel="stylesheet" href="main.css">
</head>

And then inside your main.css, change the font-family attribute to:

h1 {
  color: white;
  font-family: 'Anton', sans-serif;
}

Theory Time - Selectors

We have the following selectors:

Elements

For example, following selector is applied to all the h1 elements:

h1 {
}

Classes

For example, following selector is applied to all the elements with a blog-post class, the name of class is followed by .:

.blog-post {
}

Universal

For example, following selector is applied to all the elements on the page:

* {
}

IDs

For example, following selector is applied to the element with ID main-title, the ID is followed by #:

#main-title {
}

Attributes

For example, following selector is applied to all the elements with attribute disabled, it uses []:

[disabled] {
}

For class names, preferred naming convention is kebab case, where words are separated by dashes -, and also CSS is case insensitive, so this naming convention helps avoid issues like class name mainTitle and maintitle overriding each other.

You can also set multiple class names to an HTML element separated by spaces, e.g class="one tow".

IDs are not only used for styling, they are also used by the browser to jump to an element if you append # followed by the ID of the element to the URL of the page.

Understanding the Cascading Style & Specificity

Inline-style has the highest priority (or specificity), second comes the class selectors followed element selectors.

Cascading in CSS (Cascading Style Sheets) simply means multiple styles or rules can be applied to the same element, these rules can conflict and to resolve those conflicts CSS uses the concept of Specificity.

The specificity of the elements is as follows: Inline Styles > #ID selectors > .class, :pseudo-class and [attribute] selectors > <Tag> and ::pseudo-element selectors

Also, conflicts with same specifity are resolved using order of declaration.

Understanding Inheritance

An element also inherits some styles from its parent element. A parent element can be direct or indirect parent in the chain of elements. Inheritance has a very low specificity.

body {
    font-family: 'Montserrat', sans-serif;
}

Adding Combinators

A combinator allows us to combine multiple selectors to be more precise about what we want to select. Combinators have higher specificity, because generally the more specific rules have the higher specificity.

Theory Time - Combinators

There are four types of combinators:

Adjacent Sibling
General Sibling
Child
Descendant

Adjacent Sibling

It uses the + sign, for example the following rule assigns the style to all the <p> elements directly followed by an <h2> element, such that <p> is a direct sibling to <h2>:

h2 + p {
    ...
}

General Sibling

It uses the ~ sign, for example the following rule assigns the style to all the <p> elements on the same level as <h2> element, <p> doesn't need to be direct sibling to <h2>:

h2 ~ p {
    ...
}

Child

It uses the > sign, for example the following rule assigns the style to all the <p> elements that are direct child of <div> element, <p> needs to be direct child to <div>, indirect <p> childs won't be assigned the following rule:

div > p {
    ...
}

Descendant

It uses the a blank space, for example the following rule assigns the style to all the <p> elements that are descendant of <div> element, <p> doesn't need to be direct child to <div>:

div p {
    ...
}

Summarizing Selectors, Properties & Values

A reference link for all the css properties.

Value Types

Values are tightly coupled to a specific property!

Pre-defined Options	Colors	Length, Sizes & Numbers	Functions
`display: block;`	`background: red;`	`height: 100px`	`background: url(...);`
`overflow: auto;`	`color: #fa923f;`	`width: 20%;`	`transform: scale(...);`

7.5 KiB Raw Blame History