CODEWITHSUNDEEP
htmlcss
FUSION CHA0S
FUSION CHA0S

Reputation: 93

Change font of div css

I am having a hard time understanding how to change the font of a div line under an h2 header. I have tried to find information about this online but only inline or if the header is already classified as a class. I cannot edit the html code, I can only modify the css file. I have also tried defining the the header and then the div element by writing Class examples.Example 1 Class CSS and then writing the code. Is it an issue because you cannot have spaces within the div class?

*
{
	background-color: #ffcc66;
	color: #003399;
	font-family: Comic Sans MS;
	font-size: 14px;
}
a
{
	color: #CC0000;
	text-decoration: none;
}
a:visited
{
	color: #CC0000;
}
a:hover
{
	color: #006600;
}
a:active
{
	color: #CC0000;
}

h1
{
	background-color: #3399FF;
	text-align: center;
	margin: 35px;
	border-bottom-style: solid;
	border-bottom-width: thin;
	border-bottom-color: #000033;
}

h2
{
	color: #333333;
	font-weight: bold;
}

p
{
	font-family: Georgia;
	color: #003300;
	padding: 15px;
}

li
{
	font-family: Arial;
	background-color: #808080;
	font-weight: bold;
	font-size: 18px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>

<body>

<h1>Formatting with CSS</h1>

<p>This is a basic web page to be used as a test for applying  CSS formatting rules.</p>

<h2>Hyperlinks</h2>
<a href="http://www.google.com/">Link to the Google website</a>
<br/>
<a href="http://www.google.com/">Link to the google page on CSS</a>

<h2>List Items</h2>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 2</li>
</ul>

<h2>Class examples</h2>
<div>Example 1 Class CSS</div>
<div>Example 2 Class CSS</div>
<div>Example 3 Class CSS</div>
</body>
</html>

Upvotes: 0

Views: 9837

Answers (4)

Friday Ameh
Friday Ameh

Reputation: 1684

Try this to change each div font by without modifying the html. The idea is to target each give using adjacent sibling eg h2 + div , h2 + div + div, h2 + div + div + div etc. like so

    
    *
    {
    	background-color: #ffcc66;
    	color: #003399;
    	font-family: Comic Sans MS;
    	font-size: 14px;
    }
    a
    {
    	color: #CC0000;
    	text-decoration: none;
    }
    a:visited
    {
    	color: #CC0000;
    }
    a:hover
    {
    	color: #006600;
    }
    a:active
    {
    	color: #CC0000;
    }
    
    h1
    {
    	background-color: #3399FF;
    	text-align: center;
    	margin: 35px;
    	border-bottom-style: solid;
    	border-bottom-width: thin;
    	border-bottom-color: #000033;
    }
    
    h2
    {
    	color: red;
    	font-weight: bold;
    }
    
    p
    {
    	font-family: Georgia;
    	color: #003300;
    	padding: 15px;
    }
    
    li
    {
    	font-family: Arial;
    	background-color: #808080;
    	font-weight: bold;
    	font-size: 18px;
    }
    
    *
{
	background-color: #ffcc66;
	color: #003399;
	font-family: Comic Sans MS;
	font-size: 14px;
}
a
{
	color: #CC0000;
	text-decoration: none;
}
a:visited
{
	color: #CC0000;
}
a:hover
{
	color: #006600;
}
a:active
{
	color: #CC0000;
}

h1
{
	background-color: #3399FF;
	text-align: center;
	margin: 35px;
	border-bottom-style: solid;
	border-bottom-width: thin;
	border-bottom-color: #000033;
}

h2
{
	color: red;
	font-weight: bold;
}

p
{
	font-family: Georgia;
	color: #003300;
	padding: 15px;
}

li
{
	font-family: Arial;
	background-color: #808080;
	font-weight: bold;
	font-size: 18px;
}

h2 + div{
  font-family: Arial;
}

h2 + div + div{
  font-family:  Sakkal Majalla;
}

h2 + div + div + div{
  font-family: Batang;
}
    
    
    <html>
    <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    
    <body>
    
    <h1>Formatting with CSS</h1>
    
    <p>This is a basic web page to be used as a test for applying  CSS formatting rules.</p>
    
    <h2>Hyperlinks</h2>
    <a href="http://www.google.com/">Link to the Google website</a>
    <br/>
    <a href="http://www.google.com/">Link to the google page on CSS</a>
    
    <h2>List Items</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 2</li>
    </ul>
    
    <h2>Class examples</h2>
    <div>Example 1 Class CSS</div>
    <div>Example 2 Class CSS</div>
    <div>Example 3 Class CSS</div>
    </body>
    </html>

Upvotes: 0

MrByte11
MrByte11

Reputation: 300

You can use the Adjacent sibling combinator

h2 + div {
  background-color: #808080;
}

this will only affect the immediate sibling of (the next element after) the h2 element

more about css combinators here

Upvotes: 0

Julian Espinosa
Julian Espinosa

Reputation: 722

You can use nth-of-type since you only have individual divs Fiddle

*
{
	background-color: #ffcc66;
	color: #003399;
	font-family: Comic Sans MS;
	font-size: 14px;
}
a
{
	color: #CC0000;
	text-decoration: none;
}
a:visited
{
	color: #CC0000;
}
a:hover
{
	color: #006600;
}
a:active
{
	color: #CC0000;
}

h1
{
	background-color: #3399FF;
	text-align: center;
	margin: 35px;
	border-bottom-style: solid;
	border-bottom-width: thin;
	border-bottom-color: #000033;
}

h2
{
	color: #333333;
	font-weight: bold;
}

p
{
	font-family: Georgia;
	color: #003300;
	padding: 15px;
}

li
{
	font-family: Arial;
	background-color: #808080;
	font-weight: bold;
	font-size: 18px;
}

div:nth-of-type(1){
  font-family: Arial;
}
div:nth-of-type(2){
  font-family: fantasy;
}
div:nth-of-type(3){
  font-family: Trebuchet;
}
<h1>Formatting with CSS</h1>

<p>This is a basic web page to be used as a test for applying  CSS formatting rules.</p>

<h2>Hyperlinks</h2>
<a href="http://www.google.com/">Link to the Google website</a>
<br/>
<a href="http://www.google.com/">Link to the google page on CSS</a>

<h2>List Items</h2>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 2</li>
</ul>

<h2>Class examples</h2>
<div>Example 1 Class CSS</div>
<div>Example 2 Class CSS</div>
<div>Example 3 Class CSS</div>

Upvotes: 1

Hector Martinez
Hector Martinez

Reputation: 427

This will work in your code.

div:first-of-type {
    /*Your Styles Here*/
}

Regards,

Upvotes: 0

Related Questions