I've been reading a lot about CSS and trying to get a hang on it since I've been out of web design for quite a while now. From what I understand a .css file is what your web pages will reference for values that determine the appearance and properties of those pages. But this leaves me confused as to why I need to have CSS in the html files as well, and I'm also confused which CSS code goes where, like for instance, would I ever use a <selector=""> or <span class=""> in the .css file itself? Or only in the html file? If any one has any good tutorials that'd be appreciated, or any tips. All of the tutorials I've read so far don't break it down well enough for me to understand so it's still somewhat vague in certain areas. Thank you!
CSS Question
Started by
mrsleep
, Jan 31 2006 06:08 PM
#1
Posted 31 January 2006 - 06:08 PM
mrsleep
-
- Member
-
- 19 posts
Member
I've been reading a lot about CSS and trying to get a hang on it since I've been out of web design for quite a while now. From what I understand a .css file is what your web pages will reference for values that determine the appearance and properties of those pages. But this leaves me confused as to why I need to have CSS in the html files as well, and I'm also confused which CSS code goes where, like for instance, would I ever use a <selector=""> or <span class=""> in the .css file itself? Or only in the html file? If any one has any good tutorials that'd be appreciated, or any tips. All of the tutorials I've read so far don't break it down well enough for me to understand so it's still somewhat vague in certain areas. Thank you!
#2
Posted 31 January 2006 - 08:23 PM
The Architect
-
- Member
-
- 58 posts
Member
There are actually two methods of using CSS to style your web pages.
The first method "embeds" the css "instructions" directly in your HTML code.
A simple example follows:
<head>
<style type="text/css">
<!--
a {font-family: Georgia, "Times New Roman", Arial;}
a:link {color: #FFFFFF;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #FF9900; font-weight: bold;}
a:active {color: #FF9900; text-decoration: none}
-->
</style>
</head>
<body>
<p><a href="index.html">Home Page</a></p>
</body>
In the above example, the HTML code (really only a single line, after the <body> tag) and the CSS code are together on the same page - let's say it's called testpage.html.
It is also possible (and, if I may suggest, preferable) to REFERENCE an "external" stylesheet from WITHIN the HTML page - it looks like this:
<head>
<title>Test Page - external stylesheets!</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead"></div>
blah blah blah etc etc etc
</body>
In the above example, the CSS instructions reside in a file called main.css which is stored in a folder called "stylesheets". The "instructions" in that file are "called", if you will, by the line in red. This "external" stylesheet will affect ANY HTML pages that contain the line in red.
So, in answer to your question, CSS can be found both IN and OUTSIDE of HTML.
It's a brief explanation, to be sure, but hopefully of some help.
More detailed info re CSS can be found here:
World Wide Web Consortium (W3C) - Style Sheets Overview
W3C - CSS Tutorial
EchoEcho Tutorial
Tizag Tutorial
The first method "embeds" the css "instructions" directly in your HTML code.
A simple example follows:
<head>
<style type="text/css">
<!--
a {font-family: Georgia, "Times New Roman", Arial;}
a:link {color: #FFFFFF;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #FF9900; font-weight: bold;}
a:active {color: #FF9900; text-decoration: none}
-->
</style>
</head>
<body>
<p><a href="index.html">Home Page</a></p>
</body>
In the above example, the HTML code (really only a single line, after the <body> tag) and the CSS code are together on the same page - let's say it's called testpage.html.
It is also possible (and, if I may suggest, preferable) to REFERENCE an "external" stylesheet from WITHIN the HTML page - it looks like this:
<head>
<title>Test Page - external stylesheets!</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead"></div>
blah blah blah etc etc etc
</body>
In the above example, the CSS instructions reside in a file called main.css which is stored in a folder called "stylesheets". The "instructions" in that file are "called", if you will, by the line in red. This "external" stylesheet will affect ANY HTML pages that contain the line in red.
So, in answer to your question, CSS can be found both IN and OUTSIDE of HTML.
It's a brief explanation, to be sure, but hopefully of some help.
More detailed info re CSS can be found here:
World Wide Web Consortium (W3C) - Style Sheets Overview
W3C - CSS Tutorial
EchoEcho Tutorial
Tizag Tutorial
Edited by The Architect, 31 January 2006 - 08:28 PM.
#3
Posted 01 February 2006 - 05:03 PM
mrsleep
- Topic Starter
-
- Member
-
- 19 posts
Member
That cleared it up drastically. Thanks a lot for taking the time to type that out! Greatly appreciated!
#4
Posted 01 February 2006 - 08:42 PM
The Architect
-
- Member
-
- 58 posts
Member
You're entirely welcome.
Glad I could be of some help!
Glad I could be of some help!
#5
Posted 03 February 2019 - 03:01 AM
aditya12
-
- Member
-
- 1 posts
New Member
- The basics about selectors, combinators and how you set up styling rules in general
- Properties, values and decalarations
- How specifity and inheritance work and why it's called "Cascading" Style Sheets
- Important theoretical concepts like the "Box Model"
- How the default position of elements can be changed
- Styling backgrounds (e.g. gradients) and images
- Which units and dimensions you typically use in CSS (px, rem, % and more)
- How JavaScript and CSS interact
- Responsive design and what "Mobile First" means
- Styling forms and form inputs
- Working with text, fonts and text styles
- Flexbox! How it works and how to use it
- Using the CSS Grid and how it differs from Flexbox
- Transforming and animating HTML elements with the help of CSS
- Writing future-proof CSS with features like CSS variables or best-practice class names
- Using Sass and what it actually is all about
ALSO see https://www.welookup...ss/default.html
#6
Posted 14 December 2020 - 04:18 AM
David jack123
-
- Member
-
- 14 posts
Member
No need to save the main.xml file is in the stylesheet folder you only need to save the file in same folder which contains HTML file .
Here rel mean relation not the folder name it contain the relation with the HTML code .
Similar Topics
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
As Featured On:
Sign In
Create Account
