Scribd
Upload
3 views

CSS 2nd Part

The document provides an overview of various CSS properties for styling colors, text, lists, tables, backgrounds, links, images, and forms. It includes examples of HTML and CSS code demonstrating how to implement these properties effectively. Key concepts covered include color definitions, text formatting, list styles, table properties, and form styling.

Uploaded by

rchy83194
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS 2nd Part

The document provides an overview of various CSS properties for styling colors, text, lists, tables, backgrounds, links, images, and forms. It includes examples of HTML and CSS code demonstrating how to implement these properties effectively. Key concepts covered include color definitions, text formatting, list styles, table properties, and form styling.

Uploaded by

rchy83194
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

CSS Colors:

some common ways to define colors in CSS are as follows:

1.Color Keywords:
CSS provides a set of predefined color keywords that represent
common colors, such as "red", "blue", "green", etc.

For example: color: red;

2.Hexadecimal Notation:
Colors can be specified using a six-digit hexadecimal code preceded
by a hash (#). Each pair of digits represents the intensity of red, green,
and blue (RGB) components, respectively.

For example: color: #FF0000; represents red, color: #00FF00;


represents green, and color: #0000FF; represents blue.

3.RGB Values:
Colors can also be defined using RGB values, where each component
(red, green, and blue) is represented by an integer between 0 and 255.

For example: color: rgb(255, 0, 0); represents red, color: rgb(0, 255,
0); represents green, and color: rgb(0, 0, 255); represents blue.

Example:
HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph with some text.</p>
<div class="color-box"></div>
</body>
</html>
CSS file:
/* CSS Color Examples */
h1 {
color: red;
}

p{
color: #00FF00;
}

.color-box {
width: 100px;
height: 100px;
background-color: rgb(0, 0, 255);
border: 1px solid red;
}

CSS Text Properties:


1. color: Sets the color of the text. (Value: any valid color value)

2. font-family: Specifies the font family for the text. (Value: font family
names or generic font families)

3. font-size: Sets the size of the text. (Value: length values, percentages,
or keywords like "small", "medium", "large")

4. font-weight: Specifies the weight (boldness) of the text. (Value:


numeric values, keywords like "normal", "bold")

5. text-align: Sets the alignment of the text. (Value: "left", "right",


"center", "justify")

6. text-decoration: Adds decorations like underline or strikethrough to


the text. (Value: "none", "underline", "overline", "line-through")
7. text-transform: Controls the capitalization of the text. (Value: "none",
"uppercase", "lowercase", "capitalize")

Example:
HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Heading</h1>

<p>This is a paragraph of text.</p>

<span class="highlight">This is highlighted text.</span>


</body>
</html>

CSS file:
/* Text Properties */
h1 {
color: blue;
font-size: 24px;
text-align: center;
font-weight: bold;
text-decoration: underline;
}

p{
color: red;
font-family: Arial, sans-serif;
font-size: 18px;
text-align: justify;
}
.highlight {
color: green;
text-transform: uppercase;
}

CSS List Properties:


1. list-style-type: Specifies the style of the list marker. (Values: "none",
"disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-
roman", "upper-roman", "lower-alpha", "upper-alpha", and more)

2. list-style-image: Sets an image as the list marker. (Value: URL of the


image file)

3. list-style-position: Determines the position of the list marker. (Values:


"inside", "outside")
Example:
HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>

CSS file:
/* List Properties */
ul {
list-style-type: square;
}

ol {
list-style-type: upper-roman;
list-style-position: inside;
list-style-image: url(image name);

Custom list numbering using content property:


To create custom list numbering using the content property in CSS, you
can use the ::before pseudo-element along with the counter and counter-
increment properties.
Example:
Html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Custom List Numbering Example</h1>
<ul class="custom-list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>
Css file:
.custom-list {
list-style: none;
counter-reset: custom-counter;
}

.custom-list li::before {
counter-increment: custom-counter;
content: counter(custom-counter) ".";
margin-right: 5px;
color: #FF0000;
font-weight: bold;
font-size:20px;
}

1. .custom-list: Removes the default bullet points from the unordered list
by setting list-style to none. It also resets the value of a custom
counter using the counter-reset property. We'll use this counter to
generate the custom list numbers.
2. .custom-list li::before: This selector targets the pseudo-element
::before of each list item (<li>) within the custom-list class.
3. counter-increment: Increments the value of the custom counter by
1 for each list item.
4. content: Specifies the content that should be displayed before each
list item. In this case, we use the counter() function to retrieve the
current value of the custom counter and append a period (.) after it.
CSS Table Properties:
1. border-collapse: Specifies whether the table cells share borders or
have separate borders. (Values: "collapse", "separate")

2. border-spacing: Sets the spacing between adjacent cells when


border-collapse is set to "separate". (Value: length values)

3. width: Sets the width of the table. (Value: length values, percentages)

4. text-align: Sets the horizontal alignment of the content within table


cells. (Values: "left", "right", "center", "justify")

5. vertical-align: Sets the vertical alignment of the content within table


cells. (Values: "top", "middle", "bottom")

Example:
HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>

CSS file (styles.css)


/* Table Properties */
table {
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid black;
padding: 8px;
text-align: center;
vertical-align: middle;
}

CSS Background Properties:


1. background-color: Sets the background color of an element. (Value:
any valid color value)

2. background-image: Specifies one or more background images for an


element. (Value: URL of the image file)

3. background-repeat: Determines how a background image is


repeated. (Values: "repeat", "repeat-x", "repeat-y", "no-repeat")

4. background-position: Sets the starting position of a background


image. (Values: length values, percentages, keywords like "top",
"bottom", "center", "left", "right")
5. background-size: Specifies the size of a background image. (Values:
length values, percentages, keywords like "cover", "contain")

Example:
HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS file:
/* Background Properties */
.box {
width: 200px;
height: 200px;
background-color: #f2f2f2;
background-image: url("background-image.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

CSS Link Formatting Properties:


1. color: Sets the color of the link text. (Value: any valid color value)

2. text-decoration: Adds decorations to the link text, such as underline


or strikethrough. (Values: "none", "underline", "overline", "line-
through")

3. font-weight: Specifies the weight (boldness) of the link text. (Values:


numeric values, keywords like "normal", "bold")

4. cursor: Sets the mouse cursor appearance when hovering over the
link. (Values: "auto", "pointer", "default", and more)
HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">This is a link</a>
</body>
</html>
CSS file:
/* Link Formatting Properties */
a{
color: blue;
text-decoration: underline;
font-weight: bold;
cursor: pointer;
}

CSS Image Formatting Properties:


1. width: Sets the width of the image. (Value: length values,
percentages)

2. height: Sets the height of the image. (Value: length values,


percentages)

3. border: Sets the border properties around the image. (Value: border
properties such as width, style, and color)

4. border-radius: Sets the border radius (rounded corners) of the


image. (Value: length values, percentages)

5. object-fit: Specifies how the image should be resized to fit within its
container. (Values: "fill", "contain", "cover", "none", "scale-down")
6. object-position: Sets the starting position of the image within its
container. (Values: length values, percentages, keywords like "top",
"bottom", "center", "left", "right")

7. opacity: Sets the transparency level of the image. (Value: a decimal


value between 0 and 1)

8. box-shadow: Adds a shadow effect around the image. (Value:


shadow properties such as color, offset, blur radius)

Example:
HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="example.jpg" alt="Example Image">
</body>
</html>

CSS file:
/* Image Formatting Properties */
img {
width: 300px;
height: auto;
border: 1px solid black;
border-radius: 10px;
object-fit: cover;
object-position: center;
opacity: 0.8;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
CSS Form Formatting Properties:
CSS form properties allow you to style and customize the appearance of
HTML form elements. These properties help you control the layout, colors,
borders, and other visual aspects of form inputs, buttons, checkboxes, and
more.
Example:
Html File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Registration Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"
placeholder="Enter your name">

<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="Enter your email">

<label for="password">Password:</label>
<input type="password" id="password" name="password"
placeholder="Enter your password">

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">


<label for="female">Female</label>

<label for="interests">Interests:</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>

<input type="checkbox" id="sports" name="interests" value="sports">


<label for="sports">Sports</label>

<input type="checkbox" id="reading" name="interests" value="reading">


<label for="reading">Reading</label>

<input type="submit" value="Submit">


</form>
</body>
</html>

CSS File:

h1 {
color: blue;
}

form {
width: 300px;
margin: 0 auto;
border: 2px solid red;
background-color: aquamarine;

label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 90%;
padding: 5px;
margin-bottom: 10px;
}

input[type="radio"],
input[type="checkbox"] {
margin-bottom: 10px;
display: inline;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
margin-left: 5px;
display: inline;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #45a049;
}

In this example,
1. h1 - Sets the color of the heading text to blue.
2. form - Styles the form element. It sets the width to 300 pixels and
centers it horizontally using margin: 0 auto;.

3. label - Displays each label element as a block and adds a bottom


margin of 5 pixels.

4. input[type="text"], input[type="email"], input[type="password"] - Styles


the text, email, and password input fields. They have a width of 90%,
5 pixels of padding, and a bottom margin of 10 pixels.

5. input[type="submit"] - Styles the submit button. It sets the background


color to green (#4CAF50), the text color to white, padding of 10 pixels
vertically and 20 pixels horizontally, no border, and a cursor pointer.

6. input[type="submit"]:hover - Changes the background color of the


submit button to a darker shade of green (#45a049) when hovered.

You might also like