Basic Syntax of CSS
So let's have our first look at Cascading Style Sheets. As you probably already know, all programing languages have their own syntax, and while HTML and CSS aren't exactly programming languages, they do have their own syntax.
CSS syntax is not much of a trouble. CSS rules are defined as a property name followed by a colon and then a property value. Individual rules are terminated by semicolons, with the final rule having an optional semicolon. Phew! Let's look at this sentence more closely.
property-name1 : value1; . . . property-nameN : valueN;
CSS rules can be placed directly within most HTML tags by using the style attribute. For example to set the color and alignment of an h1 heading, we can use:
<h1 style = "color:red; text-align:center;">Hello, CSS!</h1>
Such direct use of CSS is called Inline styling and which generally should be avoided due to its interference with the HTML tags, increase in HTML file size , and no reusability of the styles.
Instead, we can create a style that binds itself to a particular element or a set of elements, which can be reused as required further. Consider the example below showing the correct CSS syntax broken down to its individual components.
![CSS Syntax]()
Note: The final declaration in a style block does not require a semicolon. However, for good measure and easy insertion of properties later, always consider using semicolons after all the properties.
CSS property names are separated by dashes when they use multiple words, example: font-face, line-height, font-size, etc. Also, do keep in mind that CSS is not whitespace sensitive, hence
h1{
font-size: large;
text-align: center;
font-family: Arial
}
will render the same as
h1{font-size: large; text-align: center; font-family: Arial }
Also, note that CSS is case insensitive meaning that
h1{
FONT-SIZE: large;
text-align: CENTER;
FONT-FAMILY: Arial
}
is the same as
h1{
font-size: large;
text-align: center;
font-family: Arial
}
However in some cases, such as with URL values, font names and certain selectors (example: class), case will be enforced. Hence to avoid confusion and mistakes it is better to assume that CSS is case sensitive.
Style Sheets can be put together in the same document as HTML using a <style>...</style> block as seen earlier. However, it can be put in an external file and referenced via a <link> tag, which is enclosed within the <head> tag of a HTML document. Consider a sample style sheet.
Using the <style> tag:
<style type = "text/css">
h1 { color: red; text-align: center; }
p { line-height: 150%; }
</style>
Using the <link> tag:
<link href = "mystyle.css" rel = "stylesheet" type = "text/css"/>
The mystyle.css would simply contain the CSS rules, with no HTML tags.
mystyle.css
h1{ color: red; text-align: center; }
p{ line-height: 150%; }
Before we move ahead, it should be noted that even though CSS and HTML together make a great team, CSS is distinct from HTML and infact relies on it. CSS is not a replacement for markup, instead it can only be used to style HTML.
