Day 1 css setup and selectors
Hello welcome to Learn CSS with Paul Okoduwa, I will be your cruise ship captain for the next 15 days. As we get started let’s take a look at today’s objective.
- Understand what “CSS” is
- Include correctly CSS in your Html file
- Define CSS rule
- Select elements by tag name, class and ID
- Play with basic properties like color and font.
Aye crew members, cooks, and everyone on board let get this ship moving.
What is CSS
Guys this right here can save you a lot of stress. CSS stands for Cascading Style Sheets.
It tells how html elements should be displayed on screen and other media.
The beauty of it is the ability to control multiple pages all at once using one style sheet.
Different ways of including CSS
- Link from external file
This file must be saved with a .css extension and no html tag should be written in it
<html><head><title>Welcome to our crew ship </title><link rel = "stylesheet" type = "text / css" href = " style.css " /></head><body>All you styles will be added here in the body</body></html>
- Typed directly into your HTML document using internal style sheet
<html><head><script type =" text/css ">All you styles will be placed here<script></head></html>
- Inline style
<h2 style="color:blue; font-size:24px"> This is paul okoduwa </h2>An inline style is used to apply a unique style to a single element.
The General CSS Rule
CSS in itself can be tricky sometimes, when we understand this main rule our lives become easier.
Selector {Property: value;Second property: another value;}
Just imagine you going to style the all the H1 in your page, probably you want to make them have the color blue and a bigger font size. Following the general rule, here how we are going to style it.
/* give h1 color blue and font-size 30px */H1 {Color: blue;Font-size: 30px;}
I know you say something different up there. Am talking about /* comment */, it’s called a comment. We will talk more on that later.
Back to our example, what we just did was select all the h1 on our page and give them the color blue and font-size 30px. Depending on the property, the color can be in named green, white etc., hexadecimal like #FFF #0F0 or in rgb(r, g, b) formats. While font-size can be specified in pixels, rm, em or fr units.
CSS Selectors
As you style with CSS, almost all times you will be selecting elements and html tags. Don’t be scared, you will soon be able to do it on the fly. Selectors are used to find HTML elements based on their name, class, id, attributes etc. Let’s go through a list of the types of selectors.
- The element Selectors
You use the element selector to find elements based on the element name. we can style all the Div in our html page using the element selector:
Div {Color: pink;Text-align: center;Font-size: 30px;}
- The Id selector
Before using this selector, you first have to give the tag you want to style an Id.
<html><head><title>Welcome to our crew ship </title><link rel = "stylesheet" type = "text / css" href = " style.css " /></head><body><h1>All you styles will be added here in the body</h1><div id="style"> This is my first ID </div></body></html>
After giving our div tag the Id attribute, we can then select using the pound sign and style it.
#style {Color: pink;Text-align: center;Font-size: 30px;}
- The class selector
This is the one you will probably use most often. It’s used to style a specific class attribute. Just like the Id selector, you first have to give the element you want to style a class.
<html><head><title>Welcome to our crew ship </title><link rel = "stylesheet" type = "text / css" href = " style.css " /></head><body><h1>All you styles will be added here in the body</h1><div class="style"> This is my first ID </div></body></html>
Note: the major difference between a class and Id is the fact that you can only use one id per page, while a class is re-usable. You can use a class as many times as possible.
Just like I promised, let’s talk about comments.
Comments are used to explain the code or the meaning of the attributes you have written. One advantage of using comments is the face that it enables other developers to edit, and reuse your program.
A CSS comment begins with /* and ends with */.
Example:
/* This is my first css code */A comment can span multiple pages./*This is my first CSS codeI am learning from Paul Okoduwa*/
Aye fellows and crew members. This is where we will duck ship today. We will eat, set the night camp fire and practice a little.
Don’t forget you can always hit me up on twitter @paul_okoduwa
