Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

CSS NOTES

CSS syntax defines the structure for writing CSS code, which includes selectors and declaration blocks. Selectors target HTML elements, while declaration blocks contain properties and values that style those elements. Different types of selectors, such as class and ID selectors, provide flexibility and specificity in applying styles.

Uploaded by

Namulindwa Angella
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

CSS NOTES

CSS syntax defines the structure for writing CSS code, which includes selectors and declaration blocks. Selectors target HTML elements, while declaration blocks contain properties and values that style those elements. Different types of selectors, such as class and ID selectors, provide flexibility and specificity in applying styles.

Uploaded by

Namulindwa Angella
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 51

CSS SYNTAX

CSS syntax refers to the rules that define how CSS code is written and interpreted by web browsers to
style HTML or XML documents.

A CSS rule consists of a selector and a declaration block.

The syntax of a CSS declaration is:

selector {
property:value;
}
Example:

Explanation of the components of CSS Syntax

1. Selectors: Selectors are the HTML elements or tags to which CSS styles will be applied.
2. Declaration Block: The declaration block contains one or more declarations separated by
semicolons. Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
3. Properties: It is a type of attribute that is present in HTML tags. All the attributes of the HTML will be
converted to the CSS properties. The CSS properties like color, border, font, size, spacing,
positioning etc.
4. Values: Values are the assigned to properties to define their behavior.

Rules of style definitions

1. Every CSS definition has to have a selector and a declaration. The declaration follows the selector and
uses curly braces.
2. The declaration consists of one or more properties separated with a semicolon.
3. Every property has a name, colon and a value.
4. A property can have multiple values separated with a comma (e.g. "Verdana, Arial, Franklin Gothic
Book").

Last updated 18/11/2024


5. Along with a value, can also be a unit of measure (e.g. "9pt", where "pt" stands for points). No space is
allowed between the value and the unit.
6. When writing CSS code, you can use whitespaces as needed – new lines, spaces, whatever makes
your code more readable.

CSS Selectors
Selectors are the HTML elements to which CSS styles will be applied.

Types of Selectors

1. Type or Element Selectors

These selectors use the names of HTML elements. The only difference is that we remove the brackets. So,
the HTML tag become P

1. P {
2. text-align: center;
3. color: blue;
4. }

2. Class selectors

These selectors use the CLASS attribute of HTML elements. We can assign a class identifier to several
elements of a single type when we want to display variations from the norm. The CLASS Selector is
preceded with a dot (.) called the flag character, followed by the 'class name' of our choice

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>

Last updated 18/11/2024


13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you should use the
element name with class selector.

Let's see an example.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

Advantages of using class selectors

i) Reusability: Classes can be applied to multiple elements across different parts of a webpage or even
multiple pages, ensuring that you can reuse the same styles without duplicating code. This allows for
consistent styling of similar elements, such as buttons, headings, or content blocks, no matter where
they appear on the page.

ii) Target Specific Elements: Class selectors provide more precise control over which elements to style
compared to tag selectors, allowing you to style specific elements without affecting others of the same
type.

Last updated 18/11/2024


iii) Maintainability: Changes to the style of a class automatically update all elements that share that
class, making it easier to maintain and update styles across large projects. By assigning a class, you
avoid repeating the same inline styles or rewriting style rules multiple times.

iv) Combination with Other Selectors: Class selectors can be combined with other selectors like tag, ID,
or attribute selectors to create more complex rules (e.g., styling only certain <p> elements within a
specific class).

v) Multiple Classes on a Single Element: Multiple classes can be applied to a single HTML element,
enabling flexible combinations of styles. For example, you might apply a .text-bold class and
a .highlight class to the same element, adding both bold text and a background color.

vi) Framework and Library Compatibility


 Compatible with CSS Frameworks: Many CSS frameworks like Bootstrap or Tailwind use class
selectors extensively to create responsive, pre-designed components. By using class selectors,
you can easily leverage these frameworks for rapid development.
 Ease of Integration: Class selectors allow for better integration with JavaScript libraries and tools,
making it easier to manipulate styles dynamically.

3. ID selectors

