Semhar Hidad

Posted on Jul 13, 2023

Introduction to CSS

#webdev #css #frontend #beginners

What is CSS?

CSS is an essential part of the three main pillars of front-end web development. HTML is the structure and foundation of the website, the elements that contain the content. CSS is the style and design of the website, color, font, sizing, and layout. Finally, JavaScript is the website’s functionality, buttons, forms, and data processing.

A common analogy that’s used to explain how the three work together is how a house is built. HTML is the foundation, brick, and mortar, CSS is the paint and interior design, and JavaScript is the electricity and plumbing working when you flip on a light switch or turn on the kitchen sink.

All three tools work together in creating solid, beautiful functional websites, but it’s helpful to focus on one language at a time, especially when just beginning.

This guide will focus on CSS, which stands for Cascading Style Sheet and was created in the early 90s. Before CSS, websites relied entirely on poor and limited HTML design. While HTML is vital and provides the content of the site, such as text and images, CSS provides the styling of the content.

This is why it’s known as a styling language. The first part of the name “cascade” stands for the algorithm that CSS uses when choosing which styling rules to apply and in what order.

How to add CSS to a website

As mentioned earlier, CSS is applied to the content in HTML which is contained in an element. An element consists of tags, attributes, and content.

<h1>This is my heading</h1>

Element = Opening tag, content, and closing tag.

There are three ways to apply CSS styling to an HTML element: Inline, Internal, and External.

H2 Inline

As the name suggests, this method involves applying CSS directly in the same line as the HTML element. CSS is applied as an attribute to the element using the keyword style.

<h1 style="color:red">This is my heading</h1>

-You apply the CSS style inside the opening tag of the element.

This method is simple and easy to add, but it’s not recommended for styling the entire website but instead for targeting a single element.

Internal

This method involves placing all of the CSS styling rules inside the header section of the HTML file.

<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

Using this method, you can target multiple elements and apply different styling rules to each. Internal is great when you only need to style a single html file, however, it’s not recommended for targeting multi-page websites. This is because the CSS styling located in the head section of the file only applies to the single html file, and not the rest.

External

This method involves creating an external style sheet, placing CSS styling inside the sheet, and then linking all html files to this sheet. By convention, most developers name this sheet “styles.css”. You can name the file whatever you like as long as the extension ends in CSS.

To link your HTML files to the style sheet, use the link element with the rel and href attribute. This command tells the file where to pull CSS styling rules from.

<link rel="stylesheet" href="style.css">

-rel represents the relationship and href represents the location of the style sheet.

This method is recommended in general, but especially when you are working with a multi-page website. Otherwise, you will need to style each page individually and this could lead to unnecessary complexity and inconsistency in your website.

H2 Syntax of CSS

The format of CSS styling includes a CSS selector, curly brackets, a property/value relationship separated by a colon, and a semi-colon to end the line of instruction.

The CSS selector is what we apply the CSS styling to. It can be an element, class, or ID.

h3 {
    background-color: blanchedalmond;
    font-size: 24px;
    border-radius: 10%;
}

To use an element as a selector simply type the name of the element

.container {
    display: grid;
    gap: 20px;
    row-gap: 40px;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr;
}

To use a class as a selector be sure to include a period before typing out the name of the class. Note: The class must be typed exactly as it appears in the HTML file.

#intro {
    height: 200px;
    width: 200px;
}

To use an ID as a selector be sure to include a pound sign before typing out the name of the ID. Note: An ID can not begin with a number.

Curly Brackets

When using the internal or external method the CSS styling must be contained within a set of curly brackets.
{…}

Property/Value

CSS styling rules are stated using a property/value relationship. The pair are separated using a colon.

color:red;

Color is the property of the element you would like to style and red is the value you would like the element to be.

Semi-colon

The semi-colon at the end of the line of instruction is popular in many programming languages. This instructs the computer that there are no more changes to be made and to move on to the next line.

CSS Styling Options

Now that we are familiar with how to add CSS to our website and the proper syntax rules of CSS, let’s focus on what we can style with CSS.

Colors

CSS allows you to set the color of everything, from the color of the text to the color of the background. There are three ways to annotate colors in CSS syntax. These include Named colors, Hexadecimal, and RGB.

Named Colors are the easiest method because they allow you to style CSS by simply stating the name of the color. However, there are currently 147 named colors available that most browsers recognize.

color:blanchedalmond;

Hexadecimal Colors are represented in hexadecimal notation, beginning with a pound sign. There are over 16 million color options to choose from.

color: #874f87;

RGB stands for red, green, and blue. Each color is represented with a number from 0 to 255 that represents the intensity of each hue. The higher the number the more intense the color.

color:rgb(73, 124, 23);

H## Font

The type of font you choose for your website affects the whole mood of your website so it’s vital that you have plenty of options to choose from. CSS gives you lots of flexibility when it comes to styling your font.

p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
font-style: italic;
text-align: center;
}

CSS offers several different property values that you can set, including font family, size, weight, and style.

Visit fonts.google.com and choose from thousands of different font styles. Select the font style and copy the link into your HTML file.

This tells your website what font style you have chosen and where to find the font you have selected.

Conclusion

CSS is a fantastic styling language that offers you the flexibility and design that your website needs. Now that we have covered the basics of CSS, be sure to stay tuned for future articles where I cover Sizing, Display, Float, Flexbox, Grid, Bootstrap, and more CSS related topics.