Gokhan Aydın
Producer, Director, Jr. Academician, Addicted @ Art & 3D & Design & Photography & Cinema
CSS
Cascading Style Sheets
What is CSS?
CSS to help how HTML elements are to be displayed on screens
CSS Syntax
CSS Syntax
body {
margin: 0;
padding: 0;
}
h1 {
font-family: monospace;
}
p {
font-size: 14px;
}CSS Class Selector
.container {
margin: 20px;
padding: 20px;
}
.vurgulu{
font-weight: bold;
background: grey;
color: red;
}CSS ID Selector
#container {
margin: 20px;
padding: 20px;
}
#vurgulu{
font-weight: bold;
background: grey;
color: red;
}CSS Using Types
- External Style Sheet
- Internal Style Sheet
- Inline Style
CSS External Using
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
CSS External Using
Style.css file
_______________
body{
background-color: linen;
}
h1{
color: maroon;
margin-left: 40px;
}
CSS Internal Using
<head>
<style>
body{
background-color: linen;
}
h1{
color: maroon;
margin-left: 40px;
}
</style>
</head>
CSS Inline Using
<body>
<h1 style="color:blue;margin-left:30px;">Birinci başlık</h1>
<p style="color:grey;margin:15px;">Burası bilginin olduğu bir paragraftır.</p>
</body>Colors in CSS
You can use in three way
RGB
HEX
RGBA
CSS Colors
<body>
<h1 style="background-color: lightred;">Renkli başlık</h1>
<h1 style="background-color: rgb(200,100, 50);">Renkli başlık2</h1>
<h1 style="background-color: #5383d1;">Renkli başlık 3</h1>
<h1 style="background-color: rgba(200, 100, 50, 0.5);">Renkli başlık 4</h1>
</body>Background Image
body {
background-image: url("backg.jpg");
}
body {
background-image: url("backg.jpg");
background-repeat: repeat-x;
}
Background Image
body {
background-image: url("back.jpg");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
Text Alignment
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Text Decoration
a {
text-decoration: none;
}
Text Decoration
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text Transformations
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Text Family
p {
font-family: monospace;
}
Text Style
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Text Style
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Text Style
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser's window size.
10vw = 10% of viewport width. If the viewport is 20 in wide, 10vw is 2 in.
CSS
By Gokhan Aydın
