Scribd
Upload
57 views

CSS Course Outline

The document is a course outline for learning CSS from Dr. Zeeshan Bhatti. It outlines 15 main topics that will be covered in the CSS course, including CSS syntax, different types of CSS, selectors, colors, backgrounds, borders, margins, padding, height/width, box model, outline, text, fonts and more. Each topic lists the key sub-topics and concepts that will be discussed to teach CSS. Links to YouTube videos are also provided for full tutorials.

Uploaded by

hamza raza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
57 views

CSS Course Outline

The document is a course outline for learning CSS from Dr. Zeeshan Bhatti. It outlines 15 main topics that will be covered in the CSS course, including CSS syntax, different types of CSS, selectors, colors, backgrounds, borders, margins, padding, height/width, box model, outline, text, fonts and more. Each topic lists the key sub-topics and concepts that will be discussed to teach CSS. Links to YouTube videos are also provided for full tutorials.

Uploaded by

hamza raza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

CSS Course Outline

By. Dr. Zeeshan Bhatti


Watch Full Tutorial for the following Course @ZeeshanAcademy
How to use CSS to design web pages |
Introduction to CSS | Internal CSS, External
CSS (URDU)

https://youtu.be/sRzm4gfTNCk

CSS Basics for Absolute Beginner |


Introduction to CSS in Urdu/Hindi Part-1

https://youtu.be/Nxpbv_emaa8

