Pitanje: kako da podvucete naslove?
Resenje 1: svojstvo text-decoration.
Resenje 2: svojstvo border-bottom.
Primer 1: ako koristite svojstvo text-decoration, boja podvucenog naslova bice ista kao i boja fonta.
HTML kod
<!DOCTYPE html>
<html>
<head>
<title>CSS - Kako da podvucete naslove</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Ovo je Naslov 1 Primer 1</h1>
<h2>Ovo je Naslov 2 Primer 1</h2>
</body>
</html>
CSS kod
h1 {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 26px;
color: green;
text-decoration: underline;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: red;
text-decoration: underline;
}
Sacuvajte ovaj fajl kao style.css u folderu css.
Rezultat:
Primer 2: ako koristite svojstvo border-bottom, boja podvucenog naslova moze biti razlicita od boje fonta.
HTML kod
<!DOCTYPE html>
<html>
<head>
<title>CSS - Kako da podvucete naslove</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>
<h1>Ovo je Naslov 1 Primer 2</h1>
<h2>Ovo je Naslov 2 Primer 2</h2>
</body>
</html>
CSS kod
h1 {
font: Georgia, Arial, Helvetica, sans-serif;
font-size: 26px;
color: green;
padding: 5px;
border-bottom: 2px solid #90C3D4;
}
h2 {
font: Arial, Helvetica, sans-serif;
font-size: 24px;
color: red;
padding-left: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #A1D490;
}
Sacuvajte ovaj fajl kao style2.css u folderu css.
Rezultat:
Question: how to create underline for headings?
Solution 1: property text-decoration.
Solution 2: property border-bottom.
Example 1: If you are using the property text-decoration, color of underlined headings will be the same as the color of the font.
HTML code
<!DOCTYPE html>
<html>
<head>
<title>CSS - How to create underline for headings</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>This is Title 1 Example 1</h1>
<h2>This is Title 2 Example 1</h2>
</body>
</html>
CSS code
h1 {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 26px;
color: green;
text-decoration: underline;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: red;
text-decoration: underline;
}
Save this file as style.css in folder css.
Result:
Example 2: if you use the property border-bottom, color of underlined headings may be different from the color of the font.
HTML code
<!DOCTYPE html>
<html>
<head>
<title>CSS - How to create underline for headings</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>
<h1>This is Title 1 Example 2</h1>
<h2>This is Title 2 Example 2</h2>
</body>
</html>
CSS code
h1 {
font: Georgia, Arial, Helvetica, sans-serif;
font-size: 26px;
color: green;
padding: 5px;
border-bottom: 2px solid #90C3D4;
}
h2 {
font: Arial, Helvetica, sans-serif;
font-size: 24px;
color: red;
padding-left: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #A1D490;
}
Save this file as style2.css in folder css.
Result:
Resenje 1: svojstvo text-decoration.
Resenje 2: svojstvo border-bottom.
Primer 1: ako koristite svojstvo text-decoration, boja podvucenog naslova bice ista kao i boja fonta.
HTML kod
<!DOCTYPE html>
<html>
<head>
<title>CSS - Kako da podvucete naslove</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Ovo je Naslov 1 Primer 1</h1>
<h2>Ovo je Naslov 2 Primer 1</h2>
</body>
</html>
CSS kod
h1 {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 26px;
color: green;
text-decoration: underline;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: red;
text-decoration: underline;
}
Sacuvajte ovaj fajl kao style.css u folderu css.
Rezultat:
Primer 2: ako koristite svojstvo border-bottom, boja podvucenog naslova moze biti razlicita od boje fonta.
HTML kod
<!DOCTYPE html>
<html>
<head>
<title>CSS - Kako da podvucete naslove</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>
<h1>Ovo je Naslov 1 Primer 2</h1>
<h2>Ovo je Naslov 2 Primer 2</h2>
</body>
</html>
CSS kod
h1 {
font: Georgia, Arial, Helvetica, sans-serif;
font-size: 26px;
color: green;
padding: 5px;
border-bottom: 2px solid #90C3D4;
}
h2 {
font: Arial, Helvetica, sans-serif;
font-size: 24px;
color: red;
padding-left: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #A1D490;
}
Sacuvajte ovaj fajl kao style2.css u folderu css.
Rezultat:
Question: how to create underline for headings?
Solution 1: property text-decoration.
Solution 2: property border-bottom.
Example 1: If you are using the property text-decoration, color of underlined headings will be the same as the color of the font.
HTML code
<!DOCTYPE html>
<html>
<head>
<title>CSS - How to create underline for headings</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>This is Title 1 Example 1</h1>
<h2>This is Title 2 Example 1</h2>
</body>
</html>
CSS code
h1 {
font-family: Georgia, Arial, Helvetica, sans-serif;
font-size: 26px;
color: green;
text-decoration: underline;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: red;
text-decoration: underline;
}
Save this file as style.css in folder css.
Result:
Example 2: if you use the property border-bottom, color of underlined headings may be different from the color of the font.
HTML code
<!DOCTYPE html>
<html>
<head>
<title>CSS - How to create underline for headings</title>
<meta charset="UTF-8"/>
<meta name="description" content="Description that search reads" />
<meta name="keywords" content="page keywords, keywords" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>
<h1>This is Title 1 Example 2</h1>
<h2>This is Title 2 Example 2</h2>
</body>
</html>
CSS code
h1 {
font: Georgia, Arial, Helvetica, sans-serif;
font-size: 26px;
color: green;
padding: 5px;
border-bottom: 2px solid #90C3D4;
}
h2 {
font: Arial, Helvetica, sans-serif;
font-size: 24px;
color: red;
padding-left: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #A1D490;
}
Save this file as style2.css in folder css.
Result:
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.