CSS quick start
intro to CSS
CSS stands for Cascading Style Sheets - In css you can determine what the content of a webpage looks like.
your CSS code has to go in between style tags. the style tag should have an attribute type with the value "text/css", to tell it that we're using css. Within these style tags, we can style things by putting the name of what we want to style in front of curly brackets, and putting our styles inside of the curly brackets.
<style type="text/css">
strong{
color: #eeeeee;
}
notice how we have strong in front of the curly brackets. this tells us that we're changing the way the strong tag affects the text. Inside of the curly brackets, we list our css properties in the following syntax
property: value;
in the earlier example the property was color and the value is a color expressed in a hex format.
please note: if you ever try to style something and your changes are not displaying check that you included the colon(:) after the property and the semicolon(;) after the value. (I've made this mistake countless times)
adding CSS to your page
you may be wondering, where does this style tag go in an HTML page? it goes in the head section. Here is an example;
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style type="text/css">
strong{
color: #eeeeee;
</head>
<body>
<h1>welcome to my website</h1>
<p> thanks for <strong>visiting</strong><p>
</body>
</html>
Alternatively
You can also put your css in a different file and within the head of your html link to it. In this way it may be easier to keep your documents orderly and readable. To do so;
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<h1>welcome to my website</h1>
<p> thanks for <strong>visiting</strong><p>
</body>
</html>
in this example the rel attribute defines a relationship between the linked source, and the current document. The href refers to the document where the css should be written. The type attribute with the value "text/css" tells us the content of the referred file contains CSS.
Changing your fonts
the CSS property used to change the font on your page is called font-family you can give it the name of a font in quotes, for example;
body{
font-family: 'Arial';
}
And it will use that font if it’s on the computer of whoever is visiting your website. You can also give it a type of font (a generic family of fonts):
body{
font-family: sans-serif;
}
and the browser will use a font in that family. some font families you can use are;
- serif
- sans-serif
- cursive
- monospace
You can also give the font-family property a list of fonts separated by commas. When you do this it will try every font down the list. If the browser doesn't have the first font, it will move on to the next one. for example;
body{
font-family: 'Courier New', monospace;
}
Font size
Another property to use when you want to change the size of your font is called font-size. for example, if you want a 12pt font;
body{
font-size: 12pt;
}