An ID selector uses the ID attribute of an HTML element. It is used to apply a style to an individual element
on the Web page. An id is always unique within the page so it is chosen to select a single, unique element.
An ID selector is preceded by a hash (#) mark.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>

4. CSS Universal Selector


Last updated 18/11/2024
The universal selector is used as a wildcard character. It selects all the elements on the pages.

1. <style>
2. * {
3. color: green;
4. font-size: 20px;
5. }

5. CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.

1. h1, h2, p {
2. text-align: center;
3. color: blue;
4. }

6. Descendant Selectors

Syntax:

selector1 selector2 {

/* property declarations */

Selects elements that are descendants of a specified element.

It combines two selectors in which the first selector represents an ancestor (parent, parent's parent, etc.),
and the second selector represents descendants.

The elements matched by the second selector are selected if they have an ancestor element that matches
the first selector.

Example 1

1. <!DOCTYPE html>
2. <html>
3. <head>

Last updated 18/11/2024


4. <style>
5. div p {
6. background-color: lightblue;
7. font-weight: bold;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <p> This is 1st paragraph in the div. </p>
14. <p> This is 2nd paragraph in the div. </p>
15. <div>
This is second div in the first div
16. <p> This is the paragraph in second div. It will also be affected. </p>
</div>
17. </div>
18. <p> Paragraph 4. It will not be affected because it is not in the div. </p>
19. </body>
20. </html>

Output:

We can witness in the result below that the first paragraph, second paragraph, and third paragraph have
been styled as these three <p> elements are the descendant element of the parent element "<div>". The
fourth paragraph has no effect because it is not a child of the <div> element.

Example 2

Last updated 18/11/2024


1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Constructing two tables and applying style on them utilizing the descendant selector</titl
5. <style>
6. body {
7. font-family: 'Courier New', Courier, monospace;
8. background: burlywood;
9. }
10. .employee-table {
11. border: 2px solid brown;
12. }
13. .product-table {
14. border: 2px solid purple;
15. }
16. .employee-table th {
17. border: 2px dotted red;
18. }
19. .product-table th {
20. border: 2px dotted purple;
21. }
22. </style>
23. </head>
24. <body>
25. <h1>Applying style on tables utilizing the descendant selector</h1>
26. <div>
27. <caption>
28. Employee Table
29. </caption>
30. <table class="employee-table">
31. <tr>
32. <th>ID</th>
33. <th>Name</th>
34. <th>Department</th>

Last updated 18/11/2024


35. <th>Address</th>
36. <th>Salary</th>
37. </tr>
38. <tr>
39. <td>501</td>
40. <td>Abhishek</td>
41. <td>Finance</td>
42. <td>Mumbai</td>
43. <td>45,000</td>
44. </tr>
45. <tr>
46. <td>502</td>
47. <td>Ankita</td>
48. <td>Marketing</td>
49. <td>Mumbai</td>
50. <td>60,000</td>
51. </tr>
52. <tr>
53. <td>503</td>
54. <td>Isha</td>
55. <td>Finance</td>
56. <td>Ghaziabad</td>
57. <td>50,000</td>
58. </tr>
59. <tr>
60. <td>504</td>
61. <td>Aishwarya</td>
62. <td>Finance</td>
63. <td>Noida</td>
64. <td>75,000</td>
65. </tr>
66. </table>
67. </div> <br>
68. <caption>

Last updated 18/11/2024


69. Product Table
70. </caption>
71. <table class="product-table">
72. <tr>
73. <th>ID</th>
74. <th>Name</th>
75. <th>Company</th>
76. <th>Quantity</th>
77. <th>Price</th>
78. </tr>
79. <tr>
80. <td>201</td>
81. <td>Laptop</td>
82. <td>Dell</td>
83. <td>2</td>
84. <td>60,000</td>
85. </tr>
86. <tr>
87. <td>202</td>
88. <td>Refrigerator</td>
89. <td>Godrej</td>
90. <td>1</td>
91. <td>75,000</td>
92. </tr>
93. <tr>
94. <td>203</td>
95. <td>Oven</td>
96. <td>LG</td>
97. <td>5</td>
98. <td>20,000</td>
99. </tr>
100. <tr>
101. <td>204</td>
102. <td>Washing Machine</td>

Last updated 18/11/2024


103. <td>LG</td>
104. <td>2</td>
105. <td>55,000</td>
106. </tr>
107. </table>
108. </body>
109. </html>

Example 3
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Constructing two lists and applying style on them utilizing the descendant selector</title>
5. <style>
6. body {
7. font-family: 'Courier New', Courier, monospace;
8. background: white;
9. }
10. .batsmen h3 {
11. color: red;
12. }
13. .batsmen li {
14. color: hotpink;
15. }
16. .bowlers li {
17. color: olive;
18. }
19. </style>
20. </head>
21. <body>
22. <h1>Applying style on the lists utilizing the descendant selector</h1>
23. <div class="batsmen">
24. <h3>List of Indian Cricket Batsmen</h3>
25. <ol>

Last updated 18/11/2024


26. <li>Sachin Tendulkar</li>
27. <li>Virendra Sehwag</li>
28. <li>MS Dhoni</li>
29. <li>Kapil Dev</li>
30. <li>Irfan Pathan</li>
31. <li>Virat Kohli</li>
32. <li>Gautam Gambhir</li>
33. <li>Anil Kumble</li>
34. <li>Shikar Dhawan</li>
35. <li>Rohit Sharma</li>
36. </ol>
37. </div>
38. <div class="bowlers">
39. <h3>List of Indian Cricket Bowlers</h3>
40. <ul>
41. <li>Ravindra Jadeja</li>
42. <li>Irfan Pathan</li>
43. <li>Ashish Nehra</li>
44. <li>Arshdeep Singh</li>
45. <li>Jaspreet Bumrah</li>
46. <li>Hardik Pandya</li>
47. <li>Ravichandran Ashwin</li>
48. <li>Shahbaz Ahmed</li>
49. <li>Shardul Thakur</li>
50. <li>Umesh Yadav</li>
51. </ul>
52. </div>
53. </body>
54. </html>

Output:

Last updated 18/11/2024


7. Attribute Selectors

CSS attribute selectors allow you to select elements based on their attributes and values.

Types of Attribute Selectors:

i) [attribute]: Selects elements that have the specified attribute, regardless of its value.

Example

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>


<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Output:

Last updated 18/11/2024


ii) [attribute="value"]: Selects elements where the attribute's value is exactly equal to the specified
value.

Example:

Using example i) above, the code could be modified as:

a[target="_blank"] {
background-color: yellow;
}

Output:

iii) [attribute~="value"]: Selects elements where the attribute’s value contains a space-separated list of
words, and one of them matches the specified value.

