CSS
Cascading Style Sheets (CSS) can be used to style web pages.
While HTML tells the browser what to display on a page, CSS tells the browser how to display it.
CSS rules can be added to already existing HTML files or can be stored in separate .CSS files and linked to a webpage.
Selectors
Style sheets follow the syntax of: identifier { property: value }
If there are only a few property changes they can be typed across one line:
body {font-family: Arial Narrow; font-size: 20px; color: yellow; text-align: center; background-color: black }
Since there are multiple properties being formatted, the above style sheet would be better suited to multiple lines.
body {
font-family: Arial Narrow;
font-size: 20px;
color: yellow;
text-align: center;
background-color: black
}
ID's and Classes
A CSS class selector can be used when you want to reuse characteristics across multiple elements.
These tags don’t all need to be the same as long as the property applies to them - a good example would be the color property.
In the CSS:
.black {color: black;}
To apply to an HTML Element:
<h1 class="black"> This H1 heading is black</h1>
An ID selector would be used when you want specific occurrences of a tag to be treated differently from others.
An ID will always over-rule a class or type selector.
In the CSS:
#blue {color: blue;}
To apply to an HTML Element:
<h1 id="blue"> This H1 heading is blue</h1>
Style Placement
The term cascading is due to the fact that there can be multiple style rules affecting the presentation of HTML.
And the fact that they cascade and can affect all other pages in a site.
Inline Style
Internal Style Sheet
External Style Sheet
Browser default
Highest Priority at the top, so an External Stylesheet would get over-ridden in the following order:
Internal Style Sheet (if there is one)
Classes
ID’s
Inline Style
Inline Styles
When you add a CSS rule(s) in the line of HTML that you want to format.
<h1 style = “color: white; text-align: center”> This is a large heading </h1>
Note that ‘colour’ and ‘centre’ have to use American English spelling.
Internal Stylesheet
If you only want to apply CSS rules to one webpage then you might want to keep all of your HTML and CSS code together in the same document.
The CSS rules are placed in the <head> section of the HTML code in the following format:
<head>
<style>
CSS rules
</style>
</head>
External Stylesheet
When you create a separate CSS file that your HTML file links to. The link to the CSS is placed in the head section of your HTML code:
<head>
<title> this is my webpage </title>
<link rel = “stylesheet” type = “text / css” href = “stylesheetname.css”>
</head>
If you have multiple HTML pages and you want to use the same formatting for all of them then it’s ideal to use an external CSS for the following reasons:
You only have to create one CSS file
If you need to make any changes, you only have to edit the one CSS file
When you update the CSS file the changes are applied to all connected HTML pages at once
Properties
When using CSS, a developer can alter the values stored for properties of an element. The properties that you need to be able to alter are:
text
font-family
font-size
color
alignment
background color
Font-Family
The font-family property is used to choose the font for a piece of text. You can also select a backup font in case the first one isn't available.
h1{
font-family: "Arial;
}
p{
font-family: Times New Roman;
}
Font-Size
The font-size property sets the size of the text:
Pixel Size (px)
Keywords: The size of the text relative to the browser default with various sizes from:
xx-small, x-small, small, medium, large, x-large, xx-large
h1{
font-size: 10px;
}
p{
font-size: large;
}
Color
The color property sets the foreground colour of a particular element. You can specify the colour by the following methods
Named Colours
In the first version of CSS (1996) there were 16 named colours. There are now 148 named colours.
Hex Colour Codes
Colour codes can be constructed using the mix of Red, Green and Blue (in hex values).
rgb Values
Colour codes can be constructed using the mix of Red, Green and Blue but this time will have a minimum value of 0 (none of that colour) and maximum value of 255.
h1{
color: aqua;
}
h2{
color: #990024;
}
p{
color: rgb(102, 2, 60);
}
The background-color property sets the background colour of an element and uses the same methods to specify colours as the previous color property but styles the background of an element.
body{
background-color: grey;
}
div{
background-color: #990024;
}
Alignment
The text-alignment property is used to control how the content in an element is displayed. There are various properties but we will look at the following:
left
right
center
justify
<body>
<h1 style="text-align:left;">Aligned Left</h1>
<h1 style="text-align:right;">Aligned Right</h1>
<h1 style="text-align:center;">Aligned Center</h1>
<h1 style="text-align:justified;">Justified Text</h1>
</body>
