CSS GETTING STARTED

CASCADING STYLE SHEETS | GETTING STARTED

ON THIS PAGE
SECTION 1 | FOLDER STRUCTURE
SECTION 2 | CREATE YOUR CSS DOCUMENT
SECTION 3 | ATTATCH YOUR STYLESHEET

ALSO IN THIS SECTION
GETTING STARTED
SELECTORS AND SPECIFICITY
STYLING PROPERTIES AND VALUES
BOX AND LAYOUT
RESPONSIVE DESIGN
CSS QUICK REFERENCE

WHAT IS CSS

You can think of a CSS as a way of setting a template for the styles that you want each of your webpages to inherit. You can set the fonts, colour, positioning of items and much more. This saves you time when producing each webpage and ensures all your pages are consistent in design.

Using a CSS is especially useful when big teams of developers are all working on the same website, it ensures they all produce pages with a consistent style.

These are 3 main ways of applying CSS in your HTML; Inline, Internal Styles and External Styles.
INLINE STYLES

Applied directly to individual HTML elements using the style attribute.
Affects only that specific element.
Example: <p style="color: blue;">This is an inline style.</p>

INTERNAL STYLES

Defined within the <style> tags in the <head> section of an HTML document.
Affects elements on that specific page.

Example:
<head>
<style>
p { color: red; }
</style>
</head>

EXTERNAL STYLES

Defined in separate .css files.
Can be linked to multiple HTML documents, allowing for a consistent look and feel across multiple web pages.
Linked to HTML using the <link> tag.

Example: <link rel="stylesheet" type="text/css" href="styles.css">
Of the three, external styles are the most efficient for larger websites as they promote reusability and separation of content (HTML) from presentation (CSS). This page will look at creating an External style sheet and attaching it to HTML pages.

SECTION 1 | FOLDER STRUCTURE

To make your life easy further down the line it is a good idea to set up the correct folder structure now, for how you are going to save your work. Having this folder structure will make it easy for various pages and elements of your website to link to each other.

Choose where you are going to save your work.
1: Create a folder to hold you work, call it anything you want - keep it meaningful (myWebsite).
2: Inside the folder you created, create a subfolder called 'templates'
3a: Create another folder inside the first folder your created, call it 'static'
3b: Inside the folder called 'static' create another folder called 'css'
3c: Inside the folder called 'static' create another folder called ' images'
See the example folder structure below.

When you create your css file, save it in the css folder.

SECTION 2 | CREATE YOUR CSS DOCUMENT

In the style sheet we can set up the desired styles for each of the tags we use in the HTML pages. Below we will give an example of setting up a style for the <p> tag and the <h1> tag. Set up these three styles, body for the background, P for a paragraph and H for a heading, then save your file in the css folder you created and ensure you save it as a css file for example myStyleSheet.css.

Copy the sample code above and change some of the values. Next we need to attach the style sheet the the HTML page. If you have not already created a HTML page create one like the one shown below and save it in the main folder your created - not in any of the sub-folders.

SECTION 3 | ATTACH YOUR STYLESHEET

When you have made you HTML page you will notice if you open it in the browser the text will appear the the pre-set fonts and styles. If you attach your style sheet the HTML page will inherit the styles you set. To do this add the following line of code to your HTML page to link to the style sheet.

<link rel="stylesheet" href="static/css/myStyle.css">

Below is an example of where to link the CSS sheet within each of your HTML pages.

Note: If you did not follow the folder structure suggested then give the full file path in the href details. If you did follow the folder structure suggested then your code should look something like this.

<html>
<head>
<title>MY WEBSITE</title>
<link rel="stylesheet" href="static/css/myStyle.css">
</head>
<body>
<p>Hello World</p>
<h1>My first webpage</h1>
</body>
</html>

Once you have saved all your work the website should now inherit the styles you set on the CSS document. If you need more help, watch the video at the top of the page. If you still need more help please feel free to download the example below.

At this stage you might want to copy any of the css you wrote directly into the HTML doc and place it in the CSS doc. Any styles you leave in the HTML doc will overwrite the inherited styles from the CSS doc.

SECTION 4 | SYNTAX

CSS (Cascading Style Sheets) is used to style and layout web pages. The basic syntax of CSS consists of a selector and a declaration block.

SELECTOR

The selector determines which HTML elements the styles will be applied to. It can target elements based on their tag name, class, ID, or other attributes.

DECLARATION BLOCK

The declaration block contains one or more declarations, enclosed within curly braces { }.
Each declaration is made up of a property and a value, separated by a colon :.
Multiple declarations within a block are separated by semicolons ;.

For example

Selector: p - This targets all <p> (paragraph) elements on the web page.
Declaration Block: { color: red; font-size: 16px; }
Declaration 1: color: red; - This sets the text color of the paragraph to red.
Property: color
Value: red
Declaration 2: font-size: 16px; - This sets the font size of the paragraph to 16 pixels.
Property: font-size
Value: 16px

The selector determines which elements to style. The declaration block defines how those elements should be styled. Each declaration within the block specifies a property (what to style) and a value (how to style it).

NAVIGATION

COMING SOON