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

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

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

Topic: Introduction to CSS


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.

Suppose you are thinking of closing your browser because you’ve already missed classes; please don’t. We can find common ground, and I can bring you up to speed. Click on this link in my bio or start from the very beginning.

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

If you remember all of these, which I assume you will as you’ve been taught and given exercises, then let’s get into CSS. What is CSS? CSS: Cascading Style Sheet It is basically used to beautify your web pages after writing the HTML. see the image below for before and after CSS application

Image

One way, which we’ve already explored in previous lessons, is to use the style attribute on an HTML element:
Check example below
Introduction to CSS
Image
Let’s take a quick look at how we would take the previous example and apply the same style to the p elements using CSS: Basically, we have created instruction that everything written inside the p tag should be in color blue using <style> tag.
Image
Image
Let’s deconstruct the above example. CSS files comprise a set of rules, each consisting of a selector (to indicate which elements you are trying to modify), followed by a declaration block that contains a set of properties and those properties’ values.

Image

Notice the use of the “style” HTML element nested in the head. “style” can be used to place CSS rules inline with an HTML document, like in the example above. Although this is a perfectly valid way of adding CSS to your web pages, it would be better to separate concerns by putting content structure and content stylization in separate files. Let us continue with our Introduction to 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.
Image
Image
Exercise Use the style element to create a CSS rule that makes an h1 element’s text green. Then add an h1 element to your HTML page.
Introduction to CSS

CSS selector

CSS rules can select elements in many different ways. The three basic kinds of selectors are:
  • 1 type selectors: used to select HTML elements by element name
  • 2 class selectors: used to select HTML elements by a specific class value
  • Three id selectors: used to select an HTML element associated with a specific id value

ImageImage

Using a class selector is done by placing a . followed by the name of the class value: See example: Due to long wording in my code, it’s impossible to see some tags being closed, don’t forget to close them in yours the </h1> and </p>

Image
2
Image
Image
Using an id selector is done by placing a # followed by the id value: Example below.
Image
Image
Image
Let’s take another look at “type,” “class,” and “id” selectors in action to see how CSS rules are applied:
Image
Image
Image
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:
Image
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.
Solution
First Image is HTML Second Image is CSS Put this in your Vs code

HTML

Image

CSS

Image

Selecting Nested Elements

Say we have a div element containing several HTML elements: In this HTML, there is a div (the parent element) with three children’s elements. The nested div also contains a single child.
Image
Img1: Remember that HTML creates a tree-like structure:
Image
Img2: To select for only the children of a certain parent element, you must indicate the parent element and then the child element, with a > bracket in between them.
Image
This mechanism can select elements with any nesting level by adding an additional selector separated by a space. Exp
INPUT HTML
Image
INPUT CSS
Image
OUTPUT
Image

Exercise

The code below includes HTML and partially written CSS. Do the following two tasks:
  • •Apply the border-bottom CSS property to h1 elements with a class or id attribute
  • •Apply the font-style CSS property to p elements with a class or id attribute
Image
I’ll solve it for you, don’t worry.

SOLUTION:

I’m sure by now you can figure which code is HTML and CSS Image

CSS

Image

One Comment

Leave a Reply

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