Want to create interactive content? It’s easy in Genially!
introduction into CSS
Aiman Qureshi
Created on March 4, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Learn how to style your websites!
CSS
1. Can you name some HTML tags?2. Do you remember any coding terms? 3. What does CSS stand for? 4. What is the CSS rule? 5. What is a CSS stylesheet?
Answer these starter questions on CSS and some from the last lesson. Answers will be revealed at the end!
- CSS Rule and best practices:
- selectors
- properties
- values
- Types of CSS and best practices:
- inline CSS
- internal CSS
- External CSS
What we are covering....
Objectives
CSS
What is CSS and why is it important ?
CSS or Cascading Style Sheets is what actually styles the webpages. Developers style HTML elements to create visually appealing webpages for users. it changes html.
output:
HTML code:
Say we have this peice of html code which will display a button on the wepbpage
syntax
its quite plain right? but we can change that!
CSS
First lets go over the CSS syntax with an example on how to style the html button! Just like HTML, we need to follow the correct syntax when coding in CSS. We'll break down the CSS rule on how HTML should be styled.
after the value; semicolon is where the line endsends
inside the {} curly brackets...
output: purple button
CSS Value
tells the computer what were changing the property to i.e. the new value Here the new colour of the button is purple
CSS property
tells the computer what we are changing. here were changing the background-colour of the button.
CSS code:
The CSS rule contains 3 parts...
syntax - CSS rule
tells the computer which (html) element of the page we are targeting. Here were targeting all buttons.
CSS selector
SYNTAX
lets go into more detail about the CSS styling and the three parts of the CSS rule - selectors, properties and values and the different things you can do with them.
i.e. different ways to select and when to use them
Use this selector when you went to target a type of element.In the previous example, we targeted button . Use this to target all buttons on the page.
Element selector
Types of CSS selectors
output:
CSS code:
syntax
Tip: use the universal selector to target all elements on the page use * asteric
CSS code:
here you can see only heading 1 and 2 are styled.
step 1: give the html element a class =""
step 2: reference the class . dot infront of the selector
For example, lets say you want heading 1 and heading 2 to be blue.
i.e. different ways to select and when to use them
Used to group elements that you want to apply the same style to.
Types of CSS selectors
output:
HTML code:
Class selector
syntax
step 2: reference the name with the hash # infront of the selector
step1: label the html element a id ="" and a fitting name
HTML code:
i.e. different ways to select and when to use them
Types of CSS selectors
output:
CSS code:
it creates an id so you can target one specific element with that ID. Use it when you want to style something and there wont be another element being styled the same way. For example, lets say you want to target a paragraph.
ID selector
syntax
note: CSS Uses kebab-case for class names, IDs, and properties.
output:
there are many to choose from! the more you use CSS the more you will get the hang of it. Tip: its better to style line-by-line for understanding whats going on better
In terms of values....
In terms of properties..
When changing colour, you can choose your own RGB (Red, green, blue) to get your desired look!
The comments explain the properties+ values! take a look note: you can make comments in CSS using /**/
There are many different CSS properties, experiment yourself to see!
px is the pixels is a unit of measurement
The different CSS properties and values
syntax
CSS placement of stylesheets
Now you know about CSS styling, lets look at 3 ways CSS can be placed inside a document. These are called stylesheets and are eitherInline, internal, (block of code) and external (seperate file).
CSS STYLESHEETS
Inline CSS
in-line CSS is for when you just want to style a specific HTML element. inline CSS is written inside the HTML document, and inside the actual html tag Add a style="" at the start of the of the element's opening tag.
CSS STYLESHEETS
Internal CSS
internal CSS is for when you want to style a single page. for this you will stay in the same HTML document and in the <head> section add a <style> section where you can put the CSS.
CSS STYLESHEETS
allows you to use a single stylesheet across multiple pages and is considered the best practice for web developers when creating a website because of the organisation.
CSS code in CSS file, now you can work on css side-by-side
step 3:
step 2:
step 1:
Use the HTML <link> element inside the <head> HTML document
External CSS
inside visual studio code create an index.html file, then a seperate stylesheet file called style.css