Scribd
Upload
27 views8 pages

Lecture #3

very easy to understand

Uploaded by

khanhussain2828
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
27 views8 pages

Lecture #3

very easy to understand

Uploaded by

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

Lecture #3

CSS – The Styling of the Website


Introduction to CSS

 CSS Stands for Cascading Style Sheets


 CSS is not a Programming Language
 It is used for Website Design & Layout
 It is used alongside HTML
Ways of using CSS in HTML

 Internal CSS - Within a <style> tag inside <head> NOT SUGGESTED!


 External CSS - Within a separate file. RECOMMENDED!
 Inline CSS - With a "style" attribute inside the element. NOT RECOMMENDED!

We will look at all 3 methods in a bit.


CSS Structure

CSS works with Selectors & Properties

A CSS selector is used to tell the browser which Element you want to Style.
A CSS Property is used to change the style of an element. E.g. color, background, size, etc.

CSS Code is just a selector followed by curly braces { }. You put all of your properties in the curly braces.
For example, If you have a <span> tag on your document and you want to change its style :-

span {
color: blue;
background-color: red;
}
CSS Code Syntax Explained

Selector
span { Property

color: red;
background-color: black; Value
border: 2px;
}
Important / Common CSS Properties

 "color" - Is used to change the color of text.


 "background-color" - Used to change the background color of an element.
 "font-family" - To change the font of text.
 "font-size" - To change the size of the text.
 "width" - Changes the width of a BLOCK or INLINE-BLOCK element.
 "height" - Changes the height of a BLOCK or INLINE-BLOCK Element.
 "margin" - Changes the Margin (Outer-spacing) of an Element.
 "padding" - Changes the Padding (Inner-spacing) of an Element.
 "text-align" - Used to align the content to left, right or center.
 "border" - Used to give borders to an element.
 "display" - Used to change the Display Mode of element.
Resources for CSS

 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference - Common Properties


 https://www.w3schools.com/css/ - CSS Tutorial from W3Schools
Hands on Coding!

You might also like