Basic Course Of HTML And CSS, Part 3: More CSS

  • SHARE

We already learned a little of HTML in Part 1 and got familiarized with CSS syntax in Part 2. In this third part, we will find out more about CSS. At the end of Part 2, we were getting familiarized with pseudo-classes, well, there are more pseudo-classes to manage list styles and their elements (:first-child, :last-child and :nth-child)

Let’s begin with :first-child and :last-child

Some basic CSS More basic CSS

As the name suggests, these are pseudo-classes that allow us to assign different styles to the first and the last element of a list. As shown in Part 1, the father or list title is identified with the tag and the children or items with the tag. Now, to be able to modify other parts, we have to use the pseudo-class :nth-child(X) in which X will be replaced by a number, keyword or formula.

The pseudo-class :nth-child(X)

 the pseudo-class :nth-child(X)

We have to bear in mind, some elements that we place on our list must match with our CSS. Otherwise, one of the elements could be left without a style. To solve this, we can use keywords like odd and even.

Odd and even

Odd and even

The same effect can be achieved by using a formula instead of keywords:

A formula instead of keywords

A formula instead of keywords

Don’t be alarmed! The 2n indicates the browser that a style will be applied two by two, starting from 0; while 2n+1 indicates the same, but starting from 1. It’s another way to say even and odd.

Pseudo-elements

The CSS selectors, pseudo-classes, and every HTML elements are not enough to apply styles to some unique parts. Many times, the only way to select these particular items is by using pseudo-elements. The pseudo-elements syntax and pseudo-classes syntax are similar:

selector::pseudo-element { property: value; } #selector::pseudo-element { property: value; } .selector::pseudo-element { property: value; }

To play a little with the pseudo-elements, we’ll create an index4.html as a quick and easy example, to learn how to use ::before and ::after.

::before and ::after

::before and ::after

Pseudo-elements let us add extra content to the content that already possesses an HTML element. The ::before allows us to add content before the element, and the ::after allow us to add content after the element. You may think this lacks functionality, but it helps us to add icons and small details.

Combination of Elements

The items inside a CSS could combine to optimize the use of our rules with the following syntax:

selector selector { property: value; }

Let’s take a look at this example code to see how it would look.

We observe that although the article has the myarticle class and contains h1 and p, it doesn’t possess the styles of the .myarticle rule because these rules are only valid when inside a container with section1 id.

Learning CSS

Color, Lengths, and Percentages

Now, we’ll quickly learn without expanding to much, to assign another type of values.

Other type of values

The code above would give us the following image:

Other type of valuesColors

The colors by keyword can be achieved in CSS by writing the name of the color (in English) with the limitation that we only have few options. You can find the list of these colors here. Other formats you can use are RGB and RGBA. RGB colors are assigned with the RGB(X,X,X) function, where X are the parameters indicating the amount of red, green and blue. These values can go from 0 to 255. For the RGBA format, a similar function is used but with an extra parameter called alpha which regulates the color’s opacity. This is measured from 0 to 1, taking it as percentages (Example: 0.5 = 50%). This format possesses a wide range of colors to use: (255 * 255 * 255) = 16.581.375 million colors in addition to their shades. Lastly, we have hexadecimal colors, which are just the representation of red, green and blue in hexadecimal code. We can present them two ways: with three digits (#000) or six (#000000). In the example above, we placed the blue color first #0000ff or in its abbreviated form #00f. The abbreviated form can only be used when even numbers repeat: 00-00-ff= 00f.

Note: we can use capital letters and lowercase letters interchangeably.

Lengths

In CSS lengths are given in absolute or relative units, that allow us to define the size of the structural elements, letters, borders, among others. Within absolute units we have:

in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters px pixel (1 pixel = 1/96 inch) pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points)

The most used is the pixel, even though it has lost popularity lately. The relative units aren’t defined because its value references another one. Despite their apparent difficulty, they are the most used in web design due to the flexibility with which they adapt to different media. Among these relative units, we can find: rem, em, ex, ch; directly related to the font size, being em the most popular. The rem unit takes as a base the value of the font from the root document. Its use is very simple, if the root document has a 13px font, when we apply rem in any element, it will multiply the rem number by the value of the source document. For example, if with 13px we give the value of 4rem to an element, we would have 52px. In the case of the em unit the logic is similar, with the difference that instead of searching the root document, it searches for the closest father element with a defined font size. In the previous code, we can observe that the .father4  selector possesses a width of 70em; Meaning the number of pixels from the closest font multiplied by 70. In this case, it’s defined by the browser obtained from the root document: 16px.

Percentages

Percentages help us determine the size of the structural elements regarding other elements. In the example code, we can observe that selectors .father2 and .father3 possess a width of 70%, this means it will acquire a size of 70% of its father element (in this case, the body of the page). This works the same for fonts; we indicate font-size: 50%; the font of the child element will have a size of 30px.

Conclusion

This concludes the CSS bases. Later on, we will see in detail different uses and properties to give better shape to our website. In the meantime, I invite you to browse and play with your code to see how it changes. Remember you can download every code example used in DavecastGit. If this course has helped you so far, do not hesitate to share it on your social networks. 🙂

BOOST
YOUR COMPANY
David Castillo
READ MORE BY
Web Developer at 1Entity. T.S.U in Computer Science, Systems Engineer and a future Graphic Designer. Passionate about technology and programming development. In love of good food and in abundance.
MAKE YOUR BUSSINES
GROW
Join our newsletter and get exclusive content valued in more than 107$ For FREE
WANT TO READ ABOUT SOMETHING ELSE?
ebook ebook-mobile
x
MAKE YOUR BUSSINESS GROW
JOIN OUR NEWSLETTER
AND GET FOR FREE
EXCLUSIVE CONTENT VALUED IN MORE THAN 107$
No, thanks, I don't want my bussiness to grow
( No spam, we hate it as much as you do )