Introduction to HTML, CSS, & JAVASCRIPT, Introduction to CSS

Introduction to CSS: HTML, CSS and Javascript continuation (Part 1)

Reads 18,467

Introduction to CSS: Heartfelt congratulations to you because you’re reading this Tweet. It’s another big programming class on Twitter threads. Let’s take a step further in our coding journey.

Course Title: HTML, CSS & JAVASCRIPT

Dear students welcome to your first class on CSS. Firstly, I want to congratulate you on the completion of your HTML course by following my previous threads. If you’re new to this whole thing, kindly follow me to join us and avoid missing classes.

We’ve had just five previous classes on HTML, and they were straightforward and well explained. Before I dabble into CSS and commence its total destructions, let’s do a bit of recap on HTML and refresh our memory. Remember that in the previous classes.

I talked about what you’d need to go on this journey with us, and I’ll do it again.

  • -Access to Internet and Twitter to check and recheck my threads
  • -IDE tool and I recommend VsCode
  • -Unshiverable Determination and InshAllah

You can download VsCode from here. After that, we went deep into HTML, and I taught and explained the following topics in full

  • -What is HTML?
  • -Attributes and Hyperlinking
  • -Headings + Lists -inline Vs Block element
  • -Id + Class Attributes
  • -HTML semantics
  • -HTML Form
  • -HTML buttons
  • -HTML Tables

What is CSS?

Cascading Style Sheet beautifies your web pages after writing the HTML. See the image below for before and after the CSS application.

One method is to utilize the style property on an HTML element, which we’ve previously covered in earlier lessons:

CSS is used to establish styles for your web pages, such as design, layout, and display variants for various devices and screen sizes.

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Let’s break down the preceding example. CSS files include a series of rules, each of which consists of a selector (to identify which elements you are attempting to edit), followed by a declaration block with a number of properties and their values.
There is a nested “style” HTML element here. As seen in the example above, “style” may be used to put CSS rules into an HTML page. In theory, this is a good technique to add CSS styling to your web pages, but in practice, it would be best to split content structure and styling into distinct files. CSS 101: Let’s go back to the basics.

Internal/inline

The previous lesson displayed how we can apply CSS internally and it is termed inline CSS. We talked briefly about that in HTML.

What of external CSS?

Loading a separate CSS file into an HTML page can be accomplished by placing a link element within the <head>
In your VsCode, create another file named style.css and link to it to your HTML code like this.
Exercise Use the style element to create a CSS rule that makes an h1 element’s text green. Then add a paragraph element to your HTML page.

See the Pen
testpen by aptLearn (@aptlearn)
on CodePen.40347

Click the blank Screen To View the Solution.

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

It is a great thing that you can build up an HTML page and add an inline style to it, But wait a minute

If you have a lot of styles and a lot of pages, you may have problems with maintainability if you add CSS <style> to each HTML page. Consider how difficult it is to update a single style setting: you must modify it on each impacted page.

Clearly, there is an easy solution to this problem. As you learned in the previous lesson and will learn in the future exercise, you may relocate the content of the <style> section into a new CSS file. It is important to know that you will need to create a seperate file with the extension (.css).

Exercise.

If you are using the aptLearn IDE, you may need to hold on. Open your external code editor, If you do not have one yet, kindly download VsCode here. If you need help setting up your Vs Code watch the video below

1st Step

After you are done setting this up, Create a new file and end it with a .css extension say filename.css then copy the code within the <style> element of the previous lessons and paste it into your filename.css file.

2nd Step

In akin.html, replace the whole <style> section with this markup and create a new file called akin.css:

<link rel=”stylesheet” href=”akin.css”>

3rd Step

Now your head section should be like this

Copy Code 


<head>
  <title>Table of Contents</title>
  <link rel="stylesheet" href="akin.css">
</head>

Let’s do this using our live IDE here.

below is the CSS code, copy it

Copy Code 


body h1 {
      color: white;
      background-color: #696cff;
    }
    body{
      border-style: solid;
      border-radius: 10px;
    border-color: #696cff;
    }
    h2 {
      color: #696coi;
      margin-left: 40px;

Now paste the code below, You can see how the raw HTML looks like before and after you post the code

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

 

CSS selector

CSS selectors are used to “find” (or select) the HTML elements you want to style. You probably recalled this from our HTML.

We can divide CSS selectors into five categories:

  • Simple selectors (select elements based on name or type, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)

CSS rules can select elements in many different ways. The three basic kinds of selectors are:

  • type selectors: used to select HTML elements by element name
  • class selectors: used to select HTML elements by a specific class value
  • id selectors: used to select an HTML element associated with a specific id value

NAME or TYPE selector

Using a type selector is as simple as typing the name of the element:

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Explanation: We selected the paragraph element by typing the tag name in our CSS file p and then we applied CSS.

CLASS

Using a class selector is done by placing a . followed by the name of the class value: See example:

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

id Selector

Using an id selector is done by placing a # followed by the id value: Example below.

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Let’s take another look at “type,” “class,” and “id” selectors in action to see how CSS rules are applied:

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Pause and think: How does the cascade decide which properties to apply to which elements? For example, we have three different selectors that target p elements.

  • A ‘type‘ selector with properties for ‘font size and ‘color.‘
  • A ‘class‘ selector with a ‘color‘ property
  • An ‘id‘ selector with a ‘color‘ property

In the case where two (or more) selectors target the same element and property, the cascade will select which property to apply based on its “importance.” id selectors are the most important, followed by class selectors, and finally, type selectors.

The second p element’s color is blue since the class has more importance than type. The third p element’s color is green since id has more importance than both class and type. However, the font-size property is not overwritten by either the class or id selectors, so it remains the same for all p elements

Multiple Element Selection in CSS

To select multiple elements, separate the selectors by commas, like this:
Copy Code 


/* Selecting multiple HTML element types */
h1, p {
  border: 1px solid black;
}

/* Selecting styles to be applied to several classes */
.ingredientsList, .instructionsList {
  font-size: 1.2em;
}

/* Using multiple kinds of selectors*/
h3, .red, #redElement{
  color: red;
}

