CSS fundamentals — Modern layout fundamentals

CSS Styles
Linking CSS to HTML
Selectors
- Nesting selectors

In previous lessons, we learned about markup using HTML. Many of these elements already have some kind of visual design; paragraphs are indented, links are underlined and colored, and headings are set to different font sizes. Usually, this is not enough to create full-fledged modern sites. Some styles just don't suit us, and some elements we want to style separately.

The CSS language was created to help visually design web pages. CSS stands for Cascading Style Sheets. It's this language that's responsible for the way our HTML elements will be rendered for the user in the browser.

CSS&HTML on a page

In this lesson, we'll break down the style sheets part of "cascading style sheets". What cascading is and how it works is something you'll read about in the next lesson.

CSS Styles

Any CSS styles, be they text color or entire animations, are written using the same formula: style name: value;.

To add a style to an element, you must use a selector. It specifies which element(s) to add our styles to. Let's take the following HTML markup as an example:

<p>Hexlet - hands-on programming courses. We help newbies become professional programmers, and help experienced developers gain new knowledge and grow professionally.</p>

Change the font size and color in this sentence. This can be done with the following CSS notation:

p {
  color: red;
  font-size: 20px;
}

What does this mysterious entry above mean? It can be divided roughly into three main components:

p is a selector. Here we're telling the browser to select all the paragraphs on the page. We'll talk about what kinds of selectors there are a little later
Curly brackets { }. They separate the selector from the rules. All rules are written inside these curly brackets
Properties. These are written according to the scheme below. The more you practice, the more different properties and values you'll learn. Don't try to learn them all at once. Always use documentation. Even experienced developers resort to it to remember the correct values for one property or another

CSS Selector

Let's look at some properties that will help you design your text:

font-size. This property allows you to set the font size. Over time, you will learn many different units you can use to write the value. Use pixels to start. It's a fairly straightforward unit of measurement that doesn't depend on what other styles are set for the text
color. This property helps you to set a new color value for the selected text. Color can be given in different ways. In addition, there's a large set of colors you can just write the name of in words. This is a great way to get to know the color property. You can look at how it's all written here
text-align. A property that sets the position of the text. It can take one of the following values: left, right, center, justify

Linking CSS to HTML

There are several ways to use CSS on a page:

using a special file
using the <style> tag in the HTML markup
writing the styles directly in the required tag This method is called inline notation

Let's deal with each method separately.

Using a separate CSS file

This method is one of the most convenient ones when it comes to actual development. Since there are usually a lot of styles in a given project, keeping them in an HTML file is not very fitting. This is because HTML files can get quite large, making it impossible to navigate them. To avoid this, you can create a separate CSS file. This file will have the .css extension, but the name can be anything you like.

Let's imagine a separate directory with the project has been created on our computer. It may look as follows:

site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

Let's add some basic information to the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Main file index.html</title>
</head>
<body>

</body>
</html>

Now we need to include the main.css file in our index.html file. We use a special link tag for this purpose. In this tag, you need to specify the href attribute, whose value will be the path to main.css. The link tag is specified in the head section.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Main file index.html</title>
  <link rel="stylesheet" href="../css/main.css">
</head>
<body>

</body>
</html>

Let's take a closer look at this entry: ../css/main.css. It can be roughly divided into three components:

../ - go up one directory. Initially, the index.html file is in the html directory, so we exit it into the site directory
css/ - go to the css directory
main.css - specifies the name and extension of the file we want to include

If our index.html and main.css files were in the same directory, the link would look like this: href="main.css".

Once the file is connected, we can write all the desired styles in main.css itself. They will automatically apply to our markup.

Using the style tag

The second way to use CSS is to use styles in a special style tag. There is no need to create a separate file and connect it to the HTML. In this case, the style tag is usually given in the head section. Although it's not strictly necessary, it's preferable to adhere to this structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Main file index.html</title>

  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>A paragraph with a font size of 20 pixels. The text is written in red.</p>
</body>
</html>

This method isn't the main one, but it's recommended for certain cases. This allows some styles to be displayed before the CSS file is loaded. You'll find out what styles you should be using as you progress on your way toward becoming a professional.

Inline styles

The last way of using CSS is via inline styles. They are connected using the style attribute in any tag in the markup. This is the least preferred way. It's hard to read, especially if the tag has a dozen styles. Also, you can't write styles in such a way that it affects all the tags at once, for example, if you specify a style for one <p> tag, it won't affect all the other <p> tags. You have to set each one separately. This will lead to having to constantly copy the styles.

Let's take the last example and add inline styles:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Main file index.html</title>
</head>
<body>
  <p style="color: red; font-size: 20px;">A paragraph with a font size of 20 pixels. The text is written in red.</p>
