-
Notifications
You must be signed in to change notification settings - Fork 0
2. Introduction to CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language such as HTML. CSS can control elements such as layout, colour and font styles. Although HTML and CSS are different languages, they have grown up together and are very complimentary languages.
CSS content is placed inside a <style> tag which is inside the <head> tag.
<head>
<style>
</style>
</head>
Although CSS can be placed in a separate file to the HTML code, for now, as we are learning CSS and using only one HTML page, we will place the CSS styling inside the <style> tag.
Syntax is a term used to describe the structure of a coding language. HTML uses angle brackets, CSS doesn’t. Angle brackets are therefore a syntax of HTML.
If you don’t include CSS styling, the browser will use default styles. Most browsers apply a similar style with subtle differences. Without CSS styling, websites would all look the same which would make the internet a very dull place indeed.
There are a few ways to style content in CSS. One way is to declare a different style for each of the tags. For example we can style all <h1> tags to be white and <h2> tags to be red. We could also set the back-ground colour of the
Inside the style tag, type the name of a HTML tag you wish to style. This is called the selector. In this example, we are selecting the HTML tags to style.
Then create open and closed curly braces. Inside the braces, you will create one or more properties and values for those properties. This will always be in the format:
Selector {Property: Value;}
Examples:
h1 {color:red;}
p {color:white;}
Note: color is spelled without a u which is the American way. Most coding languages originated in the US. You will get an error if you use colour. The properties and their values are from a defined list so you cannot make up your own. The list is very extensive however. You can find them at w3schools Remember, when choosing colours, CSS only contains a limited list of colours which have English names. The remaining colours use numbers prefixed by a hash tag e.g. #FF99CC is a light pink. A full range of colours is available at w3schools.com. The best way to learn is to play around with the properties and the values. Remember to refresh the browser to see your changes.
The code is available here. The code is also available as part of a larger repository of files which you can download as a zip file and edit in Notepad++ or Text Wrangler from here.