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
CSS
Learn how to style your websites!
Answer these starter questions on CSS and some from the last lesson. Answers will be revealed at the end!
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?
Objectives
What we are covering....
- CSS Rule and best practices:
- selectors
- properties
- values
- Types of CSS and best practices:
- inline CSS
- internal CSS
- External CSS
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.
syntax
Say we have this peice of html code which will display a button on the wepbpage
HTML code:
output:
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.
The CSS rule contains 3 parts...
syntax - CSS rule
inside the {} curly brackets...
CSS property
tells the computer what we are changing. here were changing the background-colour of the button.
CSS code:
CSS selector
tells the computer which (html) element of the page we are targeting. Here were targeting all buttons.
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
output: purple button
after the value; semicolon is where the line endsends
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.
Types of CSS selectors
syntax
i.e. different ways to select and when to use them
Element selector
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.
CSS code:
output:
Tip: use the universal selector to target all elements on the page use * asteric
Types of CSS selectors
syntax
i.e. different ways to select and when to use them
Class selector
Used to group elements that you want to apply the same style to.
For example, lets say you want heading 1 and heading 2 to be blue.
output:
HTML code:
CSS code:
step 2: reference the class . dot infront of the selector
step 1: give the html element a class =""
here you can see only heading 1 and 2 are styled.
Types of CSS selectors
syntax
i.e. different ways to select and when to use them
ID selector
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.
CSS code:
HTML code:
step 2: reference the name with the hash # infront of the selector
step1: label the html element a id ="" and a fitting name
output:
The different CSS properties and values
syntax
There are many different CSS properties, experiment yourself to see!
The comments explain the properties+ values! take a look note: you can make comments in CSS using /**/
In terms of properties..
In terms of values....
px is the pixels is a unit of measurement
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
When changing colour, you can choose your own RGB (Red, green, blue) to get your desired look!
output:
note: CSS Uses kebab-case for class names, IDs, and properties.
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).
Inline CSS
CSS STYLESHEETS
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.
Internal CSS
CSS STYLESHEETS
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.
step 2:
Use the HTML <link> element inside the <head> HTML document
CSS STYLESHEETS
External CSS
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.
step 1:
step 3:
CSS code in CSS file, now you can work on css side-by-side
inside visual studio code create an index.html file, then a seperate stylesheet file called style.css