This is Part 2 of a tutorial post Create a Simple Website in CSS/HTML and deploy to Amazon S3, it is aimed at a completele beginner.
In this tutorial we will briefly cover:
- What is CSS?
- CSS Basics
- Create a Stylesheet
- Link HTML and CSS
- Basic CSS Properties
- CSS Exercises
1. What is CSS?
Cascading Style Sheets (CSS) is a style sheet language used for describing what the html elements should “look like”. It is used to describe whether an html element should be of certain height, width, if the text should be bold, text colour etc. We will try this shortly.
2. CSS Basics
This is a rule:
1 2 3
- This rule starts with
h1, which is a selector.
- The part inside the curly braces is the declaration.
coloris a property.
redis a value.
color: red;is a property-value pair.
;after the property-value pair separates it from other property-value pairs in the same rule, for example:
1 2 3 4
We will refer to those definitions throughout this class.
3. CSS Basics
When the browser reads the CSS file, it finds each selector and works out if it applies to any elements in the HTML. If it does, it uses the properties within the matching rule.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors. Selectors allow you to SELECT all elements that match:
- a certain tag name e.g.
- a certain element inside another element e.g. all
4. Create a Stylesheet
- Install Sublime or use your preferred text editor
- Create a new file in the same folder as the
index.htmland name it
- Type out the code below and save in in your
1 2 3 4
Here you created a rule that says:
h1 elements have the following properties: text alignment is
center & the text colour is
Exercise: Now use the example above to do the same for
<p>. Clue: create a new rule and replace
5. Link HTML and CSS
Now that we have our first stylesheet, we can tell the html document
index.html to use the stylesheet
style.css so that the browser knows what the page should look like.
- Add the following line in your
index.htmlfile underneath the
<link rel="stylesheet" href="style.css">
- Reload the file in the browser or open it again: Open your web browser, then press
Ctrl + O(Windows) or
Cmd + O(Mac) to open the file we have just updated. You should see “Hello World” and the text you added in the paragraph with the added style.
6. Basic CSS Properties
- Description: this is the text colour, this is used to style elements that have text e.g.
- More Info: MDN: color
- Description: this is used to define the background color of a particular element.
- More Info: MDN: background-color
- Description: this is used to set the size of a font in px or other units.
- More Info: CSS font size units
- Description: this is used to set an image as a background of an element.
- More Info: CSS-tricks: background-image
- Description: this is used to align text.
- More Info: Quirksmode: text-align
- Description: sets the padding of the element. See the Box Model picture below for an explanation of what padding is and how it will affect the look of the element.
padding: 10px 10px 10px 10px;or
- More Info: MDN: padding
- Description: this is used to set the margin of the element. See the Box Model picture below for an explanation of what padding is and how it will affect the look of the element.
- More Info: MDN: margin
6.1 CSS Box Model
In a document, each element is represented as a rectangular box. This model describes the content of the space taken by an element. Each box has four edges:
contentedge (in blue)
You can read more about CSS Box Model here.
5. CSS Exercises
We can add more to the
style.css at this stage or later, here is a list of CSS properties available.
- Try out all the properties from the Basic CSS Properties section and see what they all do.
- You can also style the
<body>element, try setting a background image on the element and see what that does.
- Make an image to also be a link, ie make the image clickable that will take you to a different website. Tip: you can add some elements inside of other elements,try and add an
- Align left or center all the text on the page.