1: Introduction to CSS


You have completed the HTML section of this tutorial and learned the basics of HTML document structure, elements, and formatting. An HTML document with all of these basic features is technically fully functional on its own but it lacks the color and appeal many have come to associate with websites. In this next lesson, you will learn to pair HTML with CSS to improve how HTML elements display in web browsers.

 

What is CSS?

CSS or Cascading Style Sheets is a style sheet language that determines the appearance of a web page by changing the appearance of HTML elements. Since plain HTML is unappealing, web developers use CSS to improve the appearance of web pages.

 

How is CSS used?

CSS can be used in a variety of applications. CSS can change the size and color of text, resize images, add borders, and even help with device compatibility.

 

How does CSS look?

CSS can assign specific style properties to an HTML element in three different ways: inline with an element, inside a <style> </style> element in an HTML document, or in its own CSS document. We will focus mostly on adding inline styling but all three methods of CSS styling will be discussed below.



This is an example of inline CSS with HTML elements.

  • Change color:blue to color:red in the heading element
  • Now change the other colors in the code to new colors








2: Basic inline CSS properties


Inline CSS properties quickly add style declarations to individual HTML elements. If you are looking to add style to one specific element, inline CSS in an excellent option.

 

Inline CSS declarations

HTML document with inline CSS declarations

<!DOCTYPE html>
<html>
  <body>
    <p>This is a normal paragraph.</p>
    <p style="color:blue; font-size:25px">This is a stylized paragraph.</p>
  </body>
</html>

This is a normal paragraph.

This is the stylized paragraph.

Above is a basic HTML document that uses CSS to alter the appearance of a paragraph element. The paragraph opening tag now has an attribute for CSS called style. Within the attribute are the color and font-size properties which each contain a value. The attributes and their respective values each form a CSS declaration: property:value. If you look below the code, you can see that the paragraph text created is blue and noticeably larger than it was originally.

 

Inline CSS formatting

Inline CSS declaration format

<p style="property:value">This is a paragraph with one CSS declaration.</p>
<p style="property:value; property:value">This is a paragraph with two CSS declarations.</p>

Inline CSS uses a style attribute in the opening tag of an HTML element followed by the declaration of a property and a value all in quotation marks. Multiple declarations listed in the style attribute are separated with a semicolon: ;.

 

Common CSS properties

color property

<p style="color:green">This is a paragraph with green text.</p>

This is a paragraph with green text.