`
CSS Course for Beginner | Introduction to
CSS in Urdu/Hindi Part-2

https://youtu.be/TrjA51N4dP4

CSS Made Easy: Beginner's Guide In


URDU/Hindi | Most Basic CSS Tutorial

https://youtu.be/-8moUHlN7Rc

W3Schools Bootstrap 4 Tutorial in Urdu |


Bootstrap 4 Tutorial from W3Schools | Full
Course

https://youtu.be/QI59ip0d93c

View Entire “Full Stack Web Developer Course” Playlist at @ZeeshanAcademy

(69) Full Stack Developer Course - YouTube


(68) HTML CSS Full Course for beginners - YouTube
1
1. CSS Introduction
a. CSS Syntax

b.
c.

2. Types of CSS
a. Inline CSS <p style="color:red;">This is a paragraph.</p>
b. Internal CSS
<head>
<style>
body {
background-color: linen;
}
</style> </head>

c. External CSS <link rel="stylesheet" href="mystyle.css">


d.

3. CSS Selectors
a. CSS element Selector i.e p{} p, h1,h2{}
b. CSS id Selector i.e #para{ }
c. CSS class Selector i.e .className{ }, p.classname{}

4. CSS Comments
a. /* This is a single-line comment */

5. CSS Colors
a. Text Color property color:Green;
b. CSS Border Color border:2px solid Red;
c. CSS color Values
i. Color Name i.e red, green, blue
ii. rgb(255, 99, 71)
iii. #ff6347

6. CSS Backgrounds
a. background-color {background-color: lightblue;}
b. background-image background-image: url("paper.gif");
c. background-repeat background-repeat: repeat-x;
To repeat an image vertically, set background-repeat: repeat-y
2
Show the background image only once: background-repeat: no-repeat;
d. background-attachment background-attachment: fixed;
background-attachment: scroll;
e. background-position
Position the background image in the top-right corner:
background-position: right top;
f. opacity {opacity: 0.3;}
g. background
{ /* Green background with 30% opacity */
background: rgba(0, 128, 0, 0.3)
}

7. CSS Borders
a. The border-style property specifies what kind of border to display
border-style: dotted;
b. The following values are allowed:
i. dotted - Defines a dotted border
ii. dashed - Defines a dashed border
iii. solid - Defines a solid border
iv. double - Defines a double border
v. groove - Defines a 3D grooved border. The effect depends on the border-color
value
vi. ridge - Defines a 3D ridged border. The effect depends on the border-color value
vii. inset - Defines a 3D inset border. The effect depends on the border-color value
viii. outset - Defines a 3D outset border. The effect depends on the border-color
value
ix. none - Defines no border
x. hidden - Defines a hidden border
c. CSS Border Width border-width
d. CSS Border Color border-color border-color: #ff0000;

8. CSS Margins
a. Margins are used to create space around elements, outside of any defined borders.
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
b. Use the margin shorthand property with four values

margin: 25px 50px 75px 100px;


c. The auto Value: You can set the margin property to auto to horizontally center the element
within its container.

3
margin: auto;

9. CSS Padding
a. Padding is used to create space around an element's content, inside of any defined
borders

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
b. Shortend Margin
c. padding: 25px 50px 75px 100px;

top padding is 25px


right padding is 50px
bottom padding is 75px
left padding is 100px
10.CSS Height/Width
a. The CSS height and width properties are used to set the height and width of an element.
b. CSS height and width Values: The height and width properties may have the following values:
i. auto - This is default. The browser calculates the height and width
ii. length - Defines the height/width in px, cm, etc.
iii. % - Defines the height/width in percent of the containing block
iv. initial - Sets the height/width to its default value
v. inherit - The height/width will be inherited from its parent value

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

11.CSS Box Model


a. All HTML elements can be considered as boxes.
b. The CSS box model is essentially a box that wraps around every HTML element. It
consists of: margins, borders, padding, and the actual content.
c. The box model allows us to add a border around elements, and to define space between
elements.
d. Explanation of the different parts
i. Content - The content of the box, where text and images appear
ii. Padding - Clears an area around the content. The padding is transparent
iii. Border - A border that goes around the padding and content
iv. Margin - Clears an area outside the border. The margin is transparent
4
e. div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

f.

12.CSS Outline
a. An outline is a line that is drawn around elements, OUTSIDE the borders, to make the
element "stand out".
b. CSS has the following outline properties:
i. outline-style : outline-style: dotted;
ii. outline-color: outline-color: red;
iii. outline-width: outline-width: thin; /* thin, medium, thick, px, em */
iv. outline: outline: 5px solid yellow;
c. CSS Outline Style: The outline-style property specifies the style of the outline, and can
have one of the following values:
i. dotted - Defines a dotted outline
ii. dashed - Defines a dashed outline
iii. solid - Defines a solid outline
iv. double - Defines a double outline
v. groove - Defines a 3D grooved outline
vi. ridge - Defines a 3D ridged outline
vii. inset - Defines a 3D inset outline
viii. outset - Defines a 3D outset outline
ix. none - Defines no outline
x. hidden - Defines a hidden outline
d. CSS Outline Width:

5
13. CSS Text
a. Color: The color property is used to set the color of the text.
i. color: blue;
ii. background-color: blue;
b. Text Alignment:
i. text-align: center; /*left, right, justify */
c. CSS Text Decoration
i. text-decoration-line
ii. text-decoration-color
iii. text-decoration-style
iv. text-decoration-thickness
v. text-decoration

vi. text-decoration-line: overline;


vii. text-decoration-line: line-through;
viii. text-decoration-line: underline;
ix. text-decoration-line: overline underline;
x. text-decoration-color: red;
xi. text-decoration-thickness: 5px

14.CSS Fonts
a. font-family: "Times New Roman", Times, serif;
b. font-family: Arial, Helvetica, sans-serif;
c. The font-style property is mostly used to specify italic text. font-style: italic;
d. The font-weight property specifies the weight of a font: font-weight: bold;
e. The font-size property sets the size of the text. font-size: 40px;

15.CSS Icons
a. Font Awesome Icons: To use the Font Awesome icons, go to fontawesome.com, sign in,
and get a code to add in the <head> section of your HTML page:
<script src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"></script>
<body>

<i class="fas fa-cloud"></i>


<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
b. Bootstrap Icons: To use the Bootstrap glyphicons, add the following line inside the
<head> section of your HTML page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boot
strap/3.3.7/css/bootstrap.min.css">
6
<body>

<i class="glyphicon glyphicon-cloud"></i>


<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>

16.CSS Links
a. Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
b. Link States (Events): The four links states are:
i. a:link - a normal, unvisited link
ii. a:visited - a link the user has visited
iii. a:hover - a link when the user mouses over it
iv. a:active - a link the moment it is clicked
/* mouse over link */
a:hover {
color: hotpink;
}
c.

17.CSS Lists
a. The list-style-type property specifies the type of list item marker
i. list-style-type: circle;
ii. list-style-type: square;
b. The list-style-image property specifies an image as the list item marker:
i. list-style-image: url('sqpurple.gif');
c. The list-style-position property specifies the position of the list-item markers (bullet
points).
d. "list-style-position: outside;" means that the bullet points will be outside the list item.

e. "list-style-position: inside;" means that the bullet points will be inside the list item.

18. CSS Tables

19.CSS Display
a. The display property is the most important CSS property for controlling layout.

7
b. Every HTML element has a default display value depending on what type of element it
is. The default display value for most elements is block or inline.CSS Max-width
c. display: inline;
d. display: block;
e. display: inline-block;

20.CSS Position
a. The position property specifies the type of positioning method used for an element
(static, relative, fixed, absolute or sticky).
b. position: static; Static positioned elements are not affected by the top, bottom, left, and
right properties.
c. An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:
d. An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled. The top, right, bottom, and
left properties are used to position the element.
e. A fixed element does not leave a gap in the page where it would normally have been
located.
21. CSS Z-index
22. CSS Overflow
23. CSS Float
24. CSS Inline-block
25. CSS Align

You might also like