CSS 01

Dasar Pemrograman dan Desain Web
CASCADING STYLE SET (1)
1. Introduction
Latihan 1
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Profil</h1>
<p>Nama saya adalah Habibah</p>
</body>
</html>
2. Selector
CSS Element Selector

Here, all <p> elements on the page will be center-aligned, with a red text color:
Mustakim, ST., M.Kom. 1

Latihan 2
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Ini adalah contoh CSS Element Selector Dasar</p>

<p id="para1">Lihat Kami</p>
<p>Coba Lihat Ya</p>
</body>
</html>
CSS ID Selector
 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element is unique within a page, so the id selector is used to select one
unique element!
 To select an element with a specific id, write a hash (#) character, followed by the id
of the element.
Latihan 3
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Halo Anak TIF</p>

<p>Ini adalah paragraf menggunakan Selector ID</p>
</body>
</html>

CSS Class Selector

 The class selector selects HTML elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by the
class name.
Latihan 4
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Warna merah dengan menggunakan Heading 1

dan rata tengah CSS Class</h1>
<p class="center">Warna merah dengan menggunakan paragraf
rata tengah dan berwarna merah</p>
</body>
</html>
You can also specify that only specific HTML elements should be affected by a class.
Latihan 5
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Tidak dapat mengakomodasi CSS, sebab

Selectornya adalah spesial paragraf</h1>
<p class="center">Menggunakan CSS paragraf</p>
</body>
</html>

HTML elements can also refer to more than one class.
Latihan 6
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Tidak ada efek CSS</h1>

<p class="center">Class tengah dan berwarna merah, font size
standard </p>
<p class="center large">Class tengah, berwarna merah dengan
font size 300% (2 selector)</p>
</body>
</html>
The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
Latihan 7
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hallo Anak TIF</h1>
<p>Ini akan menggunakan efect CSS</p>

<p id="para1">Ini juga sama ya</p>
<p>dan ini juga</p>

</body>
</html>
The CSS Grouping Selector
 The grouping selector selects all the HTML elements with the same style definitions.
 Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
 It will be better to group the selectors, to minimize the code.

 To group selectors, separate each selector with a comma.
Latihan 8
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Heading 1 untuk Judul</h1>

<h2>Heading 2 untuk sub judul</h2>
<p>Ini adalah paragraf</p>
</body>
</html>

Notes:
Selector Example Example description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements
3. External CSS
 With an external style sheet, you can change the look of an entire website by changing
just one file!
 Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
Latihan 9 (HTML Code)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Heading 1</h1>
<p>Ini adalah Pragraf</p>
</body>
</html>
 An external style sheet can be written in any text editor, and must be saved with a .css
extension.
 The external .css file should not contain any HTML tags.
 Here is how the "mystyle.css" file looks like:
Latihan 9 (CSS Code)
body {
background-color: lightblue;
}
h1 {
color: navy;

margin-left: 20px;
}
4. Internal CSS
 An internal style sheet may be used if one single HTML page has a unique style.
 The internal style is defined inside the <style> element, inside the head section.
 Exercises 1 – 8 is Internal CSS
5. Inline CSS
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.
Latihan 10
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Ini adalah

heading</h1>
<p style="color:red;">Ini adalah paragrap</p>
</body>
</html>
6. Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets,
the value from the last read style sheet will be used.
Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: navy;
}
Then, assume that an internal style sheet also has the following style for the <h1> element:
h1 {
color: orange;
}
Latihan 11
<!DOCTYPE html>
<html>
<head>


<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>Ini adalah heading</h1>

<p>Paragraf ini adalah kombonasi antara external stylesheet
dan internal style</p>
</body>
</html>
Latihan 12
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>Ini adalah heading</h1>

<p>Kombinasi antara Internal dan Eksternal CSS</p>
</body>
</html>
7. CSS Color
 Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
 In CSS, a color can be specified by using a color name:
Latihan 13
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Preview HTML Code and CSS Color:
8. CSS Background Color
Latihan 14
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</p>
</body>
</html>

9. CSS Text Color
Latihan 15
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,

consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim

veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
10. CSS Border Color
Latihan 16
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 3px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 10px solid Violet;">Hello World</h1>
</body>
</html>
11. CSS Color Values
 In CSS, colors can also be specified using RGB values, HEX values, HSL values,