From the above picture, you will notice I selected (h1 and p) tag together and (ingredientslist and instructionslist), then I applied a single CSS.

Let’s do a quick Exercise:

Give a color property (with a value of orange) to all the header elements (elements with the h1 or h2 tags) on the page with a single CSS rule.

See the Pen
testpen by aptLearn (@aptlearn)
on CodePen.40347

Solution

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Selecting Nested Elements

An HTML div element, for example, may include the following elements: A div (parent element) has three children’s elements in this HTML. There is just one child in the nested div.

Descendant Selector

The descendant selection matches all items that are descendants of a given element.

The following example selects all <p> components contained inside <div> elements:

Copy Code 


div p {
  background-color: yellow;
}

Multiple Mechanism

This mechanism can select elements with any nesting level by adding an additional selector separated by a space.
Exp

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Adjacent Sibling Selector (+)

The adjacent sibling selector is used to pick an element that is immediately after another element.

Sibling elements must share a parent element, and “adjacent” indicates “directly following.”

The following example chooses the first <p> element put directly after the <div> elements:

Copy Code 


div + p {
  background-color: yellow;
}

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element.

The following example selects all <p> elements that are next siblings of <div> elements:

Copy Code 


div ~ p {
  background-color: yellow;
}

See example

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Let’s move to the biggest and most important topic in CSS, The Box Model.

 

Last lessons, we discussed the

Meaning of CSS

Creating CSS file and Linking it to HTML

CSS Selections and

Multiple CSS selections

Let’s talk about the mighty CSS box model

(THE BOX MODEL) 

According to the standard CSS box model, your browser displays every HTML element as a rectangular box.

Every HTML element on your website has a content area, padding, a border, and a margin.
Understanding how to manage CSS properties inside the box model can help you lay out information on your web pages.

Let’s talk about

Explanation of the different parts:

  • Content – The content of the box, where text and images appear
  • Padding – Clears an area around the content. The padding is transparent
  • Border – A border that goes around the padding and content
  • Margin – Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

See the Pen
Untitled by aptLearn (@aptlearn)
on CodePen.40347

Avatar photo

Founder & CEO of Swiftspeed Appcreator. I enjoy sharing my experiences in the digital world and helping businesses solve more problems with software development. Connect with me on LinkedIn @ Akinola Abdulakeem and Twitter @Kynsofficial

25 Comments

  1. Pingback: Best Introduction to CSS: HTML, CSS and Javascript continuation (Part 2) - Akinola Abdulakeem
  2. Mustapha Mustapha says:

    good morning boss the images are not showing and I have tried reloading the page severally

    Reply

        2. Ensure the file that you create in your vscode is “styles.css” but not “style.css” so as to match with

          Reply
  3. Akanni kehinde says:

    Hello sir, I have some issue that I will like you to clearify for me, I have tried inserting picture in my but it does not show in the output, also when I use border, it does not show in the output

    Reply
  5. Victory ruro says:

    Thank you sir for all the lessons they really have been helpful

    Reply
  6. Nassur Mohamed Ramadhan says:

    correction sir, maybe I missed some classes but we had three html classes and not five as started here in the introduction.

    Reply

  7. Please, I don’t seem to get how to link the css file to the html file. Where does this
    goes?

    Reply

    1. Hi, ensure the file that you create in your vscode is “styles.css” but not “style.css” so as to match with

      Reply
  8. Okikiola Ridwan says:

    Sir ,is it compulsery to link the CSS with the HTML ,like what if we are just applying the CSS inside the HTML straight ?

    Reply

    1. Its not compulsory but thats the standard way to do it… No proffessional dev would use the in-
      line method(applyinf css in the html directly)

      Reply

  9. Good day coach!
    Thanks for the good work so far
    Please is

    the generic way to link css to html; that is, will it work for other examples apart from the Type vs Class vs Id Selector exercise we did in the class?

    Thank you sir

    Reply

  11. Thanks for all that you do… pls I am using Sololearn. how do I link my html code to css?

    Reply

  12. 1. Write the above code in the head tag
    2. On the href attribute, erase “filename ” and type your CSS file name and include the .css extension ….it should work

    Reply

  13. Thank you, getting real value here

    Reply
  14. Alimi Kehinde Sherifah says:

    Well explained and well understood.👏 Thank you so much Agbaakin.

    Reply

  16. Its not compulsory but thats the standard way to do it… No proffessional dev would use the in-
    line method(applyinf css in the html directly)

    Reply

  17. Thank you for making this simple,

    Reply
  19. Archerlima says:

    Good day sir I’m having an issue linking my html to my case

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *