Scribd
Upload
15 views

CSS Syntax1

CSS syntax uses selectors to target HTML elements for styling. Each CSS rule contains a selector and one or more declarations with a property and value to style elements. Declarations end with semicolons and are contained in curly brackets. Comments can be added to CSS and begin with /* and end with */ to explain code without affecting rendering.

Uploaded by

sapzmba
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
15 views

CSS Syntax1

CSS syntax uses selectors to target HTML elements for styling. Each CSS rule contains a selector and one or more declarations with a property and value to style elements. Declarations end with semicolons and are contained in curly brackets. Comments can be added to CSS and begin with /* and end with */ to explain code without affecting rendering.

Uploaded by

sapzmba
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS Syntax

Previous Next Chapter

Examples

Look at Example 1 Look at Example 2

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red;text-align:center;} To make the CSS more readable, you can put one declaration on each line, like this:

Example
p { color:red; text-align:center; }
Try it yourself

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

Previous
<html> <head> <style type="text/css"> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;}

Next Chapter

</style> </head>

<body>

<h1>This header is 36 pt</h1> <h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style type="text/css"> body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; } </style> </head>

<body>

<h1>CSS example!</h1>

<p>This is a paragraph.</p>

</body> </html>

You might also like