CSS Basics

Created on December 28, 2018

In this course you'll learn how to use CSS to add styles to your HTML webpages. This course contains 10 videos and will teach you the basics on CSS. Take a look at the course break down below:


1. Introduction

In this introduction episode we talk to you about what you can expect in this CSS course.


2. Using CSS

In this video we'll be covering a few topics including What is CSS, How to use CSS, and the Basic syntax of CSS.

What is CSS?

CSS stands for Cascading Style Sheets and CSS is used to stylize a page. HTML is the content of the page and CSS defines how the content should be displayed.

How to use CSS

There are 3 different ways to add CSS to your HTML pages including Inline CSS, Internal CSS, and External CSS.

Using inline CSS you can add a style attribute to your HTML tag and include the CSS inline.

<h1 style="background:blue; color:white;">Hello CSS</h1>

Using internal CSS we add the CSS to the head of our page and enclose it in <style> tags.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Basics</title>
	<style>
		h1{
			background:blue;
			color:white;
		}
	</style>
</head>
<body>
	<h1>Hello CSS</h1>
</body>
</html>

To use External CSS we can include a link tag that specifies where external stylesheet is located in the href tag.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Basics</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Hello CSS</h1>
</body>
</html>

So if we created a new file called style.css we could include the following content to the file.

h1{
	background:blue;
	color:white;
}

Using external CSS is the most commonly used since it makes our code cleaner by separating the styles into its own file.

Basic Syntax of CSS

The basic syntax for CSS is to specify the selector p from our example below and then we include our css inside of the { } brackets. The element that we want to apply our CSS to is referred to as the selector. Then if we want to give our element a color of blue we will specify color, which is referred to as the property and blue, which is the value. Take a look at the example below:

p{
	color:blue;
}

3. Colors and Backgrounds

In this video we will learn about the color and background property.

Color

To use the color property we could easily give it a color value like so:

p{
	color:blue;
}

In the example above we are saying that we want every p element to have a color of blue. We can use the traditional colors such as red, blue, green, black, grey, and so on. Or we could use rgb or hex color values.

RGB colors

To use rgb colors you can use the following syntax rgb(255, 255, 255) that would be an RGB value of white. RGB stands for Red, Green, Blue and each value inside of the rgb() represents red, green, and blue value from 0 to 255. So, if we were to specify a color of rgb(0, 0, 0) we would get a color of black because Red, Green, and Blue have a value of zero. How might we get the color blue from an RGB value. We could do the following:

p{
	color:rgb(0, 0, 255);
}

HEX colors

Next we could use hex values which look like the following #FFFFFF, that would give us a color of white. HEX representation of RGB, #RRGGBB and the numbers go from 0-9 then A-F, so a blue value would be represented like the following:

p{
	color:#0000FF;
}

Background

Backgrounds have multiple properties and values that can be used including background-color, background-image, background-repeat, background-attachment, and background-position.

background-color

The background-color property will set the background color of any element. This color can also be represented as an RGB or Hex value that we talked about above.

body{
	background-color: green;
	background-color: rgb(0, 255, 0);  /* RGB Color */
	background-color: #00FF00;         /* Hex Color */
}

background-image

The background-image property can be used to set an image as the background for any html element. Checkout the example below:

body{
	background-image: url('/path/to/image.jpg');
}

background-repeat

The background-repeat property can be used to specify whether a background image should repeat or not repeat. You can also set repeat-x or repeat-y if you only want it to repeat on that axis.

body{
	background-image: url('/path/to/image.jpg');
	background-repeat: no-repeat;
}

background-attachment

The background-attachment property can be used to specify whether a background image should be fixed when the user scrolls or if it should scroll down as the user scrolls the page.

body{
	background-image: url('/path/to/image.jpg');
	background-attachment: fixed;    /* default is scroll instead of fixed */
}

background-position

The background-position property can be used to specify the position of the background image.

body{
	background-image: url('/path/to/image.jpg');
	background-position: center center;
}

The background-position accepts the x-position and the y-position. The x-position can be left, center, right and the y-position can be top, center, bottom. You can also specify a pixel value for each position so the property could also look like: background-position: 100px 100px; and it will position the background 100 pixels from the top and the left.


4. Text & Fonts

In this video we talk about the multiple text and font properties. These properties include color, text-align, text-decoration, text-transform, letter-spacing, line-height, font-family, font-size, font-weight, font-style, and font-variant which we will cover in further detail.

color

The color property is the most commonly used text property and it simply specifies the color of the text like so:

p{
    color: blue;
}

text-align

Using text-align will specify how the text should be aligned. The common text alignments are left, center, right. Take a look at the example below:

p{
    text-align: center;
}

text-decoration

The text-decoration property can specify whether you want the text to have an underline, overline, strikethrough, or none. Take a look at the example below:

p{
    text-decoration: underline;
}

text-transform

Using the text-transform property you can give it a value of uppercase, lowercase, or capitalize.

p{
    text-transform: uppercase;
}

letter-spacing

Using the letter-spacing property you can specify the spacing between each letter as a pixel value. Take a look at the following example.

p{
    letter-spacing: 15px;
}

line-height

The line-height property will specify how much height spacing you want the text to take up. Take a look at the example below:

p{
    line-height: 50px;
}

font-family

The font-family will specify which font face you want to use for the text. By adding multiple fonts you can specify any fallbacks if the user does not have the font installed on their computer.

p{
	font-family: "Times New Roman", Georgia, Serif;
}

font-size

The font-size property will specify how large or small you want the text to be.

p{
	font-size: 12px;
}

font-weight

The font-weight will specify how thick you want the font to be. You can choose a value between 100-900 or you can use normal or bold.

p{
	font-weight: bold;
}

font-style

Using the font-style we can specify whether we want the text to be italic or normal.

p{
	font-style: italic;
}

font-variant

Using the font-variant you can make text have a value of small-caps or normal.

p{
	font-variant: small-caps;
}

5. Widths and Heights

In this video we'll teach you about the CSS width and height property. To set the width and height of an element you can simply use the width and height properties.

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

6. Margin, Padding, & Borders

In this episode we teach you about CSS margin, padding, and border.

Margin

The CSS margin property sets margin spacing outside of the element. You can specify a value for margin-top, margin-right, margin-bottom, and margin-left. Or you can specify them all at the same time by using margin.

p{
    margin: 25px 50px 75px 100px;
}

In the example above we will have a margin-top: 25px; margin-right: 50px; margin-bottom: 75px; and margin-left: 100px;. If we only specified one value in the margin property like so:

p{
    margin: 25px;
}

then all sides will have a margin of 25 pixels.

Padding

Padding has the same rules as the margin above except the spacing will be inside of the element. You can also specify padding-top, padding-right, padding-bottom, or padding-left separately or you can specify them all in one line similar to above. Here's a simple example of the padding property:

p{
    padding: 25px;
}

Border

Using the CSS border property we can add a border to any HTML element. There are 3 basic border properties that you can use which include border-width, border-style, and border-color.

border-width

The border-width property specifies how thick the border should be. As an example let's say that we want the border-width to be 10 pixels, we would represent that like the following:

#element_id{
    border-width: 10px;
}

border-style

The border-style property specifies what kind of style we want for our border which can be a solid, dotted, or dashed border.

#element_id{
    border-style: solid;
}

border-color

The border-color specifies what color we want for our border. The example below will give us a blue color.

#element_id{
    border-style: #0000FF;
}

border

We can use the border property to specify the width, style, and color in one line.

#element_id{
    border: 10px solid #0000FF;
}

7. Floats, Display, & Position

In this episode we are covering the float, display, and position properties. Take a look at each of them below:

float

The css float property is used to float an element to the left of the screen or the right of the screen. By default with any block element it will take up the whole width but by specifying float:left; or float:right; you can make sure the block element stays to the left or the right of the screen. Checkout the following example:

#block{
	width:200px;
	height:200px;
	background:#333;
	float:left;		/* Float this element left */
}

display

The display property will specify how to display an element on the screen. There are 4 main display properties.

The first 2 are display:block; and display:none; If an element is set to display block it will be displayed on the screen and take up the full width of it's location (unless it has a float property). If the element is set to display:none it will not be displayed at all and it will be hidden.

Next there is the display:inline; and display:inline-block;

If you specify inline the element will not break a new line or take up the full width instead it will be displayed inline with the rest of the content. Display inline will not be treated as a block and will not be able to have many attributes such as margin and padding.

If the element is set to display:inline-block it will be the same as the inline except it will be treated as an actual block or square.

p{
	display:inline-block;
}

position

The CSS position property specifies the type of positioning that the element should have on the page.

There are 4 main positions which include static (which is default if the position propert is not set), relative, absolute, and fixed.

Static Position

The static position is the default position that any element will have on the page, if you do not set the position property it will have a value of static.

Relative Position

Relative position will have a position similar to static however, it will allow you access to a few more properties including top, left, right, and bottom positions. Let me give you a quick example:

p{
	position:relative;
	top:10px;
	left:10px;
}

the paragraph element above will now have a relative position from it's current location but it will be positioned at an offset of 10 pixels from the top and 10 pixels from the left.

Absolute Position

An absolute positioned element will have the same properties as relative; however, instead of it having a starting position from it's static position it will have a starting position of absolute, this means that if you position it from the top of 10 pixels and left of 10 pixels, it will be 10 pixels offset from the body of the page instead of it's actual position.

p{
	position:absolute;
	top:10px;
	left:10px;
}

Fixed Position

