CSS presentation for beginners where they can understand easily
Indu32
8 views
30 slides
Oct 05, 2024
Slide 1 of 30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
About This Presentation
CSS presentation for beginners where they can understand easily
Slide Content
CSS Cascading Style Sheets
Style sheet is a collection of formatting styles, which can be applied to a web page . CSS stands for C ascading S tyle S heets Styles define how to display HTML elements Styles were added to HTML 5.0 to solve a problem Style sheet
The syntax of a style rule is as follows: Selector { property:value ;} Where Selector =any html tag Property= attributes like font color, font size Value= setting for the attributes Ex: h1{ color:red ;} style Rule
There 3 types of css Inline css Internal css External css Types of css
1. Inline css Ex: <h1 style=“ color:green ”> 2. Internal css Ex: <head> <style> p{ color:red ;} </style> </ head> Style sheet
3 . External css <head> <link REl =“ stylesheet ” href =“filename.css” type=“text/css”> </head> Style sheet
There 4 types of selector : Tag (html code) Class (.) Id (#) Universal (*) Types of selector
Tag (html code) Ex: h1{ color:red } Types of selector
<html> <head> <title>css</title> <style> #control{ color:limegreen } </style></head> <body> <p id="control"> gfuigfugfu gugfufgufgufg ufg </p> </body> </html> Id (#)
<html> <head> <title>css</title> <style> .note{ color:green ; font- weight:bold } .syntax{ color:red ; font- weight:Normal } </style></head> <body> <p class="syntax"> hhfh hhflhkfhkfhlhkflfhlk hlhhfhfhh <br> fuhfu hfofhifhihfih ihfhifhih h.</p> <p class="note"> hhfihfi hfihfi hfhfhfiohfhi hifhihh <br> jfjfo ojfofjpojfojfojfojoj j .</p> <h1 class="note"> welcome to online form</h1> </body> </html> Class (.)
* {Text-transform : uppercase;} Universal (*)
There 2 types Single line Multi line /*........................ ........................ ......................... */ Comments
Text- align : left, right, center, justify Text- transform : uppercase, lowercase , capitalize Text-indent : 2em or 20 px Text-decoration : underline , over line, line-through Word-spacing : Normal or length Basic elements in css
Font - family : Calibri , Arial etc font – size : 5 Font-style : Normal or italic Font- weight : Bold Font – variant : small-caps or normal Basic elements in css (font)
Background Image Background attach Background Repeat Background color Background Position Background
Body {background-image: url (‘smallPic.jpg’); } or {background-image: url (‘smallPic.jpg’); background-repeat: no-repeat;} Or {background-image: url (‘smallPic.jpg’); background-repeat: repeat-y;} Background Image
{ background-image: url (smallPic.jpg); background-repeat: repeat-x;} Or { background-image: url (smallPic.jpg); background-repeat: repeat; } Or h4 { background-color: white; } Or { background-image: url (smallPic.jpg); background-position: top center; } Background Image
.solid {border-style: solid; } .double {border-style: double; } .groove {border-style: groove; } .dotted {border-style: dotted; } .dashed {border-style: dashed; } .inset {border-style: inset; } .outset {border-style: outset; } .ridge {border-style: ridge; } .hidden {border-style: hidden; } Border Style Types
table { border-width: 7px; border-style: outset; } td { border-width: medium; border-style: outset; } p { border-width: thick; border-style: solid; } Border Width
table { border-color: rgb ( 100, 100, 255); border-style: dashed; } td { border-color: #FFBD32; border-style: ridge; } p { border-color: blue; border-style: solid; } Ex : p { border: 20px outset blue ;} h4{ border: 5px solid; } h5{ border: dotted; } Border Color
The CSS margin properties define the space around elements. Example margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; margin:25px 50px 75px 100px; margin:25px 50px 75px; margin:25px 50px; margin:25px CSS Margin
The CSS padding properties define the space between the element border and the element content. Example padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; padding:25px 50px 75px 100px; padding:25px 50px 75px; padding:25px 50px; padding:25px; CSS Padding
Css allows the web page designers to position the web page anywhere on the web page . There 4 types of position Normal Absolute Relative Fixed Position Properties
Absolute Positing Size properties Clip properties Z-index property Visibility Property Pseudo classes Pseudo elements Border Collapse List Property Scrollbar property Cursor Property Zoom Property Advanced css Properties
Z-index body{ background- color:green ;} .e1{ position:absolute ; font- size:medium ; z-index:1;} .e2{ position:absolute ; font- size:larger ; z-index:2; color:red ;left:5px;} Advanced css Properties
Absolute Position #header {position:absolute ; top :100px; left:20px ;} Size property .vcard{width:250px; height:150px; border:solid thin red; background-color:pink; padding:10px;} Advanced css Properties
Clip properties .li{position:absolute ; clip:rect(0 100px 75 px 40px);} Pseudo classes a:link { color:white ; background- color:black ;} a:visited{ color:white ; background- color:brown ;} a:hover {color: black ; background- color:white ;} a:active {color:pink ; background- color:white ;} Advanced css Properties
Pseudo classes & Pseudo elements p:first-letter{font- size:xx - large;font - weight:bold ;} p:first-line{font- weight:bolder;background - color:pink ;} List Property ul{ list -style: url ('images1.jpg') inside ;} Advanced css Properties
Visibility Property <style type="text/css"> #image{ visibility:hidden ;} </style> Border Collapse Table{ border-collapse:collapse ;} Advanced css Properties
Cursor Property body{cursor: crosshair;} input{cursor: text;} . addcart {cursor: hand;} Scrollbar Property TextArea {scrollbar-base- color:gray ; scrollbar-arrow- color:green ; scrollbar-face- color:yellow ; scrollbar-shadow- color:blue ; scrollbar-track-color: pink ;} Advanced css Properties
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 8
- Slides 30
- Age 423 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
31 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
28 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
24 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views