Example

<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute~="value"] Selector</h2>


<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>

Last updated 18/11/2024


Output:

This selects all elements with a title attribute that contains a space-separated list of words, one of
which is "flower":

Note: The example above will match elements with title="flower", title="summer flower", and
title="flower new", but not title="my-flower" or title="flowers".

iv) [attribute|="value"]: Selects elements where the attribute's value is either exactly the specified value
or starts with the specified value followed by a hyphen (-)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>

Last updated 18/11/2024


<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

Output:

v) [attribute^="value"]: Selects elements where the attribute's value starts with the specified value.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>


<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
<p class="content">Are you learning CSS?</p>
</body>
</html>

Last updated 18/11/2024


vi) [attribute$="value"]: Selects elements where the attribute's value ends with the specified value.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>

Output:

vii) [attribute*="value"]: Selects elements where the attribute's value contains the specified value
anywhere in the string.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>

Last updated 18/11/2024


<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>

8. Pseudo-Class Selector

Pseudo-class selectors are used to style elements based on their state or position within the document.

These pseudo-classes are particularly useful for targeting elements without needing to add extra classes or
IDs to the HTML.

Syntax

The syntax of pseudo-classes: selector:pseudo-class {property:value;}

Anchor Pseudo-classes

Anchor tags (<a>elements) in HTML can have different states, which are commonly styled using CSS to
provide visual feedback to users. Some of these states are:

i) Hover State: The hover state is activated when the user hovers their mouse cursor over the anchor
tag.

ii) Focus State: The focus state occurs when the anchor tag receives keyboard input focus, usually
through the tab key. This state is particularly important for accessibility, allowing users to navigate links
using the keyboard.

iii) Active State: Targets the anchor element when it is in the process of being clicked (i.e., the moment
when the mouse button is pressed down but not yet released).

iv) Visited State: The visited state applies to anchor tags that have been previously visited by the user.
Browsers typically remember visited links and apply different styles to distinguish them from normal
links.

v) Link State: Targets unvisited links, i.e., links the user has not clicked yet.

Example:

/* selector:pseudo-class {property:value;} */

/* Normal State */
a{ color: blue; }

Last updated 18/11/2024


/* Link State */
a:link { color: yellow; }

/* Visited State */
a:visited { color: pink }

/* Hover State */
a:hover { color: green; }

/* Active State */
a:active { color: red; }

/* Focus State */
a:focus { outline: 2px solid red; }

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.

Assignment
Write three files, index.html, registration.html and mystyle.css, and design a home page with the topic for
example, "My School." The home page should contain the following elements:
 Image
 Link
 Table
 List

Use CSS Selectors: type selector, id selector, class selector, attribute selector, pseudo-class

HTML BLOCK AND INLINE ELEMENTS

Block-level Element
A block-level element always starts on a new line, and the browsers automatically add some space (a
margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it
can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

Last updated 18/11/2024


The <div> element defines a division or a section in an HTML document.

Example:

<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start on a new line and take
up the full width available (stretches out to the left and right as far as it can).</p>
</body>
</html>

Output:

The <div> Element


The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example 1:

<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>
<div>
<h1>HTML DIV Example</h1>
Lorem Ipsum <div>I am a div</div> dolor sit amet.
<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>
<div>
</body>
</html>
Last updated 18/11/2024
Output:

Example:

<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>

Output:

Aligning <div> elements side by side

When building web pages, you often want to have two or more <div> elements side by side, like this:

Last updated 18/11/2024


There are different methods for aligning elements side by side, all include some CSS styling, and one of
these methods is grid method.

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to
design web pages without having to use floats and positioning.

Sounds almost the same as flex, but has the ability to define more than one row and position each row
individually.

The CSS grid method requires that you surround the <div> elements with another <div> element and give
the status as a grid container, and you must specify the width of each column.

Example 1:

<!DOCTYPE html>
<html>
<head>
<style>
#grid-container {
display: grid;
grid-template-columns: 50% 50%;
}
</style>
</head>
<body>
<h1>Grid Example</h1>
<p>Align three DIV elements side by side.</p>
<div id = "grid-container">
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>

Last updated 18/11/2024


</div>
</body>
</html>

Output:

Assignment:

Also read about float, inline-block and flex methods

Other Examples of block-level elements

Inline Elements
An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

The most commonly used inline element is: <span>

The <span> Element

Last updated 18/11/2024


The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example 1:

<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has
<span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
</body>
</html>

Output:

Example 2:

<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a
paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much
width as necessary.</p>
</body>
</html>

Output:

Summary

 A block-level element always starts on a new line and takes up the full width available
Last updated 18/11/2024
 An inline element does not start on a new line and it only takes up as much width as necessary
 The <div> element is a block-level and is often used as a container for other HTML elements
 The <span> element is an inline container used to mark up a part of a text, or a part of a document

Last updated 18/11/2024


CSS TEXT AND FONT PROPERTIES

CSS Text Properties


1. Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

2. Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each
word.

Example to demonstrate text-align and text-transform properties

<!DOCTYPE html>
<html>
<head>
<style>
.uppercase {
text-align:left
text-transform: uppercase;
}

.lowercase {
text-align: right;
text-transform: lowercase;
}

.capitalize {
text-align:center;
text-transform: capitalize;
}
</style>
</head>
<body>

<h1>Using the text-transform property</h1>


<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>

</body>

Last updated 18/11/2024


</html>

3. Text Color

The color property is used to set the color of the text. Colors in CSS can be specified by the following
methods: color name, Hexadecimal colors, rgb colors etc

i) Color name - like "red"

All modern browsers support about 140 colors

ii) Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color. All values must be between 00 and FF.

Example

.p1 {background-color: #ff0000;} /* red */


.p2 {background-color: #00ff00;} /* green */
.p3 {background-color: #0000ff;} /* blue */

iii) Short hex code (#f60):

The color is represented using a shorthand notation for hexadecimal colors, where each character is
repeated. This code is equivalent to #ff6600.

iv) RGB Colors

An RGB color value is specified with the rgb() function, which has the following syntax: rgb (red, green,
blue)

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0
and 255 or a percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest
value (255) and the others are set to 0.

Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).

.p1 {background-color: rgb (255, 0, 0);} /* red */


.p2 {background-color: rgb (0, 255, 0);} /* green */
.p3 {background-color: rgb (0, 0, 255);} /* blue */

4. CSS Text Decoration

Last updated 18/11/2024


1. text-decoration-line Used to add a decoration line to a text Overline, underline,
line-through, overline
underline

3. text-decoration-style Used to set the style of the decoration line Solid, double, dotted,
dashed, wavy

Example 1

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}

h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}

h3 {
text-decoration-line: underline;
text-decoration-color: green;
}

p{
text-decoration-line: overline underline;
text-decoration-color: purple;
}
</style>
</head>
<body>

<h1>Overline text decoration</h1>


<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p>Overline and underline text decoration.</p>

Last updated 18/11/2024


</body>
</html>

Example 2

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration-line: underline;
text-decoration-style: solid; /* this is default */
}

h2 {
text-decoration-line: underline;
text-decoration-style: double;
}

h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}

p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}

p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}

p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 5px;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p class="ex1">A paragraph.</p>
<p class="ex2">Another paragraph.</p>
<p class="ex3">Another paragraph.</p>

