Intro to CSS - Moe's Link

CSS is the acronym for Cascading Style Sheets. We use CSS along HTML to style websites. As you may know HTML creates the website. It only creates the skeleton or markup for the pages. To create a great looking website you need some styling and it is possible using CSS. We may change font, size, Color, and a lot more with the power of CSS styling. This brief tutorial shows a great introduction to style any website. There are endless possibilities of how to style your website and here you are going to start it. This tutorial is only an Intro to CSS. Once we start web development we learn something new about styling every day. Let us start learning how to style websites; it’s fun.

Many ways to implement CSS in HTML

There are many ways to style your HTML websites using CSS. We can choose the way we want to style them. As you can see in the examples below there are three ways to add CSS to HTML.

Inline using the “Style” attribute

One of the ways to implement CSS into HTML is using the inline “style” attribute. The style attribute is very useful to apply styling only to the present line. We can change text color, margins, and many other things in the same line. Only one line of code will contain the style. It’s not the most practical way to implement CSS.

Using the <style> HTML tag

Another way to style HTML is using the <style> tag. It’s very useful to apply style to websites. It must be placed inside the <head> of the HTML document and style for the present web page is applied. The only issue with the <style> tag is that it’s only for the document you are using. We cannot use it outside the document. If we create many websites for the same domain using HTML. We will have to create style for each page. Sometimes it’s not very practical to do that. It is better to reuse code for the whole website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        h2{
            color:red;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>

</head>
<body>
   <h2> Hello World!</h2>
</body>
</html>

Reusable CSS code

The most practical way to implement CSS in HTML is using reusable code. It is possible by placing the <link> tag inside the head. As shown in the example below. The link tag can be used by all your HTML pages. The value of the “href” attribute indicates the URL of the CSS document. The “rel” attribute is the relationship of the linked document. Most times its value is “stylesheet.”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="styler.css" rel="stylesheet" type="text/css">
</head>
<body>
   <h2> Hello World!</h2>
</body>
</html>

After the brief explanation of how to implement CSS in HTML let’s dive a little bit more. We are going to learn a lot about CSS. It’s going to be fun.

To apply style to any HTML we need to specify the part of the document we want to style in a new line; then open braces and write CSS code. Every line of CSS code specifies the style we need to apply, then we use a colon (:) to specify the value we need to apply, and then we need a semicolon (;) to end the line. It’s better shown by examples. Let us begin.

CSS Comments

In most languages comments are very useful to developers. They are in the code but they do not have any effect in the code. They are only for developer reference. In CSS we can write comments with (/*) to open line of comment and (*/) to finish line of comment.

/* This is a CSS comment */

Vendor Prefixes

We are sure you know there are different browsers. Microsoft edge, Internet explorer (Almost discontinued), Opera, Mozilla Firefox, Google Chrome, and many others. The reason we have vendor prefixes is because sometimes browsers do not recognize the style at first hand. We can see some of the most used vendor prefixes in the example below.

-moz- /*used by Mozilla Firefox */
-o-   /*used by older versions of opera */
-webkit- /* used by Google Chrome */
-ms-   /*used by Microsoft Edge or Microsoft Internet Explorer */

Typography

The typography is most used by the text elements “h”, “p” and many others which are text. We will start changing the default type of font used by HTML. To perform that task we need to modify the default “font-family” of the element as shown below. We can use many font-families for the same element. They only need to be separated with a comma. If the browser does not recognize the first one it will try the next option.

If you are practicing along the way you are going to see the change on the text and it’s really nice. Why don’t we start changing the size of the font? Using “font-size” styling is really nice. There are different units to change the font size; the most common are Pixels (px), percentages, ems, rems, etc. See the example below and try it yourself. It’s fun.

Font Color

By now we changed the font style and the size. It is really nice. Why not change color? That’s possible using CSS. To change font color we only need to specify the element we need to modify; and apply the “color” styling as you may see in the example below. Color can be applied using different types of color values. The most used are “Color name” (red, green, blue, yellow, etc.). We can also use the “Hexadecimal value of the Color” where “0000” is black and “FFFF” is white. Another way to change color is using RGB values. That’s the value of the mixture of red green and blue. Especially the Hexadecimal and RGB are hard to remember. There are many tools to help you with that. This one shows the color names with RGB values and Hexadecimal equivalent.

Colors in CSS And Opacity

As shown above There are many ways to implement colors in CSS. When we implement color we can also implement opacity. We can add the opacity property to any css color. Opacity values are from 0 to 1 where 0 is the most opaque. in RGB values we can also use the alfa property for opacity. The value instead is going to be RGBA. Here we show you another tool where we can see the codes of colors with opacity.

Align Text

As we have seen above we are able to change the font, the color, the size, and now we are going to learn to align text where we want it. To align text we only need to use the text-align property as shown below. We can align it to the center, left, right, or justify the text.

Imported Font

We can also import any type of font from an external source. After CSS3 came to the market some not supported forms can be imported using the “@font-face” element. We can specify the font family name and then the URL related as shown in the example below.

h2{
     @font-face {
        font-family:"Open Sans" ;
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"));
    };

Text Decoration

As you may have seen in plain HTML when we create a link the text is blue and there is a line under the text. We are able to fix that “problem using text decoration as shown in the example below. The <a> tag can be modified using the same text configurations we saw above and we can also add text decoration to any text including <h> and <p>. The example below shows how text decoration works

Text Transform

By now we have seen many ways to format text in CSS. The Text transform as stated transforms the text. You can capitalize pieces of text, also you can transform text to upper case or to lower case etc. by only using the text-transform property as shown below.

Sectioning Elements

By now we have seen how to deal with text though there is a lot more to cover. We are going to see it along the way. Now let’s deal with some sectioning elements. As you learned before there are many HTML elements and the <html> tag is the root of all of them. The <body> tag is where we place the visible part of our HTML; now we are going to learn how to style the body and elements with children such as lists, forms and many others.

Let’s start styling the body. Style applied to the body is also applied to <div> <section> and any other sectioning block.

Adding Background color

It’s possible to add background color to any section of HTML using the background-color property. It’s really easy.

Adding a Background image

To place a background image and style is also very easy. We only need to use the background-image property and specify the URL of the image. We can also style the background image to cover the whole image, no repeat and many other configurations shown in the example below.

Borders

CSS treats every HTML element as an individual box. We can add borders to text though it is not very useful as in other HTML elements. Now we show you how to apply borders to text in some HTML elements. We can add different types of borders to any HTML element just by using the “border-style” property as shown below. We can also add borders to any side of the element as shown below. The order should be top, right, bottom, left. We here also see a little introduction of the HTML class attribute used in CSS.

Border Color

To apply color to any border is also possible using the border-color property as shown in the example.

Border Width

Also, we can set the width of any border by only applying the property of “border-width”. We can set our borders in the styling unit we wish. Most times we use pixels. The example below is a simple example of border width.

Border Shorthand

We are able to set the border style, border color and border width in only one line of code. We can use the “border” property in order to get the three of them only using one line of code. The example below also shows we can use the “border” property.

Padding

Padding is used to generate space around the element. We can add the padding property to any HTML element and it will add some space. As with borders we have the same order if we want to add padding only to some parts of the element (top, right, bottom, left). Also we can specify the part we want to add the padding as shown below (padding-left, padding-right, etc.)

Margin

Margin and padding are very similar and use the same configurations. The difference between margin and padding is that margin is the space around an element border, and padding is the space around an element border and its contents. Margin controls the outside of the element, and padding the inside of the element.

The “class” and “id” attributes

As you may have seen in HTML we have the “class” attribute and the “ID” attribute. They are very useful to style websites. If we have a section or an element with the class attribute we can style it in CSS using a dot (.) followed by the class name. We can add a class to many elements or sections of our HTML and style will be applied to all of them. Also id attribute is very useful when styling. As you may know any HTML element must have a unique ID so style is going to be applied only to the part containing that ID. We can apply style to any section with ID with the number or pound sign (#) followed by the Id name.

Styling Elements with Children

We have seen how to style many single elements so far. Although we are going to continue learning CSS all the time because most of the time there is something new and also we will continue learning every day about CSS. We have seen sectioning elements and some of them can have children elements. We can style them the way we want; though it’s not been shown before. We are going to show you how to style children elements with elements which have children by default such as “lists”, “tables”, and “forms”.

Styling a list in CSS

As we may know we got two types of lists in HTML. One of them is <ul> and the other is the <ol>. Unordered list and ordered list.

As you can see by default an <ul> is styled by bullets. We can change the style using the “list-style” property. Below we show you how it works.

Also we can see that an <ol> is numbered. We are also able to change the style of the numbers as shown below.

Styling list Children

The only child of a list is the <li> element. We can style it as we style text. The element <li> can be the child of <ul> and <ol> and depending on the parent it contains bullets or numbers. To Style any children we first specify the parent element and then the children. If we also defined classes in any children we can style them. Sometimes it is necessary to add new sections of CSS for parents and children with classes as shown below.

Styling Tables

Tables are the other HTML Elements which must have children. Once we create a table in plain HTML we do not get borders. Borders are very useful in the tables. We can also add padding, margins etc. As we may know tables contain many children. The most used are Table Row <tr> and table detail <td> as we also have Table Headers <th> and if we group the headers and footer we have the <thead> tag and the <tfoot> tag. The example below shows how we style tables. We added some classes to the tables so we have a more detailed table.

Styling Links

As you have seen so far. Links can be styled as we style any text. We can change the font, size, remove or add text decoration as we saw before and many other things. We here show you a brief example of how to style a link. Also with links we have the visited property which can add some style once the link has been clicked (visited). We can hover over a link and the link will also can change the style while we hover overr it. The example below shows how link properties are used.

Styling Images

We can also style images in CSS. We could see it as limited because an image already has its own style; but some of the styling on any image can include the border, height, and width. These are the most basic styles of an image. After CSS3 came to the market we are also able to add rounded corners using border-radius property, and also we are able to add some opacity though in images it’s not very common. The example below shows you many ways to style an image using CSS.

Styling forms

Though sometimes we may think forms do not need style, we can be wrong. We can style any form using CSS. As you may know forms also have children. The main child of a form is the <input> element. To the <input> of type text or password we can add width, border-radius and many other properties as shown below. As we also learned in HTML we have the fieldset. It’s where a form elements can be grouped.

Input type submit

As you may have seen before, Input type submit is a button. We can add some style to the button as we can add style to the text and password. Also we can create a button with rounded corners, and we can also change the color, font, size, etc. we show you in the example below how we style an input of type submit. Using CSS we can style any other type of button using the same style.

Hover Property

The hover property is not only used in forms. We can use it in all the other elements; but in forms they could be very useful. Hover is when we pass the mouse around the element. If we want the form or input to do something when the mouse is over. We use the hover property as shown in the example below. It changes color.

Radio Buttons and Checkboxes

It’s also possible to add some style to radio buttons and checkboxes. As you may know they have labels which you can style to your desire. Also using an ID or class we can style these elements. The example below shows some checkboxes and radio buttons with some style applied.

Dropdown Lists <select> <option>

It is also possible to style dropdown lists. We can change fonts, color, and background, use hover, and also style them with classes and ids. We show you an example below of how to style a dropdown list.

The Display property

The Display property is very useful to display inline elements as block elements and vice versa. One example of it is a menu. Nowadays we have the HTML <nav> tag; but we can also display a <ul> as an inline element and create a navbar as shown below. There are many other elements which can be displayed as block or inline; but we are not covering them in this tutorial.

CSS Position

Position is very important to style HTML. There are three main types of positions in CSS. Those positions are “Relative,” “Absolute,” and “Fixed.” A brief description of the different positions is shown in the example below. Absolute position is as its name implies; it’s absolute. Element is going to be only in one place even when we scroll down. Relative Position is relative to its normal position. It means an element with position relative can change its position depending on the circumstances. Fixed Position is similar to relative; but it’s relative to the viewport not the element.

Website Responsiveness

I remember a few years ago we only had desktops to display websites. Nowadays we have a lot of devices where we can see websites. When a website is responsive is when it can be displayed in all devices without losing its style or missing content.

@media Property

During these days we can achieve responsiveness using the “@media” property. The media property applies style according to the screen size as shown below. With practice, we can become experts in designing responsive websites, but here we only have a brief example. Note that the @media property is not compatible with all browsers.

Float Property

In CSS the float property is used to place an element in a specific place on browser. Some developers do not use it a lot; but sometimes it’s very useful and practical. We can flow any element to the right and left as shown in the example below.

Percentages

Along this tutorial we have styled using pixels and only a few times percentages. For responsiveness is very practical to use percentages in all elements. When we use percentages screen size changes are proportional to the screen. We can use percentages to size everything instead of pixels.

Flexbox and Grid

The display property is very useful for website responsiveness. As you may know we can group elements in a <div> or a <section>. The elements inside are the children, and we can display them grid or flexbox; but as is stated before, you will learn CSS along the way and with practice. Flexbox and Grid different tutorials. We only show you a brief example of how they perform and how to display grid or flex.