Lecture Notes

Section 1: Introduction

Course Objectives

Section 2: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS IDs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements
×
More

Lecture Notes

Course: CSS Fundamentals View Course Outline


Created by:

YouAccel

Lectures:

32

Duration:

1h 47m 20s

Skill Level:

Beginner

Language:

English

Students Enrolled:

8,206

Rating:

(88)

Certification Type:

Completion Certificate

Lecture: CSS Borders

In this lecture we will explore how to add borders around an element. We will start by creating a class with commonly used border style properties.

.myborder {
Border: 1px; (border-bottom, border-left, border-right, border-top)
border-color: #333333; (color name, hexadecimal number, RGB Code).
Border-style: Dashed (dotted, double, groove, hidden, inset, none, outset, ridge, solid)
}

The first property, border, is used to specify where the border will be applied, and the thickness. The thickness is stated in pixels.

  • For a border only at the top of the element, we would use border-top. border-bottom, border-right, and border-left are also other values that can be used. If we leave it as just border, the border will be applied to all four sides.

  • Next we have the border-color. This will be the color of the border itself. The border-color value can be represented by a color name, hexadecimal number, or RGB code.

  • A border style can be applied using the border-style property. There are serveral possible styles. We have used dashed which will create a dashed-line border effect.