Website Development Prices

Website Development Prices

Tuesday, March 1, 2016

Kako da podvucete naslove (How to create underline for headings)

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:




No comments:

Post a Comment

Note: Only a member of this blog may post a comment.