Last updated 18/11/2024


</body>
</html>

5. Text Spacing

i) text-indent: The text-indent property is used to specify the indentation of the first line of text

ii) letter-spacing: The letter-spacing property is used to specify the space between the characters in a
text

iii) word-spacing: The word-spacing property is used to specify the space between the words in a text

iv) line-height: The line-height property is used to specify the space between lines

v) white-space: The white-space property specifies how white-space inside an element is handled.

Example 1: Demonstrating text-indent, letter-spacing and word spacing properties

<!DOCTYPE html>
<html>
<head>
<style>
h1{
letter-spacing:5px;
}
p{
text-indent: 50px;
word-spacing: 10px;
}
</style>
</head>
<body>
<h1>Using text-indent</h1>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in
my mind ever since. </p>
</body>
</html>

Example 2: Demonstrating line-height property

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}

Last updated 18/11/2024


p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<h1>Using line-height</h1>
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>

Example 3: Demonstrating white-space property

<!DOCTYPE html>
<html>
<head>
<style>
p{
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Using white-space</h1>
<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>
<p>Try to remove the white-space property to see the difference!</p>

Last updated 18/11/2024


</body>
</html>

Output:

Font Properties

1. font-family property: Used to specify the font of a text

2. font-style property: Used to specify italic text.

This property has three values:

i) normal - The text is shown normally


ii) italic - The text is shown in italics
iii) oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example: Demonstrating font-family and font-style property


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
.p1 {
font-family: "Times New Roman", Times, serif;
font-style: normal;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
}
.p3 {
font-style: oblique;
font-family: "Lucida Console", "Courier New", monospace;

Last updated 18/11/2024


}

</style>
</head>
<body>

<h1>The font-style property</h1>

<p class="p1">This is a paragraph in normal style and of Times New Roman</p>


<p class="p2">This is a paragraph in italic style and arial. </p>
<p class="p3">This is a paragraph in oblique style and of Lucida Console. </p>

</body>
</html>

3. font-size property: Sets the size of the text

In CSS, there are several units of measurement used to express the size of elements. Here are four
commonly used units:

i) Pixels (px): Represents an absolute unit of measurement. One px is generally equivalent to one pixel
on the screen.

ii) Percentage (%): A relative unit used to specify a size as a percentage of the parent element.
Example: width: 50%; (which means half the width of the parent element)

iii) Em (em): A relative unit of measurement that is based on the font size of the element's parent. For
example, 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of
1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

iv) Viewport Width (vw): A relative unit based on the viewport width. 1vw is equal to 1% of the viewport's
width.

Example 1: Demonstrating font-family, font-style and font-size property


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
.p1 {
font-family: "Times New Roman", Times, serif;
font-style: normal;

Last updated 18/11/2024


font-size:20px;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-size:120%;
}
.p3 {
font-style: oblique;
font-family: "Lucida Console", "Courier New", monospace;
}

</style>
</head>
<body>

<h1>The font-style property</h1>

<p class="p1">This is a paragraph in normal style and of Times New Roman</p>


<p class="p2">This is a paragraph in italic style and arial. </p>
<p class="p3">This is a paragraph in oblique style and of Lucida Console. </p>

</body>
</html>

Output:

Example 2: Demonstrating viewpoint window

<!DOCTYPE html>

Last updated 18/11/2024


<html>

<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the
viewport width.</p>

</body>

</html>

Output:

4. font-weight property: specifies the weight of a font

Example
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}

p.light {
font-weight: lighter;
}

p.thick {
font-weight: bold;

Last updated 18/11/2024


}

p.thicker {
font-weight: 900;
}
</style>
</head>
<body>

<h1>The font-weight property</h1>

<p class="normal">This is a paragraph.</p>


<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

SUMMARY: PROPERTIES IN CSS


Attribute CSS Name
Font Properties font-family
font-style
font-size
font-weight
Text Properties text-align
text-transform
color
text-decoration
text-indent
letter-spacing
word-spacing
line-height
white-space

Last updated 18/11/2024


CSS MARGINS
CSS Margin property is used to define the space around elements. It is completely transparent and doesn't
have any background color. It clears an area around the element.

Top, bottom, left and right margin can be changed independently using separate properties. You can also
change all properties at once by using shorthand margin property.

CSS Margin Properties

CSS Margin Values

Example
Last updated 18/11/2024
<html>
<head>
<style>
body{
background-color:#ff6622;
}