Font color is determined by the CSS property color. This property accepts color names (blue), hexadecimal format (#007bff) and RGB triplets (rgb(0, 123, 255)).

 

background color property

<p style="background-color:red"> This is a paragraph with a red background. </p>

This is a paragraph with a red background.

The background-color property changes the background color of the text. Like color, this property accepts color names (blue), hexadecimal format (#007bff) or RGB triplets (rgb(0, 123, 255)).

 

font size property

<p style="font-size:30px"> This is a paragraph with 30px font. </p>

This is a paragraph with 30px font.

The text size is determined by the CSS property font-size. The property accepts pixels (12px) or scalable units called root ems or rems that usually represent multiples of 16px in the default browser. In this case, 3rem equals 48px.

 

height and width properties

<div style="height:100px; width:200px">
    <p>This is a paragraph with a set height and width.</p>
</div>

This is a paragraph with a set height and width.

The height and width of an element can be altered with CSS properties height and width. The property accepts pixels or rems and works well for changing the size of an image.

 

text align property

<p style="text-align:right">This is a paragraph aligned to the right.</p>
<p style="text-align:center">This is a paragraph aligned center.</p>
<p style="text-align:left">This is a paragraph aligned to the left.</p>

This is a paragraph aligned to the right.

This is a paragraph aligned center.

This is a paragraph aligned to the left.

Text can also be placed center, left, or right in the browser window with the CSS property text-align



Let's review the basic CSS properties. Below is a Contact Us section of code. Place the following CSS declarations in the correct style attributes.

  • body element - add a dark gray background with background-color:#343A40
  • division element - give style attribute width:400px; color:#F8F9FA
  • heading one element - center the text with text-align:center
  • 1st paragraph element - change the size of the text with font-size:22px
  • 2nd paragraph element - change the size of the text with font-size:18px



Check code





3: More advanced CSS properties


There are numerous different CSS properties, not all of which will be discussed in this tutorial. The common CSS properties mentioned above are utilized more often than the ones to follow, but all of the ones discussed tend to be declared relatively often in HTML styling.

 

Borders

CSS border properties are used to add borders around text, images, and other HTML elements. Border color, line-width, corners, and other style properties can all be altered to customize the appearance of the border. Below are only the main CSS border properties.

 

border-style property

<p style="border-style:solid"> This is a paragraph with a border.</p>

This is a paragraph with a border.

The border-style property creates a stylized border around an element. Some of the allowed values include solid, dotted, double, dashed, and none.

 

border-color property

<p style="border-style:solid;border-color:green">This is a paragraph with a green border.</p>

This is a paragraph with a green border.

The border-color property changes the color of a border created with border-style. The color value can be a color name, hexadecimal, or RGB. The border-color property does not work without a border-style property.

 

border-width property

<p style="border-style:solid;border-width:10px">This is a paragraph with a 10px border width.</p>

This is a paragraph with a 10px border width.

The border-width property changes the width or thickness of a border-style. The width value uses a unit of size such as px but also accepts the pre-defined values of thin, medium, or thick. The border-width property also does not work without a border-style property.

 

shorthand border property

<p style="border:5px dotted blue">This is a paragraph with a 5px blue dotted border.</p>

This is a paragraph with a 5px blue dotted border.

The border property can be used in place of separate style, color, and width properties. The three values can be called within the border property in any order.

 

Margin and padding

Margin and padding are important CSS declarations used to create spacing between elements. CSS padding creates inner space around an element's content while margin creates outer space around an entire element. In other words, padding creates spacing within the borders of an element while margin creates space outside of an element's borders.

 

padding property

<p style=“padding:40px”>This is a paragraph with inner spacing or padding of 40px.</p>

This is a paragraph with an inner spacing or padding of 40px.

The padding CSS property creates equal spacing around all four sides of an element's content. The padding value is a number typically expressed in pixels.

 

padding on individual sides

<p style="padding-top:25px">This is a paragraph with padding on the top.</p>
<p style="padding-bottom:25px">This is a paragraph with padding on the bottom.</p>
<p style="padding-right:25px; text-align:right">This is a paragraph with padding on the right.</p>
<p style="padding-left:25px">This is a paragraph with padding on the left.</p>

This is a paragraph with padding on the top.

This is a paragraph with padding on the bottom.

This is a paragraph with padding on the right.

This is a paragraph with padding on the left.

CSS padding can also call on each side individually to create different amounts of spacing on the top, bottom, right or left of an element's content. All of the values can be expressed as pixels.

 

margin property

<p style=“margin:40px”> This is a paragraph with an outer spacing or margin of 40px. </p>

This is a paragraph with an outer spacing or margin of 40px.

The margin CSS property creates spacing around an entire element. The margin value is also a number typically expressed in pixels.

 

margins on individual sides

<p style="margin-top:25px">This is a paragraph with a margin on the top.</p>
<p style="margin-bottom:25px">This is a paragraph with a margin on the bottom.</p>
<p style="margin-right:25px">This is a paragraph with a margin on the right.</p>
<p style="margin-left:25px">This is a paragraph with a margin on the left.</p>

This is a paragraph with margin on the top.

This is a paragraph with margin on the bottom.

This is a paragraph with margin on the right.

This is a paragraph with margin on the left.

Like padding, CSS margin can also be called individually to add different amounts of spacing to the top, bottom, right or left of an entire element. Pixels are also an accepted value for this property.



Below is the same Contact Us section of code from the previous exercise. Let's style it with more advanced CSS declarations. All of these declarations will be added to the division element.

  • add a border around the entire contact section with border: 2px solid black
  • now add some inner spacing with padding:20px
  • finally add some outer spacing with margin:20px



Check code





4: HTML style element


So far we have only discussed incline CSS but CSS can also be used within an HTML element called <style> </style>. This element is typically placed after the opening tag of the body or just before the closing tag of the body and references HTML elements with their corresponding CSS properties and values. The format is slightly different than inline CSS but the declarations, properties, and values stay the same.

This type of CSS declaration works well for overriding an element's default styling.

 

Using CSS with an HTML style element

HTML style element format

<html>
	<body>

		<p>Keep learning how to code!</p>

		<style>
			p {
				background-color:blue;
				color:white;
				font-size:22px;
			}
		</style>

	</body>
</html>

Keep learning how to code!

The name of HTML elements can be directly called within the style element. The HTML name is followed by opening and closing brackets: { }. Within the brackets are all of the CSS declarations separated by a semicolon. Note, calling on the name of an HTML element in your CSS will apply the CSS declarations to all instances of the HTML element, not just one.

 

Creating a custom class attribute

custom class attribute

<p class="intro">This is an introduction paragraph.</p>
<p class="about">This is an about us paragraph.</p>

<style>
      .intro {
           color:black;
           font-size:40px;
               }
      .about {
           color:gray;
           font-size:35px;
               }
</style>

This is an introduction paragraph.

This is an about us paragraph.

The custom class attribute helps set CSS rules for specific elements and not all mentions of the element. Assign an element the custom class attribute of your choosing then call that class in the style element. Calling an element by its class attribute requires adding a period before the attribute name. The custom class attribute can be added to as many HTML elements as desired. Elements can have multiple classes, but be careful not to override one class attribute with another.



Let's practice adding a style element to an HTML document using HTML element names.

  • add a <style> </style> element right before the end tag of the body element
  • create a CSS declaration called h1 { } in the style element
  • add text-align:center; within the h1 declaration
  • then create a new CSS declaration called p { } underneath the h1 declaration
  • add font-size:18px; within the p declaration



Check code

Now let's practice creating custom HTML class attributes. 

  • add a value named title in the h1 class attribute
  • add a value named subtitle in the 1st p class attribute
  • add a value named text in the 2nd p class attribute
  • then find the style element and add .title{text-align:center}
  • next add the CSS declaration .subtitle{font-size:22px}
  • finally add the declaration .text{font-size:18px}



Check code





5: CSS stylesheet


The last way CSS can be linked to an HTML document is via a stylesheet. To accomplish this, you would need to create a new document called stylesheet.css and link the file in the head element with a link tag. All of the information that would go in the HTML style element can be placed within the separate CSS document.

 

Using a CSS stylesheet

HTML document

<!DOCTYPE html>
<html>
        <head>
               <title>This is the title tag</title>
               <!-- CSS stylesheet -->
               <link href="stylesheet.css" rel="stylesheet" type="text/css">
        </head>
        <body>
                <p class="intro">This is a paragraph.</p>
        </body>
</html>

This is a paragraph.

The hypertext reference or href attribute, the relationship or rel attribute, and the document type or type attribute are all called to link the CSS file to the HTML document. The href attribute value can either be an internal path to the CSS file in your project or an external link to a web page containing the CSS information.

 

CSS document

.intro {
      color:red;
      font-size: 40px;
          }

Since the CSS document is declared in the HTML head element, the actual CSS file contains pure CSS. This format is often used for larger projects with many custom HTML class attributes and CSS declarations.








6: Good CSS practices


Certain CSS practices are extremely beneficial in preventing repeat code and creating device compatibility. While none of the practices mentioned below are required to use CSS, they prove to be extremely handy for saving time and effort.

 

Using the parent-child relationship in CSS

Parent-child relationship

<div style="background-color:gray; color:white">
	<h3>This is a heading</h3>
	<p>This is a paragraph.</p>
</div>

This is a heading

This is a paragraph.

If you recall for the HTML section, elements that contain other elements are parent elements while elements within elements are child elements. CSS properties added to the parent division element will affect the CSS properties of the child elements. Calling the CSS properties background-color and color in the parent element gives all nested elements a gray background and white text. Using this method can prevent code repetition by styling multiple elements with the same style attribute.

 

Device Compatibility

CSS media queries

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width:600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width:600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width:768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width:992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width:1200px) {...}

The internet and websites are accessed by varying types and sized devices. As such, HTML elements like text and images can look great on a larger screens but over-sized on smaller screen devices. Luckily, CSS media queries resize HTML elements so web pages are compatible with a variety of screen sizes and devices.

Screen sizes are generally grouped into extra small (phone), small (tablet), medium (landscape tablets), large (laptops) and extra large (desktop) devices. Each of these screen sizes are expressed as a number range.

There is no need to memorize the exact code for media queries; just remember they exist and are beneficial for device compatibility. We will discuss how to check device compatibility for all screen sizes later in the Django section of the tutorial but for now let's look at an example of a well-placed media query.

 

Using CSS media queries

CSS media query example

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
       h1{font-size: 25px}
}

