Basic Course Of HTML And CSS, Part 2: Learning CSS

  • SHARE

In this entry, we will continue with the basic course, this time with CSS. You can see Part 1 of the course by clicking here. To remember a little, with HTML we get the following site:

It is relatively functional but has no personality or all the elements we want. To polish the remaining aspects, we will use CSS.

CSS (Cascading Style Sheets) it is the brother of HTML, and it is another type of code that all browsers understand by default. CSS defines the styles of our site: colors, fonts, sizes, among others.

To understand it a little better, we may think that we have a bicycle in which the HTML corresponds to the parts (body, wheels, brakes, seat) and CSS to the characteristics (body color, wheel thickness, brake power, Shape and height of the seat).

One of the easiest ways to put styles to your site is to use the <style> tag, within which we place our code.

Let’s do the test by modifying some elements:

To see the results, we open our index.html in a browser.

Syntax of a CSS

In a CSS there must be rules, selectors, properties, values, and separators.

Selectors:

The selectors define zones or elements of our web page that we will then locate in the HTML.

In this case, the body selector refers to the HTML tag of the same name that relates to the entire body of our site. Selectors can also refer to id and class attributes.

Let’s work on another file that we’ll call index2.html to make the changes and see how they look.

Note: You can find this sample file here.

We have a simple page without any style to which we will add a universal selector. A universal selector applies the rules described within it to all elements that are in our HTML. It is represented by an asterisk (*).

When applying a color inside the universal selector, all our elements should take that color unless otherwise indicated with another selector.

If we want to define a style for each category of an element, we should use a type selector. This selector applies different styles at various items that we must then identify in the HTML.

If we want different styles for our paragraphs and titles, we simply use the references p and h1, h2, etc.

Following the code above, our site should look like this:

We can also define the style of distinct zones by assigning them an ID using a hashtag (#). For this, we use the id selector, in which we assign more fundamental characteristics for different zones of our site. Example: #section1

Notice that section 1 is found in both CSS and HTML. This would be the result:

If we want to apply even more distinct styles for subdivisions of our website, we can use a class selector. This selector allows us to work with the class attribute and is indicated by the utilization of a period (.). Example: .myarticle

We copy and paste the same text to simulate the existence of two different articles. You can try changing the phrases in your file to understand and appreciate the changes better.

Having read the operation of the selectors, we can play a little with the features to see how our site changes.

Pseudo-classes:

A pseudo-class is used to define a unique state of an element. To write them we need to place the name of the selector followed by a colon (:) and the name of the pseudo-class, like this:

Selector: pseudoclass {property: value; }
#selector: pseudoclass {property: value; }
.selector: pseudoclass {property: value; }

Pseudo-classes are used to define the style of an element when it is focused, when a user passes over it (hover), or to mark the difference between a visited and unvisited link.

We will create an index3.html file to work with pseudo-classes separately.

Keep learning CSS

Following this code, we can visualize the following site in our browser:

Let’s start with the pseudo-classes based on the history of the link; this will show by default <a> blue tags when we had not visited that page and purple when we visited it (see the previous image).

To modify it, we will use the corresponding pseudo-classes :link (not visited) and :visited (visited).

We can define the colors by their name, but for more certain tones we must use their codes. Get here the list of color codes.

If we visit the link to davecast, we will see how it changes its color.

There are also pseudo-classes depending on user’s behavior (:hover, :active and :focus) that work under the legend and input tags.

There are other tags that although we do not use it is important to know them.

  • Form: it is used to contain forms.
  • Fieldset: it is used to include the elements of the form. Within it, we use legend for the titles and input for the information to be entered by the user.

The pseudo-class :hover refers to when the user passes over a zone or link with the pointer. If we apply the code above, our link or text should change its color.

The pseudo-class :active refers to the click action. When the user clicks our element, it will change color for the duration of the click.

These two pseudo-classes can be placed on any HTML element.

The pseudo-class :focus is only allowed on the elements that require the use of the keyboard.

We have reached the end of the second part of the basic course.

In the next part, we will see more pseudo-classes and learn a little about the pseudo-elements, then we’ll learn to combine and assign values in our style sheet correctly.

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 )