img {
margin-top: 10px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 300px;
}
p{
text-align:center;
font-type:verdana;
font-size:14px;
}
</style>
</head>
<body>
<img src="coffee.jpg" alt="Coffee" width="200" height="150" border=2>

<p>&copy;This web page was edited on 2<sup>nd</sup> September, 2024 by M<sub>c</sub>Carthy


</body>
</html>

Margin: Shorthand Property


CSS shorthand property is used to shorten the code. It specifies all the margin properties in one property.
There are four types to specify the margin property. You can use one of them.

SN Margin Type Description Example

1. margin: 50px 100px 150px 200px;  top margin value is 50px img {
margin: 50px 100px 150px 200px;
 right margin value is 100px }

 bottom margin value is


150px

 left margin value is 200px

2. margin: 50px 100px 150px;  top margin value is 50px img {


margin: 50px 100px 150px;
 left and right margin values }
are 100px

Last updated 18/11/2024


 bottom margin value is
150px

3. margin: 50px 100px;  top and bottom margin img {


values are 50px margin: 50px 100px;
 left and right margin values }
are 100px
4. margin: 50px; top right bottom and img {
left margin values are 50px margin: 50px;
}

CSS PADDING
CSS Padding property is used to define the space between the element content and the element border.

It is different from CSS margin in the way that CSS margin defines the space around elements. CSS
padding is affected by the background colors. It clears an area around the content.

Top, bottom, left and right padding can be changed independently using separate properties. You can also
change all properties at once by using shorthand padding property.

CSS Padding Properties

CSS Padding Values

Last updated 18/11/2024


Example

P{
border:3px solid blue;
font-family:arial;
font-size:150%;
margin:100px;
padding-top:100px;
padding-right:100px;
padding-bottom:100px;
padding-left:100px;
}

CSS BACKGROUND
CSS background property is used to define the background effects on element.

There are 5 CSS background properties that affects the HTML elements:

1. CSS background-color

The background-color property is used to specify the background color of the element.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2,p{
6. background-color: #b0d4de;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>My first CSS page.</h2>
12. <p>Hello Javatpoint. This is an example of CSS background-color.</p>
13. </body>

Last updated 18/11/2024


14. </html>

2. CSS background-image

The background-image property is used to set an image as a background of an element. By default the
image covers the entire element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper1.gif");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
</body>
</html>

Note: The background image should be chosen according to text color. The bad combination of text and
background image may be a cause of poor designed and not readable webpage.

3. CSS background-repeat

By default, the background-image property repeats the background image horizontally and vertically. Some
images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

Example

background-image: url('abok.jpeg');
background-repeat: repeat-x;
/*background-repeat: repeat-y;*/

4. CSS background-attachment

The background-attachment property is used to specify if the background image is fixed or scroll with the
rest of the page in browser window. If you set fixed the background image then the image will not move
during scrolling in the browser.

Example

Last updated 18/11/2024


background-image: url('abok.jpeg');
background-attachment: fixed;

5. CSS background-position

The background-position property is used to define the initial position of the background image. By default,
the background image is placed on the top-left of the webpage.

You can set the following positions:

 center
 top
 bottom
 left
 right

Example

background-image: url('abok.jpeg');
background-position: top

Last updated 18/11/2024


CSS BORDER PROPERTIES
The CSS border properties are utilized to determine the style, variety, width, and ebb and flow of the
borders of a component. These properties include:

1. CSS border-style
The Border style property is used to specify the border type which you want to display on the web page.

2. CSS border-color
There are three strategies to set the color of the border.

 Name: It determines the color name. For instance: "red".


 RGB: It determines the RGB worth of the color. For instance: "rgb(255,0,0)".
 Hex: It determines the hex worth of the color. For instance: "#ff0000".
Note: The border-color property isn’t used alone. It is constantly utilized with other border properties like
border-style property to set the border first and any other way it won’t work.

3. CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can also use the one of
the three pre-defined values, thin, medium or thick to set the width of the border.

Last updated 18/11/2024


Note: The border-width property isn’t used alone. It is constantly utilized with other border properties like
border-style property to set the border first and any other way it won’t work.

Example:

1. <style>
2. /* CSS for different border widths */
3. .thin-border {
4. border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */
5. }
6. .medium-border {
7. border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */
8. }
9. .thick-border {
10. border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */
11. }
12. .custom-border {
13. border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */
14. }
15. </style>

4. CSS border-radius

CSS border-radius property is a flexible property that permits web engineers to make adjusted corners for
borders, adding a bit of polish to a design.

Example
<style>
.sub{
border-radius:20px;
font-size:18px;
font-weight:bold;
}
<style>
<body>
<form>
<input type="submit" class=sub value="Cancel">
</form>

5. CSS Border-collapse Property


Border-collapse is a CSS property that defines how borders between table cells are handled. It's
particularly relevant in HTML tables, where rows and columns are structured to display data. By default,
HTML tables have a separate border for each cell, which may result in a more spaced-out appearance due
to the gaps between individual cell borders.

The border-collapse property provides two main values: collapse and separation.

Last updated 18/11/2024


o Separate: This is the default value for the property. It creates separate borders for each cell, leaving
space between adjoining borders. Each cell maintains its distinct border.
o collapse: This value is used to collapse the borders into a single border. Using this, two adjacent table
cells will share a border. When this value is applied, the border-spacing property does not affect.
o initial: It sets the property to its default value.
o inherit: It inherits the property from its parent element.

6. Padding: Represents the space between the content of a cell and its border. Padding can be set
individually for cells using the padding property for <td> and <th> elements.

Example

1. <!DOCTYPE html> 30. <table id = "t1">


2. <html> 31. <tr>
3. 32. <th> First_Name </th>
4. <head> 33. <th> Last_Name </th>
5. <title> border-collapse property </title> 34. <th> Subject </th>
6. <style> 35. <th> Marks </th>
7. table{ 36. </tr>
8. border: 2px solid blue; 37. <tr>
9. text-align: center; 38. <td> James </td>
10. font-size: 20px; 39. <td> Gosling </td>
11. width: 80%; 40. <td> Maths </td>
12. height: 50%; 41. <td> 92 </td>
13. } 42. </tr>
14. th{ 43. <tr>
15. border: 5px solid red; 44. <td> Alan </td>
16. background-color: yellow; 45. <td> Rickman </td>
17. } 46. <td> Maths </td>
18. td{ 47. <td> 89 </td>
19. border: 5px solid violet; 48. </tr>
20. background-color: cyan; 49. <tr>
21. } 50. <td> Sam </td>
22. #t1{ 51. <td> Mendes </td>
23. border-collapse: collapse; 52. <td> Maths </td>
24. } 53. <td> 82 </td>
25. </style> 54. </tr>
26. </head> 55. </table>
27. <body> 56. </body>
28. <h1> The border-collapse Property 57. </html>
</h1>
29. <h2> border-collapse: collapse; </
h2>

