Tampilkan postingan dengan label Materi CSS. Tampilkan semua postingan

Senin, 01 Maret 2021

Materi CSS - Pertemuan 8 - CSS Margin

CSS Margin

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Individual Sides

CSS has properties for specifying the margin for each side of an element:

margin-top
margin-right
margin-bottom
margin-left

All the margin properties can have the following values:

auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>

</html>

Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

margin-top
margin-right
margin-bottom
margin-left

If the margin property has four values:
margin: 25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px Example <!DOCTYPE html> <html> <head> <style> div { border: 1px solid black; margin: 25px 50px 75px 100px; background-color: lightblue; } </style> </head> <body> <h2>The margin shorthand property - 4 values</h2> <div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div> <hr> </body> </html>

If the margin property has three values:

margin: 25px 50px 75px;

top margin is 25px
right and left margins are 50px
bottom margin is 75px

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin: 25px 50px 75px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>

</html>

If the margin property has two values:

margin: 25px 50px;

top and bottom margins are 25px
right and left margins are 50px

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

margin: 25px 50px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>

</body>

</html>

The auto Value

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

width:300px;

margin: auto;

border: 1px solid red;

}

</style>

</head>

<body>

<h2>Use of margin:auto</h2>

<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>

This div will be horizontally centered because it has margin: auto;

</div>

</body>

</html>

Minggu, 21 Februari 2021

Materi CSS - Pertemuan 7 - CSS Border

CSS Border

The CSS border properties allow you to specify the style, width, and color of an element's border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

CSS Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:

Example

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-width: 5px;

}

p.two {

border-style: solid;

border-width: medium;

}

p.three {

border-style: dotted;

border-width: 2px;

}

p.four {

border-style: dotted;

border-width: thick;

}

p.five {

border-style: double;

border-width: 15px;

}

p.six {

border-style: double;

border-width: thick;

}

</style>

</head>

<body>

<h2>The border-width Property</h2>

<p>This property specifies the width of the four borders:</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.

Always specify the "border-style" property to set the borders first.</p>

</body>

</html>

CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent

Example

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-color: red;

}

p.two {

border-style: solid;

border-color: green;

}

p.three {

border-style: dotted;

border-color: blue;

}

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>

<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>

</html>

CSS Border - Individual Sides

From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

Example

<!DOCTYPE html>

<html>

<head>

<style>

p {

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-left-style: solid;

}

</style>

</head>

<body>

<h2>Individual Border Sides</h2>

<p>2 different border styles.</p>

</body>

</html>

So, here is how it works:

If the border-style property has four values:

border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed

If the border-style property has three values:

border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double

If the border-style property has two values:

border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid

If the border-style property has one value:

border-style: dotted;
- all four borders are dotted

Example

<!DOCTYPE html>

<html>

<head>

<style>

body {

text-align: center;

}

/* Four values */

p.four {

border-style: dotted solid double dashed;

}

/* Three values */

p.three {

border-style: dotted solid double;

}

/* Two values */

p.two {

border-style: dotted solid;

}

/* One value */

p.one {

border-style: dotted;

}

</style>

</head>

<body>

<h2>Individual Border Sides</h2>

<p class="four">4 different border styles.</p>

<p class="three">3 different border styles.</p>

<p class="two">2 different border styles.</p>

<p class="one">1 border style.</p>

</body>

</html>

CSS Border - Shorthand Property

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

Example

<!DOCTYPE html>

<html>

<head>

<style>

p {

border: 5px solid red;

}

</style>

</head>

<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color.</p>

</body>

</html>

You can also specify all the individual border properties for just one side:

Left Border

<!DOCTYPE html>

<html>

<head>

<style>

p {

border-left: 6px solid red;

background-color: lightgrey;

}

</style>

</head>

<body>

<h2>The border-left Property</h2>

<p>This property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p>

</body>

</html>

CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

<!DOCTYPE html>

<html>

<head>

<style>

p.normal {

border: 2px solid red;

}

p.round1 {

border: 2px solid red;

border-radius: 5px;

}

p.round2 {

border: 2px solid red;

border-radius: 8px;

}

p.round3 {

border: 2px solid red;

border-radius: 12px;

}

</style>

</head>

<body>

<h2>The border-radius Property</h2>

<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>

<p class="round1">Round border</p>

<p class="round2">Rounder border</p>

<p class="round3">Roundest border</p>

</body>

</html>

Minggu, 14 Februari 2021

Materi CSS - Pertemuan 6 - CSS Backgrounds

CSS Backgrounds