RGBA values, and HSLA values, Same as color name "Tomato":

 Same as color name "Tomato", but 50% transparent:
Latihan 17
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99,

71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%,
64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>

<h1 style="background-color:rgba(255, 99, 71,
0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9,
100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be

specified using RGB, HEX, HSL, or even transparent colors
using RGBA or HSLA color values.</p>
</body>
</html>
Link of Color CSS Code:

https://www.niagahoster.co.id/blog/daftar-kode-warna-pada-html/
https://www.w3schools.com/colors/colors_picker.asp
12. CSS RGB Value
 In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)

 Each parameter (red, green, and blue) defines the intensity of the color between 0 and
255.
 For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value
(255) and the others are set to 0.
 To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

 To display the color white, all color parameters must be set to 255, like this: rgb(255,
255, 255).
 Experiment:
Latihan 18
<!DOCTYPE html>
<html>
<body>

0)</h1>
255)</h1>
113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238,
130, 238)</h1>
0)</h1>
205)</h1>
<p>In HTML, you can specify colors using RGB values.</p>
</body>
</html>
13. CSS HEX Value
 In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
 Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).

 For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and
the others are set to the lowest value (00).
Latihan 19
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
<p>In HTML, you can specify colors using Hex values.</p>
</body>
</html>
14. HSL Value
 In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)

 Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
 Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
 Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Latihan 20
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%,

50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240,
100%, 50%)</h1>
50%, 47%)</h1>
76%, 72%)</h1>
100%, 50%)</h1>
53%, 58%)</h1>
<p>In HTML, you can specify colors using HSL values.</p>
</body>
</html>
Source:
https://www.w3schools.com/css/default.asp

CSS 01

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CSS 01

Caricato da

Copyright:

Formati disponibili

Dasar Pemrograman dan Desain Web

CASCADING STYLE SET (1)

CSS Element Selector

Mustakim, ST., M.Kom. 1

<p>Ini adalah contoh CSS Element Selector Dasar</p>

<p id="para1">Halo Anak TIF</p>

Mustakim, ST., M.Kom. 2

CSS Class Selector

<h1 class="center">Warna merah dengan menggunakan Heading 1

<h1 class="center">Tidak dapat mengakomodasi CSS, sebab

Mustakim, ST., M.Kom. 3

HTML elements can also refer to more than one class.

<h1 class="center">Tidak ada efek CSS</h1>

The CSS Universal Selector

<h1>Hallo Anak TIF</h1>

<p>Ini akan menggunakan efect CSS</p>

Mustakim, ST., M.Kom. 4

The CSS Grouping Selector

 It will be better to group the selectors, to minimize the code.

<h1>Heading 1 untuk Judul</h1>

Mustakim, ST., M.Kom. 5

Selector Example Example description

.class .intro Selects all elements with class="intro"

#id #firstname Selects the element with id="firstname"

* * Selects all elements

element p Selects all <p> elements

Latihan 9 (HTML Code)

Latihan 9 (CSS Code)

Mustakim, ST., M.Kom. 6

<h1 style="color:blue;text-align:center;">Ini adalah

6. Multiple Style Sheets

Mustakim, ST., M.Kom. 7

<link rel="stylesheet" type="text/css" href="mystyle.css">

<h1>Ini adalah heading</h1>

<h1>Ini adalah heading</h1>

Mustakim, ST., M.Kom. 8

Preview HTML Code and CSS Color:

8. CSS Background Color

<h1 style="background-color:DodgerBlue;">Hello World</h1>

Mustakim, ST., M.Kom. 9

9. CSS Text Color

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim

10. CSS Border Color

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 3px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 10px solid Violet;">Hello World</h1>

11. CSS Color Values

Mustakim, ST., M.Kom. 10

 Same as color name "Tomato", but 50% transparent:

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99,

<p>Same as color name "Tomato", but 50% transparent:</p>

<p>In addition to the predefined color names, colors can be

Link of Color CSS Code:

12. CSS RGB Value

 In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Mustakim, ST., M.Kom. 11

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0,

<p>In HTML, you can specify colors using RGB values.</p>

13. CSS HEX Value

 In CSS, a color can be specified using a hexadecimal value in the form: