Kurs HTML odc 3 - strona nie obsługuje niczego

pytanie zadane 8 października 2018 w HTML i CSS przez Paweł Szewczyk Obywatel (1,410 p.)
edycja 8 października 2018 przez Paweł Szewczyk

Mam problem z kodem z odcinka 3 kursu HTML. Nie wiem czemu ale plik HTML nie możne odczytać mi treści znajdującej się w CSS stad na stronie ma tylko treść HTML bez CSS. Wszystkie pliki są zapisane w odpowiednich formatach. Czy jest to błąd z mojej strony? (Oczywiście wstawienie pliku z CSS do <style> działa ale nie jest to najwygodniejsze i najbardziej estetyczne)

//Html
<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Jan Kowalski - Portfolio</title>
	
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego: PHP, JavaScript, HTML, CSS, MySQL, WordPress, Joomla, Drupal." />
	<meta name="keywords" content="zamów, stronę, tworzenie, www, programista, portfolio, php, javascript, html, css, WordPress, Joomla, Drupal" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/fontello.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	
</head>
<body>
	<div id="container">
	
		<div class="rectangle">
			<div id="logo">Jan Kowalski</div>
			<div id= "zegar">12:00:00</div>
			<div style="clear:both;"></div>
		</div>
	
		<div class="square">
			<div class="tile1">1</div>
			<div class="tile1">1</div>
			<div style="clear:both;"></div>
			
			<div class="tile2">2</div>
			<div class="tile3">3</div>
			<div style="clear:both;"></div>
			
			<div class="tile4">4</div>
			
		</div>	
		<div class="square">
			<div class="tile5">5</div>
			<div class="yt">yt</div>
			<div class="fb">fb</div>
			<div class="gplus">gplus</div>
			<div class="tw>tw</div>
		</div>
		
		<div style ="clear:both;"></div>
		
		<div class="rectangle">2015 &copy; Jan Kowalkis zaprasza do współpracy</div>
		
	</div>

</body>

</html>
// Css
body
{
	background-color: #303030;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
}
#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.rectangle
{
	width: 960px;
	margin: 20px;
	text-align: center;
}
.squer
{
	width: 50%;
	float: lef;
}
#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	width: 600px;
	text-align:left;
}
#zegar
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
}
.tile1
{
	margin:10px;
	width: 230px;
	height: 142px;
	background-color: #3095d3;
	float: left;
}
.tile2
{
	margin:10px;
	width: 230px;
	height: 142px;
	background-color: #666666;
	float: left;
}
.tile3
{
	margin:10px;
	width: 230px;
	height: 142px;
	background-color: #93c748;
	float: left;
}
.tile4
{
	margin:10px;
	width: 480px;
	height: 142px;
	background-color: #ee5a32;
	
}
.tile5
{
	margin:10px;
	width: 480px;
	height: 304px;
	background-color: #666666;
	
}
.yt
{
	margin:10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
}.fb
{
	margin:10px;
	width: 105px;
	height: 142px;
	background-color: #7668b3;
	float: left;
}.gplus
{
	margin:10px;
	width: 105px;
	height: 142px;
	background-color: #d95333;
	float: left;
}.tw
{
	margin:10px;
	width: 105px;
	height: 142px;
	background-color: #3095d3;
	float: left;
}

komentarz 8 października 2018 przez Milesq Nałogowiec (32,020 p.)

Sprawdź w konsoli czy nie ma błędów ;)

komentarz 8 października 2018 przez Paweł Szewczyk Obywatel (1,410 p.)

jestem dość nowy o jakiej konsoli mówisz ?

komentarz 8 października 2018 przez imklau Nałogowiec (42,090 p.)

chodzi o konsolę przeglądarkową. Jak sobie klikniesz "zbadaj element" to wtedy otwiera się ta konsola. Ewentualnie możesz to zrobić skrótem, np w Firefoxie Ctrl + Shift + C (chyba) :).

komentarz 8 października 2018 przez niezalogowany

Włącz wyśietlanie rozszeżeń i sprawdź czy nie zapisałeś jako style.css.txt

komentarz 8 października 2018 przez Milesq Nałogowiec (32,020 p.)

@Paweł Szewczyk, no coż html,css to technologie webowe, prawda? więc informacje o błedach typu nie znalezienia pliku - wyświetlają się w konsoli js (w chrome Ctrl + Shift + i). Podstawowe narzędzie do debugowania ;-)

3 odpowiedzi

odpowiedź 8 października 2018 przez pablop76 VIP (123,180 p.)

odpowiedź 8 października 2018 przez Szycha Gaduła (4,650 p.)

Sprawdź w jakim folderze znajduję się plik css

komentarz 8 października 2018 przez Paweł Szewczyk Obywatel (1,410 p.)

w tym samym co plik .html

odpowiedź 8 października 2018 przez Domeltr Początkujący (440 p.)

Kiedy odpalisz swoją stronę, możesz kliknąć prawym przyciskiem myszy i wybrać "Pokaż źródło", lub coś w tym stylu zależnie od przeglądarki. Wtedy kliknij na link do stylów i zobacz czy wyświetli się on w przeglądarce. Jeżeli nie, to znaczy że jest błędnie wpisałeś nazwę, lub lokalizację pliku :) Zajmie to parę sekund, a zawsze zyskasz pewność czy to nie jakiś prosty błąd. Sprawdź też czy pliku style.css, nie ma ukrytego rozszerzenia .txt