Aantal vragen over webdesign met CSS

Status
Niet open voor verdere reacties.
G

gast30

Gebruiker
Lid geworden
19 mei 2019
Berichten
113
Hoi mensen van dit forum.
Ik wou met dreamweaver een extern css bestand maken maar deze werkt niet als ik hem aanroep bij mijn andere html pagina's
HTML: 
<!doctype html>
<html>
<head>
<style>
body {
  background-color: blue;
	font-size: 16px;
	color: aqua
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<title>Naamloos document</title>
</head>

<body>
	
</body>
</html>

zo ziet mijn externe css eruit

Ook heb ik een vraag, kun je <P> een andere achtergrond meegeven ?

<p bgcolor="red"></p>
<p bgcolor="wit"></p>
<p bgcolor="blauw"></p>

zo ook verschillende tabellen <table>

Bij mij pakt het niet en ik kopieer gewoon het voorbeeld van C3school

Wie kan mij helpen met deze vragen ?

Ik  wil ook een javascript form een andere achtergrond geven 

graag advies
 
In een CSS bestand hoort alleen CSS te staan, zo dus.
Code: 
body {
  background-color: blue;
    font-size: 16px;
    color: aqua
}
 
h1 {
  color: maroon;
  margin-left: 40px;
}

Als er ook nog andere dingen bij staan, HTML in dit geval, zal de browser het CSS bestand niet goed kunnen lezen.

Als je een onderdeel een afwijkende kleur wil geven kun je het een class geven
HTML: 
<p>gewone tekst</p>
<p class="speciaal">tekst met een afwijkende kleur</p>
In je CSS kun je dan verwijzen naar die class
Code: 
p{
  color:#000; /*zwarte tekst voor alle paragrafen */
}
p.speciaal{
  color:#f00; /*rode tekst voor paragrafen met class speciaal */
}

Dezelfde methode kun je op ieder willekeurig HTML element toepassen, natuurlijk niet alleen voor kleuren, maar voor alles wat je met CSS kunt doen.
 
Laatst bewerkt:
Geachte Naarling

Hartelijk dank voor uw duidelijke uitleg
 
beste Naarling

Hierbij een stukje wat ik net gemaakt heb
Helaas wordt de achtergrond kleur niet gevonden

HTML: 
<html>

<head>
<title>Prijzen</title>
	<style>
p.boter {
	background-color: aliceblue
  text-align: left;
  color: red;
	</style>
	<style>
p.Tulp {
	background-color: aliceblue
  text-align: left;
  color: green;
	</style>
		<style>
p.Begonia {
	background-color: aliceblue
  text-align: left;
  color: grey;
	</style>
</head>

<body bgcolor="yellow">
<h1>Dit is de pagina Prijslijst</h1><br>


                        <p class="boter">boter  15,00</p>
						<p class="Tulp">Tulp  12,50</p>
						<p class="Begonia">Begonia &#8364 7,50</p>	
						<p class="Narcus" >Narcus &#8364 5,00</p>
				
		
</body>

</html>

kunt u mij hiermee helpen?
 
Als je de html en css gescheiden wilt houden (zeer aanbevolen) dan heb je in jouw voorbeeld 2 bestanden, eentje voor de html en eentje voor de css. In de html wordt de css ingevoegd met een <link rel="stylesheet" ….>

Bestand met naam: index.html
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prijzen</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Dit is de pagina Prijslijst</h1><br>
<p class="boter">boter 15,00</p>
<p class="tulp">Tulp 12,50</p>
<p class="begonia">Begonia &#8364 7,50</p>
<p class="narcus">Narcus &#8364 5,00</p>
</body>
</html>

Bestand met naam: style.css
Code: 
body {
    background-color: yellow;
}
p.boter {
    background-color: aliceblue;
    text-align: left;
    color: red;
}
p.tulp {
    background-color: aliceblue;
    text-align: left;
    color: green;
}
p.begonia {
    background-color: aliceblue;
    text-align: left;
    color: grey;
}
p.narcus {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: blue;
}

Tip: gebruik de &euro; als Euro teken (let op de ; achter euro).
Code: 
<p class="begonia">Begonia &euro; 7,50</p>

In de css mag je geen typfouten (syntax fouten) maken, iets werkt niet als je een ; of een } vergeet.

Suc6. Have fun.
 
Laatst bewerkt:
geachte bron

Hierbij wil ik laten weten dat het <p> atribuut werkt maar deze externe css heb ik ook aangeroepen op een pagina waar ik tabellen maak...
Helaas worden mijn tabellen niet gekleurd

Weet u wat ik hier verkeerd doe?

css
HTML: 
body {
  background-color: lightblue;
}

h1 {
  color: red;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
p.boter {
    background-color: red;
    text-align: left;
    color: red;
}
p.tulp {
    background-color: white;
    text-align: left;
    color: green;
}
p.begonia {
    background-color: blue;
    text-align: left;
    color: grey;
}
p.narcus {
	background-color: orange;
    font-size: 16px;
    color: blue;
}
table {
  font-family: verdana;
  font-size: 20px;
}
table.ontwikkeling 1 {
    background-color: red;
    text-align: left;
    color: red;
}
table.ontwikkeling 2 {
    background-color: white;
    text-align: left;
    color: green;

tabellen

HTML: 
<html>

<head>
<link rel="stylesheet" type="text/css"href="css/toets2.css"
<title>Geschiedenis</title>

</head>

<body>
Dit is de pagina Ontwikkeling
<table class="ontwikkeling 1">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr><br>
	</table>
<table class="ontwikkeling 2">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
</table>

</body>

</html>

zoals u ziet maak ik gebruik van class op elke tabel een andere kleur te geven
 
Op lijn 4 mist een vissehaakje aan het eind, en er mist een spatie voor href. Ook mag je in een class/id geen spatie gebruiken. Nu denkt CSS dat je twee stylen hebt: ontwikkeling en 1. Trouwens ontwikkeling_1 zou ook niks zeggen, zorg liever voor een duidelijke naamgeving die omschrijft wat voor stijl het is.

Je kan het zelfs extraheren naar een stijl voor de ontwikkeling een een stijl die er bij kan aanroepen voor aanvullende details:
Code: 
table.ontwikkeling {
    text-align: left;
}

table.ontwikkeling.active {
    background-color: red;
    color: white;
}

table.ontwikkeling.notactive{
    background-color: white;
    color: green;
}

Dan kan je gewoon dit doen:
Code: 
<table class="ontwikkeling notactive">
Hal je notactive weg, dan gebruikt hij niet die stijl en enkel alleen de parent-stijl van ontwikkeling. Gebruik je active, dan pakt hij de stijl active.


Kent je editor geen auto-complete die alle tags eenvoudig al herkent?
Dan zou den zulke syntax-fouten al snel verleden tijd zijn.
 
De th en td mag je (elk in een eigen tr) in 1 tabel zetten om te voorkomen dat de html een 'spaghetti' vorm gaat aannemen.
Code: 
<table class="ontwikkeling1">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

Hieronder een "standaard" tabel vormgeving met wat uitleg erbij.
Uitleg staat tussen /* ….. */ en deze uitleg wordt niet als tekst of vormgeving in de pagina gezet.

Code: 
table.ontwikkeling1 {
  width: 50%; /* breedte van tabel */
  border: 1px solid lightgrey; /* lijntje om tabel */
  background-color: white; /* achtergrondkleur */
  border-spacing: 0; /* border-spacing & border-collapse waarde voor betere vormgeving */
  border-collapse: collapse; /* uitleg op regel hierboven */
}
table.ontwikkeling1 th,
table.ontwikkeling1 td {
  padding: 6px 10px; /* ruimte om tekst */
  border: 1px solid lightgrey; /* lijntje om cel */
  vertical-align: top; /* vertikaal uitlijnen */
  text-align: left; /* horizontaal uitlijnen */
  font-size: 16px; /* tekst grootte */
  line-height: 1.5; /* regelafstand 1.5 x font-size */
}
table.ontwikkeling1 th:nth-child(3),
table.ontwikkeling1 td:nth-child(3) {
  text-align: right; /* 3e th & 3e td op elke rij rechts uitlijnen */
}
table.ontwikkeling1 th {
  font-weight: bold; /* th met vette tekst */
}
 
Laatst bewerkt:
Beste Bron

Hartelijk dank voor uw voorbeeld,
ik wou eigenlijk een bericht plaatsen dat het niet werkte maar toen ik opnieuw ging kijken bij dreamweaver werkte het wel.
Als ik css aanpas moet ik de pagina waar het aangeroepen wordt opnieuw laden\\bedankt
 
Dreamweaver? Wordt dit nog gebruikt? Kan me herinneren dat ik dit weleens gebruikte/uitprobeerde, lang gelee. Vond er zoveel onnodige balllast bij zitten. Maar goed zal nu beter zijn anno nu. . Hoop ik voor de gebruiker
:cool:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan