How to Create a Website – Getting Started With CSS

After getting started with HTML, the next topic of discussion is about styling the HTML elements. Fascinatingly, this just got better. CSS, Cascading Stylesheet in full, makes this easier and cooler.

An external CSS stylesheet can be applied to any number of HTML documents by placing a <link> element in each HTML document. The attribute rel of the <link> tag has to be set to “stylesheet”, and the href attribute to the relative or absolute path to the stylesheet. While using relative URL paths is generally considered good practice, absolute paths can be used, too. In HTML5 the type attribute can be omitted. Yet, It is recommended that the <link> tag be placed in the HTML file’s <head> tag so that the styles are loaded before the elements they style, otherwise, users will see a flash of unstyled content.

Try this out:

Example

hello-world.html
style.css

Make sure you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your HTML file then no path is required (like the example above) but if it’s saved in a folder, then specify it like this:

<link rel="stylesheet" type="text/css" href="foldername/style.css">

CSS enclosed in <style></style> tags within an HTML document functions like an external stylesheet, except that it lives in the HTML document it styles instead of in a separate file, and therefore can only be applied to the document in which it lives. Note that this element must be inside the <head> element for HTML validation (though it will work in all current browsers if placed in <body>).

<head>
   <style>
      h1 {
        color: green;

text-decoration: underline;

}

     p {

font-size: 25px;

font-family: ‘Trebuchet MS’, sans-serif;

}

      </style>
</head>
<body>
      <h1>Hello world!</h1>
      <p>I ♥ CSS</p>
</body>

Using inline styles to apply styling to a specific element.

Note that this is not optimal. Placing style rules in a <style> tag or external CSS file is encouraged in order to maintain a distinction between content and presentation.Inline styles override any CSS in a <style> tag or external style sheet. While this can be useful in somecircumstances, this fact more often than not reduces a project’s maintainability.The styles in the following example apply directly to the elements to which they are attached.

<h1 style=”color: green; text-decoration: underline;”>Hello world!</h1>

<p style=”font-size: 25px; font-family: ‘Trebuchet MS’;”>I ♥ CSS</p>

Inline styles are generally the safest way to ensure rendering compatibility across various email clients, programs and devices, but can be time-consuming to write and a bit challenging to manage.

Class Name Selector

The class name selector select all elements with the targeted class name. For example, the class name .warning would select the following <div> element:

<div class=”warning”>

<p>This would be some warning copy.</p>

</div>

You can also combine class names to target elements more specifically. Let’s build on the example above to showcase a more complicated class selection.

CSS

.important {

color: orange;

}

.warning {

color: blue;

}

.warning.important {

color: red;

}

HTML

<div class=”warning”>

<p>This would be some warning copy.</p>

</div>

<div class=”important warning”>

<p class=”important”>This is some really important warning copy.</p>

</div>

In this example, all elements with the .warning class will have a blue text color, elements with the .important class with have an orange text color, and all elements that have both the .important and .warning class name will have a red text color.

Notice that within the CSS, the .warning .important declaration did not have any spaces between the two class names. This means it will only find elements that contain both class names warning and important in their class attribute. Those class names could be in any order on the element. If a space was included between the two classes in the CSS declaration, it would only select elements that have parent elements with a .warning class names and child elements with .important class names.

ID Selectors

ID selectors select DOM elements with the targeted ID. To select an element by a specific ID in CSS, the # prefix is used.

For example, the following HTML div element …

<div id="exampleID">
     <p>Example</p>
</div>

…can be selected by #exampleID in CSS as shown below:

#exampleID {
     width: 20px;
}

NOTE: The HTML specs do not allow multiple elements with the same ID. Check out this HTML Standard at W3C

Multiple Selectors

When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your style sheet. Use a comma to separate multiple grouped selectors.

div, p { color: blue }

So the blue color applies to all <div> elements and all <p> elements. Without the comma only <p> elements that are a child of a <div> would be red.

This also applies to all types of selectors.

p, .blue, #first, div span{ color : blue }

This rule applies to:

  • <p>
  • elements of the blue class
  • element with the ID first
  • every <span> inside of a <div>

Comments

            /* This is a CSS comment */

div {

color: red; /* This is a CSS comment */

}

/*

This

is

a

CSS

comment

*/

div {

color: red;

}

There are a lot more on CSS whilst the basic is just introduced. You can check out full documentation and tutorials on all the major topics on styling rules, animations, element display, typography and lots more. These sites are highly recommendable:

2 thoughts on “How to Create a Website – Getting Started With CSS

  • game
    December 17, 2021 at 7:38 pm

    Thank you for the insight this is truly a great article.

  • aqw
    December 17, 2021 at 8:11 pm

    Thanks for the post it is truly an informative post, thanks for including it.

Leave a Reply

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

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

error

Enjoy this blog? Please spread the word :)