Last updated 18/11/2024


HTML LAYOUT
HTML layouts provide a way to arrange web pages in a well-mannered, well-structured, and responsive
form. A web page layout specifies how the web pages can be arranged. Webpage layout works with the
arrangement of visual elements in an HTML document.

Web page layout is the most important part to keep in mind while creating a website so that our website
can appear professional with a great look.

1. <header>: Represents introductory content or navigational links for a section or the whole page. It
usually contains the site logo, title, and navigation links. However, it’s not needed if there’s no header
content.
2. <nav>: Contains navigation links. If your page has no navigation (for example, a single-page document
or a simple landing page without links), a <nav> element may not be necessary.
3. <section>: Defines a section in a document, like different topics within a page. It’s helpful for dividing
content into logical groups but not mandatory if your page doesn’t need distinct sections.
4. <article>: Represents independent content, such as a blog post or news article. Use it when content
can stand alone (e.g., for a feed of news stories). Otherwise, you may not need it.
5. <footer>: Defines the footer for a section or the whole page, often containing copyright information,
links, or other footer content. It’s commonly used but not essential if there’s no footer content.
6. <aside>: Represents content tangentially related to the main content, like sidebars, ads, or related
links. If your page doesn’t need this, you can skip it.

3.

Last updated 18/11/2024


Description of various Layout elements
1. HTML <header>: It is used to define a header for a document or a section.
Syntax:

1. <header>
2. <!-- Your header content will go here -- >
3. </header>

2. HTML <nav>
The <nav> elements is a container for the main block of navigation links. It can contain links for the same
page or for other pages.

Syntax:

1. <nav>
2. <ul>
3. <li><a href= "#" >HTML</a></li>
4. <li><a href= "#" >CSS</a></li>
5. <li><a href= "#">Javascript</a></li>
6. <li><a href= "#">PHP</a></li>
7. <li><a href= "#">React </a></li>
8. <li><a href= "#">React JS</a></li>
9. <li><a href= "#">Node JS</a></li>
10. <li><a href= "#">Devops</a></li>
11.
12. </ul>
13. </nav>

Example:

<html>
<head><title>Layout</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */


header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 20px;

