CSS is how to change the appearance of HTML elements on a web page. For example, change the color of text and position of images. In the early days of the internet changes could be made with attributes most of that is depricated in favor of CSS. The advantage of CSS is it separates style from content. This means that you can make major changes to a web site by just switching style sheets instead of going through the site page by page, line by line. Say that you have a web site with a hundred pages and you have a Christmas theme for the month of December. It would be a lot of work to change a hundred pages but with CSS all you have to do is change one..
The basic syntax of CSS looks like: selector { property: value;}
The selector is an HTML element that you want to style such as
<h1> or paragraph, etc. The property is something like color, background-color, position,
margin, border, font-size etc. If you want to change more than one property the
property/value pairs are seperated by simicolons.
selector {
property: value;
property: value;
}
Like HTML, CSS ignores multiple spaces so they don't need to be indented but a style sheet is easier to read if you do.
You can style multiple elements be separating them with commas. To center align and color all headlines:
h1, h2, h3, h4, h5 {
text-align: center;
color: blue;
}
The CSS class selecter is a selecter that can be used to style any HTML
element that has the class attribute with the same name. A class selecter's
name starts with a period. I use it to center the links at the bottom of this
page. The CSS: .center {text-align: center}.
The HTML:
<div class="center"><a href="index.php">^</a></div>
That rule can be applied to any element containing text. Center the
text in a paragraph: <p class="center"> ... </p>
Also like HTML you can use comment tags. To comment a single line use the hashtag
# This text is hidden from browser
A multi line comment looks like
/* !--
This text is hidden from browser
and so is this */
An element can be a block element; ones that always start on a new line
like <p> or <h1>. An inline element;
one that does not start on a new
line like <a>, <b> (bold), and <i> (italic).
You can use CSS to change a block to inline and vis versa.
<div> is a block-level element used for grouping and
structuring content, providing a container to organize and style
sections of a webpage. The <span> tag is an inline element
used for styling portions of text or elements within a block-level
container.
CSS applied directly to an element is called inline styling.
It looks something like pre HTML5 with the depricated attributes replaced by
a style attribute. Internal CSS is when the styling is embeded in a page within
<style> </style> within the <head>
</head>. Internal CSS is used to apply styles that are unique to that web
page. External styling is when is when the CSS is stored in file separate from
the HTML pages that can be applied to every page within a website. The file
extension is .css and it is applied to a web page with the link tag:
<link rel="stylesheet" href="file_path.css">.