Fixed position will give you all the same results as the absolute position; however, when the user scrolls down the page the fixed element will still stay at the same position; whereas with absolute positioning it will scroll along with the page.

p{
	position:fixed;
	top:10px;
	left:10px;
}

8. Links & Lists

In this video we'll be cover links and lists. You can checkout each of these properties below:

Links

Links are text that can be clicked to visit another page. There are 4 different states for each link which include the :link, :visited, :hover, and :active state.

:link state

The :link state is the same as the default <a> link so the 2 examples below will do the same thing.

a{
	color:#0099CC;
}

a:link{
	color:#0099CC;
}

:visited

The :visited state is a link that has already been visited.

a:visited{
	color:#FF0000;
}

:hover

The :hover state is a link that is currently being hovered.

a:hover{
	color:#00CC99;
}

:active

The :active state is a link that is currently being clicked, as the users mouse click is down the link will have an :active state.

a:active{
	color:#000000;
}

Lists

Lists are used to represent a list of items or text. There are 2 types of list which include unordered lists and ordered lists. Take a look at each of the CSS properties that these lists have below.

list-style-type

The list-style-type can only be applied to unordered lists and they specify the different styles that you can use for your bullet points. Take a look at each of the main values below:

ul{
	list-style-type: disc;   /* filled in circle */
	list-style-type: circle; /* outlined circle */
	list-style-type: square; /* filled in square */
	list-style-type: none;   /* no bullet points */
}

9. Classes, ID's, and Psuedo Elements

In this episode we'll be teaching you about the difference between Classes and Id's, and Pseudo Elements.

Classes

A class is when you have an element that will show up multiple times in your document and you want to apply certain styles to that class element. To create a class in HTML it will look like the following:

<div class="my_element"></div>

Then to give it some styles in css you will reference it by using a . and then the name of the element like so .my_element

.my_element{
	background:#ff0000;
	color:#fff;
}

Id (identifier)

Unlike classes an ID should only appear once in the document. To give an element an ID you will use the # symbol followed by the name of the element. So in HTML your ID would look like the following:

<div id="element"></div>

Then in your CSS you would stylize this element like so:

#element{
	background:#ff0000;
	color:#fff;
}

Pseudo Elements

Pseudo Elements are used to specify a certain section or part of an element. Pseudo elements are used by adding a :: at the end of the element and then the name of the pseudo-element. For instance to make the first line red in a paragraph we could do the following:

p::first-line{
	color:#ff0000;
}

Or possibly we want to make the first letter of a paragraph red, we could do the following:

p::first-letter{
	color:#ff0000;
}

We also have ::before and ::after elements that we can use to add any content before or after an element. These can be used like the following:

p::before{
	content: ' Before Element';
}

p::after{
	content: ' After Element';
}

One last pseudo element worth mentioning is the ::first-child and ::last-child, which will stylize the first and last child elements.

ul li::first-child{
	background: green;
}

ul li::last-child{
	background: green;
}

10. Wrapping Up

Congratulations on reaching the black-belt episode. In this last episode we'll be wrapping up a few last topics including comments, inheritance, and descendent selectors.

Comments

Using comments in your CSS allows you to leave notes or comments for yourself. Checkout the example of comments below:

/* This a comment */

p{
	color:blue;
}

/* This is another comment */

Inheritance

Inheritance is when an element inherits a value from a parent element. For example if you do not specify a color value for your <p> tags, but you specify a color of green for the body of your document, then your text in a paragraph will inherit the color green.

body{
	color:green;
}

p{
	font-size:12px;
}

/* Paragraph above will inherit the color green */

Descendent Selectors

Descendent selectors are selectors that match all elements that are descendents of a specified element. Take a look at the example code below:

<p>Hello I'm a paragraph</p>
<p class="message">And I'm another paragraph</p>

Now, if we were to add the following css:

p.message{
	color:green;
}

Only the second paragraph would have the color of green because we used a direct descendent selector. Take another look at another example below. Say that we have the following HTML.

<p>Hello I'm a paragraph</p>
<div id="section">
	<p>And I'm another paragraph</p>
</div>

Now to give the second paragraph the color of green we could know that the <p> tag is a descendent of the <div id="section"> so we could write this like so:

#section p{
	color:green;
}

And now only the second paragraph will have the color green since we used a descendent selector.


Congrats on wrapping up this final video and earning your black-belt in this CSS Basics Course.

Introduction

10 videos (41 minutes)

Autoplay?

0% completed
Now Playing 1. Introduction
2. Using CSS
3. Colors and Backgrounds
4. Text & Fonts
5. Widths and Heights
6. Margin, Padding, & Borders
7. Floats, Display, & Position
8. Links & Lists
9. Classes, ID's, and Psuedo Elements
10. Wrapping Up

© 2020 DevDojo LLC. All rights reserved.