Last updated 18/11/2024


color: blue;
}

/* Style the navigation bar */


.navbar {
background-color: pink;
overflow: hidden;
}

/* Style each link */


.navbar li{
float: left; /* Display items horizontally */
}

/* Style the list items */


.navbar ul {
list-style-type: none;
}

/* Style the links */


.navbar li a {
display: block;
color: white;
padding: 14px 20px;
text-decoration: none;
}

/* Change color on hover */


.navbar a:hover {
background-color: #555;
}

</style>
</head>
<body>
<header>
<h1> Welcome to My First Web page </h1>
</header>

<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

</body>
</html>

Last updated 18/11/2024


3. HTML <section>
Defines a section in a document, like different topics within a page. It’s helpful for dividing content into
logical groups but not mandatory if your page doesn’t need distinct sections. It can contain: text, images,
tables, videos, etc.

Syntax:

1. <section>
2. <h2>Section Title</h2>
3. <p> This is the content of the section.</p>
4. </section>
Example:

1. <section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">


2. <h2>Introduction to HTML</h2>
3. <p>HTML is a markup language which is used for creating attractive web pages with the help of
styling, and which looks in a nice format on a web browser..</p>
4. </section>

4. HTML <article>
Represents independent content, such as a blog post, big story, huge article etc. Use it when content can
stand alone (e.g., for a feed of news stories). Otherwise, you may not need it.

Syntax:

1. <article>
2. <h2>Article Title</h2>
3. <p>This is the content of the article.</p>
4. </article>
Example:

1. <article style="width: 100%; border:2px solid black; background-color: #fff0f5;">


2. <h2>History of Computer</h2>
3. <p>Write your content here for the history of computer</p>
4. </article>

5. HTML <footer>
HTML <footer> element defines the footer for that document or web page. It mostly contains information
about author, copyright, other links, etc.

Syntax:

Last updated 18/11/2024


1. <footer>
2. <p>© 2023 Your Website Name | <a href= "#"> Privacy Policy </a></p>
3. </footer>
Example:

1. <footer style="background-color: #f0f8ff; width: 100%; text-align: center;">


2. <h3>Footer Example</h3>
3. <p>© Copyright 2018-2020. </p>
4. </footer>

6. HTML <aside>
Represents content related to the main content, like sidebars, ads, or related links. If your page doesn’t
need this, you can skip it.

Syntax:

1. <aside>
2. <h3> Related Links </h3>
3. <ul>
4. <li><a href= "#">Related Article1</a></li>
5. <li><a href= "#">Related Article2</a></li>
6. </ul>
7. </aside>
Example:

1. <aside style="background-color:#e6e6fa">
2. <h2>Sidebar information</h2>
3. <p>This conatins information which will represent like a side bar for a webpage</p>
4. </aside>

Last updated 18/11/2024


PADDING AND BORDER EXAMPLE

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Constructing a form and applying style on the form utilizing the descendant selector</title>
5. <style>
6. body {
7. font-family: 'Courier New', Courier, monospace;
8. background: white;
9. }
10. div label {
11. font-weight: bold;
12. color: rebeccapurple;
13. }
14. div input[type="text"] {
15. width: 250px;
16. padding: 5px;
17. border: 2px solid fuchsia;
18. }
19. div input[type="date"] {
20. width: 250px;
21. padding: 5px;
22. border: 2px solid fuchsia;
23. }
24. div input[type="submit"] {
25. width: 75px;
26. height: 35px;
27. border-radius: 10px;
28. padding: 2px;
29. border: 2px solid red;
30. background-color: pink;
31. color: darkred;
32. }
33. </style>

Last updated 18/11/2024


34. </head>
35. <body>
36. <h1>Applying style on the form utilizing the descendant selector</h1>
37. <h3>Student Registration Form</h3>
38. <div>
39. <form>
40. <label for="first-name">First Name:</label> <br> <br>
41. <input type="text" id="firstname" name="firstname" placeholder="Type your first name"> <br><
br>
42. <label for="second-name">Last Name:</label> <br> <br>
43. <input type="text" id="lastname" name="lastname" placeholder="Type your last name"> <br> <
br>
44. <label for="dob">Date of Birth:</label> <br> <br>
45. <input type="date" id="dob" name="dob"> <br> <br>
46. <label for="course">Course Name:</label> <br> <br>
47. <input type="text" id="course" name="course"> <br> <br>
48. <input type="submit" name="" id="submit" value="Submit">
49. </form>
50. </div>
51. </body>
52. </html>

Last updated 18/11/2024

You might also like