</body>
</html>

Selectors

Selectors are the cornerstone of all of CSS.

"The styles aren't as important as that to which they are applied" © Folk Wisdom

You can choose the elements to which the styles will be applied using selectors. This is an extremely powerful and flexible tool that enables you to choose not just by tag, but also by class, ID, mouse hovering, different attributes, or simply select only even or odd elements, etc.

Each selector is a topic for an entire course. Currently, we're interested in three main selectors, which can call basic selectors:

Tag selector. We used this selector throughout the whole lesson. The goal is simple: simply specify the tag that the styles will be applied to
Class selector. If you only want to select specific elements in HTML, you can give the tag a class with whatever name you like and add styles using the .class-name construct
ID selector. This is another case of selecting by an additional attribute of a tag. The main difference is in the HTML itself - the ID cannot be repeated within the same page. Each name can be used only once. Because of this, there's no way to set styles for an identifier and then use it on other elements. To select an ID, we use the construction #id-name, i.e., a # followed by the name of the ID

Let's look at all three selectors with a real example:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Main file index.html</title>
  <link rel="stylesheet" href="../css/main.css">
</head>
<body>
  <main class="content">
    <h1 id="main-title">Heading with id</h1>
    <p>Just a paragraph without a class or identifier</p>
  </main>
</body>
</html>

main.css

#main-title {
  color: white;
  font-size: 20px;
  text-align: center;
}

.content {
  background-color: black;
}

p {
  color: white;
}

After applying these styles, you'll get the following:

Black background in the main section. We used content class and the .content selector for this
The first level header is white, with a font size of 20 pixels, and is centered. The header has the ID main-title, so we were able to use the #main-title ID selector to add styles
All paragraphs will have white text. The tag selector was used for this purpose

Nesting selectors

When it comes to real development, it isn't always possible to use only these three kinds of selectors in the way that you've just learned. We often need to limit the area to which the styles will be applied. Let's look at an example.

<section class="news">
  <h2>News</h2>

  <article>
    <h2>Headline №1</h2>
    <p>Text</p>
  </article>

  <article>
    <h2>Headline №2</h2>
    <p>Text</p>
  </article>
</section>

<section class="stories">
  <h2>Stories</h2>

  <article>
    <h2>Story №1</h2>
    <p>Text</p>
  </article>

  <article>
    <h2>Story №2</h2>
    <p>Text</p>
  </article>
</section>

How do you get more news headlines? You can add a different class for each headline in the news. This is a good solution if you don't have a lot of news or if you don't need to enter new header styles for each section like this.

A simpler solution would be to use nested selectors. First, let's see how to solve our problem:

.news article h2 {
  font-size: 32px;
}

Let's look at what kind of selector was given. Here we specified a combination of three selectors: .news, article, and h2. You already know each of them individually. By separating them with a space, we've told the browser to "take all the h2 headers from the article that's inside the element with the news class, and apply styles to it." Read the selectors from right to left. This approach is called selector nesting. You can combine anything and go as deep as you like.

It's important to note that for convenience's sake, don't use too much nesting. Try to nest no more than 2 or 3 selectors.

It's important to understand that notation like .news article h2 will select all second-level headers in all article tags that lie within the block with the .news class. Let's modify the layout a bit to check it out.

<section class="news">
  <h2>News</h2>

  <article>
    <h2>Headline №1</h2>
    <p>Text</p>
  </article>

  <article>
    <h2>Headline №2</h2>
    <p>Text</p>
    <section>
      <h2>Related news</h2>

      <article>
        <h2>Related news №1</h2>
        <p>Text</p>
      </article>

    </section>
  </article>

</section>

We've added a "Related news" block to the second bit of news. The best part is that our font-size: 32px; the rule will apply to both the "Related News" title and the "Related News №1" title. This is so that both headers, which are in the block with the .news class, are somehow included within the article tags.

This type of selector is called a context or descendant selector. We use it to select all the descendants that are found inside the selector on the left.

descendart combinator

So, how do we select only those headlines that relate directly to the news and not to similar news or headlines in other sections? This is where the child selector comes in. Its purpose is to select only those elements that are directly inside the block we need. Without taking into account all the other nesting. We use the > symbol to specify this selector. Let's specify that we need only those article tags that are inside .news, and we need the headlines that are inside those article tags. This is done as follows:

.news > article > h2 {
  font-size: 24px;
}

Now, the font size for the "Related News" and "Related News №1" headers will not be increased because we've given a more specific selector.

child combinator

Do it yourself

Create index.html and style.css on your computer. Link a styles file. Mark up any text you like and use the properties we've learned in this lesson to format the text
Try copying the examples in this lesson