Scribd
Upload
34 views

Welcome To The: Web Design Class !

This document outlines a CSS class, beginning with an introduction to CSS. It defines CSS as cascading style sheets and discusses CSS syntax, comments, and the different ways to insert CSS including inline styles, internal and external style sheets. The document also covers CSS selectors such as universal, element, class, ID, and grouping selectors. It provides examples for each concept to demonstrate proper CSS usage and structure.

Uploaded by

Sakebul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views

Welcome To The: Web Design Class !

This document outlines a CSS class, beginning with an introduction to CSS. It defines CSS as cascading style sheets and discusses CSS syntax, comments, and the different ways to insert CSS including inline styles, internal and external style sheets. The document also covers CSS selectors such as universal, element, class, ID, and grouping selectors. It provides examples for each concept to demonstrate proper CSS usage and structure.

Uploaded by

Sakebul Islam
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Welcome to the

Web Design Class !

Develop of Universal Software & Research Association http://dusrasoft.com


Css Course Outline

Develop of Universal Software & Research Association http://dusrasoft.com


CSS
Class-1

Develop of Universal Software & Research Association http://dusrasoft.com


Chapter #1: Introduction CSS

What is css
CSS syntax
Css comment
How to use css
Css selectors

Develop of Universal Software & Research Association http://dusrasoft.com


What is css?
CSS stands for Cascading Style Sheets

Develop of Universal Software & Research Association http://dusrasoft.com


CSS syntax

Develop of Universal Software & Research Association http://dusrasoft.com


CSS comment
Single line comment
Multiline comment

Note: A CSS comment starts with /* and ends with */. Comments can also span multiple
lines

Develop of Universal Software & Research Association http://dusrasoft.com


Single line comment

  /* This is a single-line comment */

Develop of Universal Software & Research Association http://dusrasoft.com


Multiline comment

/* This is a
multiline
comment */

Develop of Universal Software & Research Association http://dusrasoft.com


How to use css
Three ways to insert css

Inline style
Internal style sheet
External style sheet

Develop of Universal Software & Research Association http://dusrasoft.com


Inline style

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Develop of Universal Software & Research Association http://dusrasoft.com


Internal style sheet
<head>
<head>
<style>
<style>
body {
body {
   background-color: linen;
background-color: linen;
}}

h1 {
h1 {
   color: maroon;
color: maroon;
  margin-left: 40px;
  margin-left: 40px;
} 
} 
</style>
</style>
</head>
</head>

Develop of Universal Software & Research Association http://dusrasoft.com


External style sheet

<head>
<link rel="stylesheet" type="text/css" href="my
style.css">
</head>

Note:  The style sheet file must be saved with a .css extension
Develop of Universal Software & Research Association http://dusrasoft.com
Css selectors
Universal selector
Element selector
Class selector
 Id selector
Grouping selectors

Develop of Universal Software & Research Association http://dusrasoft.com


Universal selector

{{
   
    css
css declarations;
declarations;
}}

* { 
* { 
   
    background-color: yellow;
background-color: yellow;
}}

Develop of Universal Software & Research Association http://dusrasoft.com


Element selector

element {
element {
   css
css declarations;
declarations;
}}

p { 
p { 
  background-color: yellow;
  background-color: yellow;
}}

Develop of Universal Software & Research Association http://dusrasoft.com


Class selector

.class {
.class {
   css
css declarations;
declarations;
}}

.box { 
.box { 
   
    background-color: yellow;
background-color: yellow;
}}

Develop of Universal Software & Research Association http://dusrasoft.com


Id selector
#id {
#id {
   css
css declarations;
declarations;
}}

#box { 
#box { 
   
    background-color: yellow;
background-color: yellow;
}}

Develop of Universal Software & Research Association http://dusrasoft.com


Grouping selectors

element, element {
element, element {
  css
  css declarations;
declarations;
}}

h1,
h1, h2,
h2, p {
p {
   text-align: center;
text-align: center;
  color: red;
  color: red;
}}

Develop of Universal Software & Research Association http://dusrasoft.com


See Will Next Chapter

Develop of Universal Software & Research Association http://dusrasoft.com

You might also like