CSS Document 1

Alright, here we are, finally, CSS. CSS is in fact pretty easy (if you don't try to do it all at once) so nothing to care about here either :D


Table of contents:


CSS Introduction:

CSS is like an extension to HTML, which enables us to add beauty to a website.


What is CSS?

CSS greately improves the looks of a website (even this one, you can press to toggle CSS on this page [you will regret it]). It's written into an HTML file (but you can choose to write it in a separate .css file if you want). CSS includes text colors, fonts, background colors, content alignment, margin & padding, borders, shadows, transitions, and MUCH more :D.


How to write CSS?

There are three ways:

  1. Inline Styling (Using the style attribute in an element)
  2. Using the style tag
  3. External Styling (Using an external .css file)

1. Inline Styling:

In inline styling, the CSS is written in the style attribute of the element. This way, the written CSS gets applied to its element:

The CSS will be applied onto the text "Some Text"

This is one of the most frequent ways of writing CSS. Personally, I use this when I want some CSS to exclusively target one specific element. When I want to use CSS for the whole page, I use the style tag:

2. The style tag:

This type is used when you want some CSS to apply on the whole page. In this procedure, you have to add a style tag in the head tag of the document:

The CSS will be applied according to the class name, ID, or the tag name specified. You will learn more about this later.

This type is also used alot, but in professional websites, developers often prefer external CSS.

3. External CSS:

This type is also used while applying some CSS to whole page. In this type, you have to add a separate file (the name is usually style.css), and link this file to the main HTML file. The CSS in the style.css file will be written exactly as how CSS is written inside the style tag in the above type.

How to link the style.css file to the HTML file? In the head tag, add this:

You dont need to remember this whole line, just type link and hit tab, Sublime will take care of the rest of the line

This type is mostly seen in public websites.

Even though I have specified which type to use where, its ultimately upto you, that which type you will use for your work; it's not a rule to follow my guidelines, things will work without them. But since my guidelines seem to be the most reasonable and easy to me, I think you should follow me.

Task to do 1: Link an external .css file

Make a style.css, and try to link that file using the link tag.


Important CSS concepts:

Classes:

You are in class 10... no no no no, not those classes- No wait, I think they can be used to explain.

Classes, are names you give to a group of elements. You are in class 10 means there is a class, named 10, and you are a member of it. Your classfellows are in the same class, and hence are more similar to you, than students of the class 9, or 8.

Different classes differentiate the properties of its members. CSS classes are the same. But the difference is, you define its properties (color, border, alignment, etc.). You can have a card class, in which all elements are styled to look like a floating card. A mono class could be used, which could be styled to give its elements a monospace font, hence giving a code-y look. Similarly, a hint class could be used for hints.

In fact, all the examples above are actually being used, right now, in this document!

I am some code!

I am a hint!

I am inside a card!

The code of above 3 elements is:

Notice the class attribute in each of these elements.

I hope you understood what classes mean. Now, how do you use classes? Like, how do you define the properties of a class. For that, let me first discuss what exactly is a CSS property:

CSS Properties:

A CSS property is the main CSS thing. A CSS property defines a property of an element. Every CSS property looks like this:

property: value;

For example: color: red; or font-size: 20px;. In both of these examples, the first part, (before the :) is called property, and the second is called its value. The : in the middle separates the property from the value, and the ; is the Statement Terminator.

What's a Statement Terminator?

Now, if you actually studied PHP, you should already know what is it. However if you didnt, then, a statement terminator is like a full stop of English. It indicates that a line of code has been ended here. Statement terminators are mandatory in CSS.

Task to do 2: Give a span a red color

Congrats! You just learned your first CSS properties! This means that you can use these properties in your HTML file right now! Go ahead, and try to give a span a red color. (Write the property using inline styling)


It should look like this :D

How to use classes?

Classes are used in the style tag, or while using external CSS. A regular CSS rule consists of the following:

selector {
   property: value;
}
The selector defines the element(s) to target the CSS. It can be:

These were the simple selectors. CSS selectors can get really complicated too! You can visit this w3schools page for a detail on these selectors. This w3schools page contains some useful selectors, so I suggest you should read it.


You can also select HTML elements in a certain state (like hover, active, focus) by adding the condition after the selector you write: 

a:hover {
   color: blue;
}
This will set the color of all a tags to blue when hovered on, roughly like the a tags on this page (but without the short animation).


Task to do 3:

Give a class error to a b tag, and set its color to red using the style tag.

You can learn more about CSS properties and selectors from this w3schools page.


Some CSS properties (well, a lot actually):

Here, I'll tell CSS properties, you can use them, and see the results of each of them in the editor provided below all of these properties.

Property Name Description (related) Possible values Try it
color Gives a color to text. HEX/RGB/RGBA color code or some common color names. Hit Ctrl + space after typing color: to view all options.
font-size Change font size of some text. Any number + unit (without space). Unit can be px, %, em, etc.
font-weight Add weight to some text. Any number between 100 and 1000, bold, bolder, lighter, or normal
font-style Add formatting to some text. italic, normal or oblique
font-family Change the font family of a text.
Pro tip: If you want to change the font of the complete page, just add this property to the body tag, by:
body {
   font-family: [FONT NAME];
}
 Name of any of the installed fonts. (if you want to use a custom font, just google it lol)
background-color Add a background color to anything. HEX/RGB/RGBA color code or some common color names. Hit Ctrl + space after typing background-color: to view all options.
border Gives a border to an element. border is actually a shortcut to completely add a border. Normally, some other properties like border-color, border-style, etc. are used one by one, but here, you can achieve it quickly by "width(px) style(usually solid) color" (without double quotes, spaces in between are mandatory). Visit this w3schools page for more info.
For example: a 1px red border would appear by border: 1px solid red;
border-radius Used to round the corners of an element. This either requires a border, or a background color to be visible. Any number + unit (without space). Unit can be px, %, em, etc.
box-shadow Gives a shadow to any element. Ok this is a complex one, pay attention:
x-position y-position softness color (spaces are mandatory)
x-position, y-position and softness: Any number + unit (without space). Unit can be px, %, em, etc.
color: HEX/RGB/RGBA color code or some common color names. Hit Ctrl + space to view all options.
margin Adds spacing outside an element. Any number + unit (without space). Unit can be px, %, em, etc.
padding Adds spacing inside an element, before its inner elements. Any number + unit (without space). Unit can be px, %, em, etc.
width Width! Any number + unit (without space). Unit can be px, %, em, etc.
height Height! Note: For some reason, percentage values in height don't work. If you really want height proportional to the parent height, then you can use vh (viewport height) which works similar to % (100vh = full height) Any number + unit (without space). Unit can be px, em, vh, etc.

These are pretty much all of the properties used in this whole document! :D Be sure to try all of these, I spent a lot of time making this huge table, so you should too

These definitely aren't all of the CSS properties in existance. If you are looking for one you can't find here, you can google it.

Important difference between margin and padding:

Many beginners don't understand the actual difference between margin and padding, and hence take both of them as a means of adding spacing.

Margin adds spacing outside an element
Padding adds spacing inside an element

For more information, visit this w3schools page.


output will be displayed here

CSS can be hard too! I'll make a document 2, in which ill put properties related to aligning stuff. Aligning stuff in CSS can be pretty complex sometimes


Task to do answers:

  1. Create a style.css file and add in the head tag.