All About CSS - 01. Inline Styles, External Styles and much more.
Tags: css, beginners, html, webdev
Published: 2021-07-31 11:33:21

Hello, welcome. From today, we'll start learning CSS. And in today's article you'll learn, What is CSS ? How to write CSS?

If you haven't read previous web development articles on HTML. You can follow [this](https://dev.to/kunaal438/series/13784) series to learn everything about HTML.

So, without wasting more time let's start.

#What is CSS

![image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8pdi4p9sxerkyp6gpw8.png) 

Well, CSS stands for Cascading Style sheets. This is a language (not programming language) which is used to style websites. And you can actually see power of CSS with this example.

![CSS 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j9zi6b13undo8ryfdgs.png)
 
CSS can make a website beautiful or make it terrible.

#Implementation

Let's see now, How can we start using CSS to make our websites beautiful. There are lot of ways in which you can style an element of web page. Let's see them in detail.

###1. Inline Styles

Inline styles refer to when you style your elements individually. using `style` attribute. Let's see an example.

```HTML
<p style="color: red;">Red colored Text</p>
<p style="color: blue;">Blue colored Text</p>
<p style="color: green;">Green colored Text</p>
```
>color is CSS property which is used to set text's color. We'll discuss about CSS properties in detail.

######Output
![Capture-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q7s2h4ffadzsfpxppei.PNG) 

###2. Style Tag
`<style></style>`
yes, you guessed right. This is an HTML tag which is used to style elements. This is a more efficient way to style element and use CSS. `style` tag always use inside `head` tag. Let's see an example.

```HTML
<head>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>Red colored Text</p>
    <p>Blue colored Text</p>
    <p>Green colored Text</p>
</body>
```
######Output
![Capture-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41o5cqd8efhomiyucnot.PNG) 

It'll be little confusing for you at first. But, let's understand it.

Up until now, we just seeing how we can implement CSS style to HTML. But to start with `style` tag or `external styles`. We have to understand. How we write CSS.

######CSS Syntax
```CSS
selector{
    property: value;
}
```
1. `selector` - selector means html elements like `p, div, h1` or classes like `.para, .heading,  .container` or can be ids. CSS selectors define which element(s) we want to style. There are lot's of Selectors and we'll cover them all in upcoming articles.

2. `property`: Property is CSS property. It could be `color`, `width, height` or any Valid CSS property.

3. `value` : And the last we have values. These are the valid values for CSS properties. For example, CSS property `color` can have the value `red` but cannot have the value `khfashfkashfkas`.

And last thing. You have to make sure where is bracket is opening and closing, And you have to use colons`:` and semi-colons `;`. Yes this is hard to keep up with colons, brackets and all. But that's how programming is.

![Semi colon](https://pics.me.me/programming-student-forgets-semi-colon-in-code-semi-colon-im-about-to-45947507.png)

###3. External style sheets

After "inline styles" and "style tag". We have another way to use CSS to style our elements. And in my opinion this is the best way.

External Style sheets refers to when you have a separate CSS file for all your elements. And you link that external file to your HTML file.

Let's see how this works.
First you have to make a separate file with extension `.css`. For example I made a file named `style.css` in the same folder where i have `index.html`. Then,

######Style.css
```CSS
p{
   color: red;
}
```
######index.html
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>
    <p>Red colored Text</p>
    <p>Blue colored Text</p>
    <p>Green colored Text</p>
</body>
</html>
```
######Output
![Capture-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41o5cqd8efhomiyucnot.PNG) 

Things to notice here,
1. In `style.css` file. We are using same CSS syntax but we are not using `<style></style>` tag because this tag is only for HTML files.
2. To link our CSS file in `index.html`, we are using `<link>` tag. Link tag is used to link an external CSS file to HTML file. Link tag is self closing tag. And it has some attributes to keep in mind.
   - `href` - This specifies the file path.
   - `rel` - stands for relation. Id defines what relation or what this file actually is for.

#Selectors

In above examples, we used `p` to select element. But if you notice it styled all our p elements. What if we want to style a specific element.

###Classes

Through classes you can select specific element in css. Let's see how. To use this, you have to use `class` attribute.

```HTML
<p class="red">Red colored Text</p>
<p>Blue colored Text</p>
<p>Green colored Text</p>
``` 

######Css
```CSS
p {
   color: green;
}
.red{
   color: red;
}
```
######Output
![Capture-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wdghiu0585z3qftiylw.PNG)

You can see all the `p` elements have color green except the first one which has a class `red`. 

Remember, to select any class in CSS you always have to type `.` at the beginning. This tells the browser that this is a class selector.

###Ids
Same as classes, we have id. The idea behind Id is, we can use same class for multiple elements but we should use a unique id for a single element. It's totally up to you that you want to use id for multiple element or not. But it is not a good practice.

to create id we use `id` attribute. And to select it in the CSS we type `#` before the actual id name.

######index.html
```HTML
<p class="red">Red colored Text</p>
<p id="blue">Blue colored Text</p>
<p>Green colored Text</p>
```
######Style.css
```CSS
p {
    color: green;
}
.red{
    color: red;
}
#blue{
    color: blue;
}
```
######Output
![Capture-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ameqrdf4b1fq7ql4213q.PNG)

Let's see some CSS properties.

1. `width` : As name suggests, this specifies element's width. The value for this could be in `%` or `px`. Example - `width: 100px;`

2. `height` : This specifies element's height. Valid Values are same as `width` properties.

3. `color` : This specifies font/text color. Values could be in hexadecimal codes, or rgb mode, or you can common color name. Example - `color: rgb(0, 0, 0);` or `color: black;`

4. `font-size` : This is used to change/set fonts size. Values can be in `px`. Example - `font-size: 20px;`

5. `background-color` : This is used to set background color. Valid values are same as `color` property.

6. `border` : This is used to define border of the element. It is used like this.

```CSS
element{
   border: <thickness> <border type> <border color>;
}
```
`thickness` : It is the thickness of the border. vale could be in px. Like `20px`

`border type`: It specifies which type of border we want. Value could be `solid | dotted | dashed`.

`border color`: It is used to set border's color.

######Example
```CSS
element{
   border: 2px solid black;
}
```
There are lot of CSS property, that we'll discuss in future. But if you to know more. You should [checkout this](https://www.w3schools.com/w3css/defaulT.asp).

And I also have some articles which covers CSS advance topics so you read them too.

1. [CSS Transform](https://dev.to/kunaal438/css-transform-everything-you-need-for-a-good-developer-4obc)
2. [CSS pusedo elements](https://dev.to/kunaal438/all-about-css-before-and-after-element-css-pseudo-elements-5g1n)
3. [CSS Flex Box](https://dev.to/kunaal438/display-flex-complete-guide-on-css-flex-box-2021-5bi2)
4. [CSS Media Query](https://dev.to/kunaal438/media-query-everything-you-need-for-responsive-design-b8g)
5. [CSS Positions](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh)

So, that's sit for today. I hope you understood each and everything. If you have any doubt feel free to ask me in comments.

If you like, you can subscribe my [youtube channel](https://www.youtube.com/c/modern_web?sub_confirmation=1).I create awesome web development tutorials. You can also watch tutorial on [Youtube Clone](https://www.youtube.com/watch?v=fOKgHld96mU) by me.

Thanks For reading.