Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS INTRODUCTION

10 minutes

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

CSS INTRODUCTION

What is CSS?

CSS, an acronym for Cascading Style Sheets, outlines the presentation of HTML elements across various mediums such as screen, paper, or other media.
CSS significantly reduces workload by efficiently managing the layout of numerous web pages simultaneously.
Stored in CSS files, external stylesheets house the styling information for web documents.

Why Use CSS?

CSS is employed to specify the styles for your web pages, encompassing the aesthetics, arrangement, and adjustments in presentation tailored for diverse devices and screen dimensions.

CSS Example

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
font-family: verdana;
  font-size: 20px;
}

CSS Solved a Big Problem

HTML was originally designed to describe the content of a web page, using tags such as:

<h1>This is a heading</h1> <p>This is a paragraph.</p>

However, with the introduction of tags like <font> and color attributes in the HTML 3.2 specification, web development became increasingly problematic. Incorporating fonts and color information directly into every single page of large websites turned into a lengthy and costly process for developers.

CSS separates style formatting from the HTML, streamlining the design and maintenance of web pages.

Normal
0

false
false
false

EN-AU
X-NONE
X-NONE

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Table Normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:8.0pt;
mso-para-margin-left:0cm;
line-height:107%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Aptos”,sans-serif;
mso-ascii-font-family:Aptos;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Aptos;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;
mso-ligatures:standardcontextual;
mso-fareast-language:EN-US;}
table.MsoTableGrid
{mso-style-name:”Table Grid”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-priority:39;
mso-style-unhide:no;
border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-border-insideh:.5pt solid windowtext;
mso-border-insidev:.5pt solid windowtext;
mso-para-margin:0cm;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Aptos”,sans-serif;
mso-ascii-font-family:Aptos;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Aptos;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;
mso-ligatures:standardcontextual;
mso-fareast-language:EN-US;}

If you don’t know what HTML is, we suggest that you read our HTML Tutorial

CSS Saves a Lot of Work!

Style definitions are typically stored in external .css files.

By using an external stylesheet, you can modify the appearance of an entire website simply by changing a single file!