About CSS
Cascading Stylesheets (CSS) is used to style HTML documents. It describes how HTML elements should be displayed, from
font size and colour to resizing images and other content on the page. It can also be used to define the layout of your
webppage. Styles can also
be embeded into a HTML element by using the style attribute. The syntax of such styles is similar to CSS.
To use CSS in a HTML document, it has to be linked in the head section of the document. Below is the how to link a CSS
file to a HTML document.
<link rel="stylesheet" href="style.css">
CSS Syntax
To style a HTML element, I created a CSS file and used it to select an element. In the following example from this webpage, I selected all elements contained in the body element. I then changed the font and font colour of all text in the body, and changed the background colour of the page. The font colour is defined using a built in colour value, and the background colour is defined using a hex colour code.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: white;
background-color: #0E0114;
}
Each property is defined one by one, and is seperated by semi-colons. The style properties of each element is enclosed in curly brackets. Another way to style HTML is to use classes. HTML elements has a class attribute which is a name given to the element other than its tag. An element can have multiple classes, where each class name is seperated by spaces. The following HTML element has 2 classes, "text" and "main".
<p class="text main">This is some sample html</p>These classes allow styling a specific group of elements while still using the same tags as other unstyled elements. To select a class, a "."" must be placed before the name of the class in the CSS file. The following is another example from this webpage, where I used ".content" to define the content in the page, then change the padding, width, and margin of the main content of the page.
.content {
padding-top: 1%;
width: 80%;
margin: auto;
}