The CSS background properties are used to define the background effects for elements.

In these chapters, you will learn about the following CSS background properties:

background-color
background-image
background-repeat
background-attachment
background-position

CSS Backgrounds-color

The background-color property specifies the background color of an element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

With CSS, a color is most often specified by:

a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

Other Elements

You can set the background color for any HTML elements:

Example

Here, the <h1>, <p>, and <div> elements will have different background colors:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}

div.first {
opacity: 0.1;
}

div.second {
opacity: 0.3;
}

div.third {
opacity: 0.6;
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>

<div class="first">
<h1>opacity 0.1</h1>
</div>

<div class="second">
<h1>opacity 0.3</h1>
</div>

<div class="third">
<h1>opacity 0.6</h1>
</div>

<div>
<h1>opacity 1 (default)</h1>
</div>

</body>
</html>

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 128, 0);
}

div.first {
background: rgba(0, 128, 0, 0.1);
}

div.second {
background: rgba(0, 128, 0, 0.3);
}

div.third {
background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>With opacity:</p>

<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>

<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>

<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>

<div>
<h1>opacity 1</h1>
</div>

<p>With RGBA color values:</p>
<div class="first">
<h1>10% opacity</h1>
</div>

<div class="second">
<h1>30% opacity</h1>
</div>

<div class="third">
<h1>60% opacity</h1>
</div>

<div>
<h1>default</h1>
</div>

<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>

</body>
</html>

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

The background image can also be set for specific elements, like the <p> element:

<!DOCTYPE html>
<html>
<head>
<style>
p {
background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>

Minggu, 31 Januari 2021

Materi CSS - Pertemuan 4 - CSS Comments & Colors

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.

Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

Example

/* This is a single-line comment */
p {
color: red;
}

You can add comments wherever you want in the code:

Example

p {
color: red; /* Set text color to red */
}

Comments can also span multiple lines:

Example

/* This is
a multi-line
comment */

p {
color: red;
}

HTML and CSS Comments

In the following example, we use a combination of HTML and CSS comments:

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>


<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, a color can be specified by using a predefined color name:

<!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>

CSS Background Color

You can set the background color for HTML elements:

<!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>

CSS Text Color

You can set the color of text:

<!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>

CSS Border Color

You can set the color of borders:

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

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":

<!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>

Minggu, 24 Januari 2021

Materi CSS - Pertemuan 3 - How To Add CSS

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

1. External CSS

2. Internal CSS

3. Inline CSS

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.

Example

External styles are defined within the <link> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</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:

"mystyle.css"

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;

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.

Example

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

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.

Example

Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.

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;
}

Example

If the internal style is defined after the link to the external style sheet, the <h1> elements will be "orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

Example

However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be "navy":

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Senin, 01 Maret 2021

Materi CSS - Pertemuan 8 - CSS Margin

Individual Sides

Example

Example

Example

Example

The auto Value

Example

Minggu, 21 Februari 2021

Materi CSS - Pertemuan 7 - CSS Border

CSS Border Style

Example

CSS Border Width

Example

CSS Border Color

Example

CSS Border - Individual Sides

Example

Example

CSS Border - Shorthand Property

Example

Left Border

CSS Rounded Borders

Minggu, 14 Februari 2021

Materi CSS - Pertemuan 6 - CSS Backgrounds

Example

<!DOCTYPE html><html><head><style>body { background-color: lightblue;}</style></head><body><h1>Hello World!</h1><p>This page has a light blue background color!</p></body></html>

Example

Opacity / Transparency

Transparency using RGBA

CSS background-image

Minggu, 31 Januari 2021

Materi CSS - Pertemuan 4 - CSS Comments & Colors

CSS Comments

Example

p { color: red; /* Set text color to red */ }

Comments can also span multiple lines:

Example

/* This isa multi-linecomment */ p { color: red; }

HTML and CSS Comments

In the following example, we use a combination of HTML and CSS comments:

<!DOCTYPE html><html><head><style>p { color: red; /* Set text color to red */} </style></head><body><h2>My Heading</h2><p>Hello World!</p><p>This paragraph is styled with CSS.</p><p>CSS comments are not shown in the output.</p></body></html>

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

CSS Background Color

CSS Text Color

CSS Border Color

CSS Color Values

Minggu, 24 Januari 2021

Materi CSS - Pertemuan 3 - How To Add CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

p {
color: red; /* Set text color to red */
}

/* This is
a multi-line
comment */

p {
color: red;
}

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>

<h2>My Heading</h2>


<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>