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

Reads 14,184

Best Introduction to CSS: Dear students, welcome to your 2nd class on CSS; if you are new to this whole thing, kindly follow me to avoid missing subsequent classes.

If you’ve already missed the previous classes or want to start from the beginning, please check my previous lessons here and all lessons in this course here.

Last lessons, we discussed the

Meaning of CSS

Creating CSS file and Linking it to HTML

CSS Selections and

Multiple CSS selections

Today we are going to talk about

 

Manipulating the box model

This section will go over many of the common CSS properties you can use to manipulate the box model. 
1. height and width
Use the height and width CSS properties to change the height and width of an element’s content area.
2. padding
To create space between an element’s content area and border, use the padding attribute. The padding property applies this spacing in various ways depending on the number of values you specify, see the example below:
When you specify the length as a percentage, the length is relative to the width of the parent element

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

You can also apply padding to a single side of the element using more specific CSS properties. These include
  • padding-bottom,
  • padding-left,
  • padding-right, and
  • padding-top.

You can also apply margin to a single side of the element using more specific CSS properties. These include

  • margin-bottom,
  • margin-left,
  • margin-right, and
  • margin-top.

Use the padding property to provide space between an element’s content area and border. As seen in the sample below, the padding property applies this space in a variety of ways depending on the amount of values you specify: These characteristics only allow a single value in relative or absolute length units:

Copy Code 


/* Apply 10 percent (of parent element's width) worth of padding to the bottom side of paragraph elements */

p {
    padding-bottom: 10%;
}
3. Border

As its name implies, the border CSS property sets the border of an element. The width can be given in absolute or relative units. The style can include things like dotted, groove, double, and solid. A full list of border styles can be found HERE.

Any valid colour value may be used as the colour. We’ll go through colour values in more depth in a subsequent session, but for now, we’ll utilise shorthand CSS colour values to express the colour property.

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

The border property can be expanded into more finely tuned properties such as border-style, border-color, and border-width. These properties can be further expanded to target a specific side, e.g. border-top-width, border-left-style, and so on.

let’s learn more in the next lesson

Relative Vs Absolute Measurements

Oftentimes, you will want to specify the length of the content area, padding, margins, etc. But how do we specify these lengths? The most common units used are percentages, %, and the number of pixels, px.
Percentages are a measure of length that is relative. When using the percent unit to indicate length, the length is measured relative to the length of the parent element:

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

Noticed the * sign in your CSS

This is a common technique called a CSS reset. Different browsers use different default margins, causing sites to look different by margins. The * means “all elements” (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.

Because we utilized a relative unit of measurement, the length of the h1 elements in the second div is half that of the h1 elements in the first div, despite the fact that both elements have identical CSS characteristics. Specifying the number of pixels, on the other hand, produces an absolute length measurement.

Absolute measurements are fixed and do not depend on measurements from other HTML elements to be accurate.

 

Border Radius

If you want to create borders that have rounded corners, use the border-radius property. You can also create elliptical corners by providing two values to border-radius, separated by a slash (/).

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

Margin

The margin property is very similar to the padding property, except it allows you to define the spacing around the outside of an HTML element past the border. Like padding, it allows you to define single or multiple values.

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

In the above example, the space between the green and black borders represents the margin between the <span> elements and their <div> containers. margin can also be broken out into more fine-grained properties to target a specific side, including

  • margin-top
  • margin-bottom
  • margin-right
  • margin-left.

CSS COLORS

Copy Code 


<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

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

The use of red, green, and blue parameters to create a colour is referred to as rgb values. You may define a colour by specifying the intensity of each colour property from 0 to 255. Drag the sliders below to view the colour palette you may create using RGB values:

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

Hex values

A color code consisting of a # followed by six hexadecimal digits is used to specify hex values. The color black would be represented with the code #000000, and white with the code #FFFFFF.

What are hexadecimal digits?

Hexadecimal refers to using base 16 as a numbering system. What exactly does this mean?

The most common numbering system uses a base of 10. This means that for each digit, there are ten possible values:

  • Ten different values may be expressed with a single digit (0-9)
  • One hundred (ten times ten) possible values may be expressed using two digits (0-99)

One number in a hexadecimal system represents sixteen potential values. The first 10 numbers are represented by 0-9, and the last six by A-F in hexadecimal notation.

Because each hexadecimal digit may represent 16 different values, two digits can represent 16 * 16 for a total of 256.

Using hexadecimal color values

The first two digits of the hexadecimal colour code indicate red, the third and fourth represent green, and the last two represent blue. This corresponds precisely to rgb values since each colour has 256 potential values (0-255):

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

Now that you have learned to display colorful fonts and backgrounds, let’s learn about font styling and web fonts.

CSS FONT STYLE

Font Selection Is Critical

Choosing the proper typeface has a significant influence on how readers interact with a website.

The appropriate typeface may help your business establish a distinctive identity.

It is critical to have an easy-to-read typeface. The typeface improves the readability of your writing. It is also critical to choose a suitable font color and text size.

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

Generic Font Families

In CSS there are five generic font families:

  1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
  2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
  3. Monospace fonts – here all the letters have the same fixed width. They create a mechanical look.
  4. Cursive fonts imitate human handwriting.
  5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

To achieve optimal interoperability amongst browsers/operating systems, the font-family field should store many font names as a “fallback” mechanism. Begin with the desired typeface and conclude with a generic family (to let the browser pick a similar font in the generic family if no other fonts are available). A comma should be used to separate the font names.

Text Alignment + Sizing

Text alignment

Text components are always aligned to the right of their container by default. To adjust the alignment of text inside an element, use the text-align attribute. There are four text-align values:

  • center: center the text
  • left: align the text to the left of its container
  • right: align the text to the right of its container
  • justify: the text will spread out to fill out the full width of its container

How to use them

Copy Code 


.centered {
  text-align: center;
}

.leftAlign {
  text-align: left;
}

.rightAlign {
  text-align: right;
}

.justify {
  text-align: justify;
}

Text sizing

The font-size attribute allows you to modify the size of your text. The font-size parameter accepts both absolute and relative values. The most often used absolute value is px, while the most commonly used relative values are ems and rems.

The em and rem units are both relative measurement values that function similarly to percentages in that they act as a multiplier in relation to another unit of measurement.

In terms of font-size:

  • 1 em corresponds to the font size of the element’s parent.
  • 1 rem is the font size of the root element of the whole HTML page.
  • To change the height of a line of text, use the line-height attribute.

HTML

Copy Code 


<html>
 <head>
   <title>Text Sizing with rems</title>
 </head>
 <body>
   <p class="small">Small Text</p>
   <p class="normal">Normal Text</p>
   <p class="big">Big Text</p>
   <div>
    <p class="small">Small Text</p>
    <p class="normal">Normal Text</p>
    <p class="big">Big Text</p>
   </div>
 </body>
</html>
CSS

Copy Code 


div {
  font-size: 200%;
}

.small {
  font-size: 0.5rem;
}

.normal {
  font-size: 1rem;
}

.big {
  font-size: 3rem;
}

Congratulations we have come to the end of this introductory CSS course. Be informed that CSS as a language is very diverse, and want is important is understanding the concept as a beginner.

The possibilities in terms of designs in CSS are endless and it evolves every day. The current trend is Neumorphism and Glassmorphism CSS. Google Search will help. You can also learn CSS libraries such as Tailwind or Bootsrap

See you in the JavaScript class.

 

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

20 Comments

  2. Nice one. Keep up the good work

    Reply
    1. Chionye Ogwugwa says:

      Thanks a million times bro. May Jah bless you for giving us this marvelous privilege for free.❤️

      Reply
  3. silas kingsley says:

    why do i find it difficult for my laptop to load images from this particular web page? does it has to do with the VPN of a thing? please help.

    Reply

  4. You awesome, may God bless you

    Reply

  5. Do one need to crane all these css properties? Because they seem alot

    Reply

  6. Thank you for all you do. Please can we get one more class on css it is still confusing even after going through the class like twice now.

    Reply

    1. you are right, the last few paragraphs on css is confusing.

      Reply

    2. you are right,
      the last few paragraphs on css is confusing.

      Reply

  7. Hi boss, thanks for the class.. I would need to go back to it again cos there are quite a lot I didn’t get.. Also, since the next class is on JavaScript can you pls maybe consider not holding any class this Friday? To enable us read up on it and get extra materials as well.. I’ll suggest maybe we can host a Space instead on Friday, I know a lot of people will need more clarifications on this particular class, that hexadecimal code for instance; I don’t know whether to cram/know the lines of codes used for that color slider, or just keep it and do copy and paste whenever I need?… gracias🙏🏽

    Reply
  8. Christopher says:

    Thank you Akgba Akin.

    Reply

  9. thanks for the wonderful job you are doing god bless you.

    Reply
  10. Ogungbemile David says:

    Thank you boss, more knowledge more money

    Reply

  11. Thanks so much Senior Akin. God bless u

    Reply
  12. Emenike Adeje says:

    Thank you sir for this opportunity. I’m grateful!

    Reply

  13. Please, I do not understand HEX VALUE AND HEXADECIMAL part of the class pls. And I would love to, thank you.

    Reply
  14. Gbadamosi Idowu says:

    Enjoy the class, perfectly dispatch for absolute beginner.

    Reply

Leave a Reply

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