Scribd
Upload
31 views

CSS Chapter 2.1

This document discusses CSS layout, comments, colors, and backgrounds. It covers: - CSS comments which start with /* and end with */ and can span multiple lines. Comments explain code and are ignored by browsers. - Specifying colors using predefined names, RGB, HEX, HSL, RGBA, HSLA values for backgrounds, text, and borders. - Background properties like background-color to set the background color of elements, and opacity to specify transparency from 0.0-1.0. - Border properties including border-style to set styles like solid, dotted, dashed, border-width to set thickness, and border-color to specify individual side colors.

Uploaded by

Raymond Puno
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views

CSS Chapter 2.1

This document discusses CSS layout, comments, colors, and backgrounds. It covers: - CSS comments which start with /* and end with */ and can span multiple lines. Comments explain code and are ignored by browsers. - Specifying colors using predefined names, RGB, HEX, HSL, RGBA, HSLA values for backgrounds, text, and borders. - Background properties like background-color to set the background color of elements, and opacity to specify transparency from 0.0-1.0. - Border properties including border-style to set styles like solid, dotted, dashed, border-width to set thickness, and border-color to specify individual side colors.

Uploaded by

Raymond Puno
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

CSS

Chapter 2
Layout, Comments, Colors, and Backgrounds
CSS
Comments
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;
}
CSS Comments
• You can add comments wherever you want in the code:

Example
p{
color: red; /* Set text color to red */
}
CSS Comments
• Comments can also span multiple lines:

Example
/* This is
a multi-line
comment */

p{
color: red;
}
HTML and CSS Comments
• From the HTML tutorial, you learned that you can add comments to your
HTML source by using the <!--...--> syntax.
• In the following example, we use a combination of HTML and CSS
comments:
CSS Colors
CSS Colors
• Colors are specified using predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.
• In CSS, a color can be specified by using a predefined color
name:
CSS Background Color

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
CSS Text Color
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
CSS Border Color
Example
<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>
CSS Color Values
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
CSS
Backgrounds
CSS background-color
The background-color property specifies the background color of an element.

Example
body {
background-color: lightblue;
}
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:

h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
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:

Example
div {
background-color: green;
opacity: 0.3;
}
Opacity / Transparency
CSS Borders
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
CSS Border Style
• 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).
CSS Border Style
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
p.one { border-style: solid;
border-width: 5px;
}

p.two { p.three {
border-style: solid; border-style: dotted;
border-width: medium; border-width: 2px;
} }

p.four {
border-style: dotted;
border-width: thick;
}
CSS Border Width
Specific Side Widths
• The border-width property can have from one to four values (for the top border, right
border, bottom border, and the left border):
CSS Border color
Specific Border color
Specific Border sides

You might also like