Small device viewpoint (415 px) without media query

Small viewpoint

Small device viewpoint (415px) with media query 

Small viewpoint with media query

The h1 element has a default of font-size:32px and looks over-sized on a phone. Adding a CSS media query for extra small devices that sets the h1 heading element to font-size:25px improves the mobile compatibility of that heading element. Any HTML element can have a media query but text size is usually the most prominent when it comes to improving device compatibility.



Let's practice using the HTML parent-child element relationship to our advantage. You will notice that all of the elements nested in a parent element inherits that parent's CSS declaration(s).

  • add background-color:#343A40 to the style attribute of the division element
  • add color:#F8F9FA to the style attribute of the same division element



Check code





7: Using CSS frameworks


Applying CSS to a project

Creating custom CSS declarations and media queries alone requires a large amount of time even if done efficiently. Luckily, responsive CSS frameworks help perfect the appearance of your web page by offering easy-to-use components (a combination of pre-built HTML elements and CSS declarations).

Many front-end developers opt for CSS frameworks to create beautiful web pages. These frameworks provide custom HTML class attributes that link to CSS stylesheets with preset CSS declarations and media queries. In other words, every CSS framework already has built-in styling and device compatibility. We will learn how to use one such framework, Bootstrap, in the next lesson for our project.






Quiz Questions


1. What is the difference between HTML and CSS?


2. Which is the correct format for inline CSS?


3. Which property changes font-color?


4. What is the difference between margin and padding?


Next lesson


Check out the comments and debug buttons if you get stuck.