Basic CSS - Day 2

Basic CSS - Day 2

Hello everyone!! I am back with another blog Basic CSS. This is Day 2 of my 30DaysofCodeChallenge.

Today I completed Basic CSS from Free Code Camp Responsive Web Design Course. It was so much fun, I discovered so many things and endless possibilities. Now I understand why CSS is extremely fun to learn.

I am covering all the important points I learnt today, hope you guys find it useful.

CSS -

CSS stands for Cascading Style Sheets. It is the language we use to style an HTML document and describes how HTML elements should be displayed.

  • Change the Color of the Text-

If we want to change the color of the text of HTML element, we can use the style attribute. The way to use it is :

<h2 style = "color: blue;">Blue Text</h2>

The method we just saw is also called as Inline CSS. We can style any element the same way.

  • CSS Selectors to style Element-

Inline CSS works fine, but there are multiple other ways to style elements. One of them is using Selectors. We can create a block and style any element we want inside it. It's done as :

<style>
h2
{
color: red;
}
</style>

This will work same as Inline CSS or any other method. We can style any element using CSS Selectors.

  • CSS Class to Style Elements-

Instead of applying CSS on a particular element we can make a class and apply CSS on multiple elements at a same time. We define a class in CSS by using period(.). Example-

.blue-text
{
color: blue;
}

In this example, we have made a class blue-text and then inside it we have specified color. Now we can give any element color blue by using class name. Let's see how:

<h2 class = "blue-text">Blue Text</h2>

Remember we define class by using a period but when using it in a html element we don't need period. It is defined inside quotes.

  • Setting Font Size and Family of an Element-

We can style our elements by setting the font size and family we want to use. It can be either done using CSS selector, class or Inline CSS.

  1. Font-Size of an element-
h1
{
font-size: 30 px;
}

We use font-size property of CSS to change the size. The size here is defined in Pixels(px). Also, don't forget to open and close curly braces while styling elements.

  1. Font-Family of an element-
.style-text
{
font-family: monospace;
}

There are ample amount of fonts present, If the font name is more than one word, it must be in quotation marks, like: "Times New Roman". Import a Google Font- We can also imports fonts from Google.

  • Specify how font should degrade-

What if the font family which we decided to apply is not available, in this case we can define a Generic name it will be applied itself if the font is not available.

{
font-family: FAMILY_NAME, GENERIC_NAME;
}
  • Size your Elements-

Images- If you want to size your image you can use width attribute with html element.

{
width : 20px;
}

Add Borders around Elements- Border property in CSS consists of style, color and width.

.thin-red-border
{
border-color: red;
border-width: 10px;
border-style: solid;
}

And then we can use this class on any html element. border-radius add rounded corners to any image, you can also use percentage to specify radius.

If you want to add multiple classes in a single html element you can do it with space-

<img class = "class1 class2 class3">
  • ID Attribute to style elements-

    In the way we use class to style elements, id can be used too. ID is defined using # in CSS.
#photo-element
{
background-color: red;
}

ID is not reusable, it can only be applied to an element. ID has higher importance than class.

  • Prioritize One Style over Another-

  1. If there are multiple styling elements then it override for class.

  2. The order of class is more important, 2nd declaration will take precedence over first. This is because browsers read CSS from top to bottom in order of their declaration.

  3. We can override class declarations by using ID attributes.

  4. By using INLINE CSS we can override all other CSS styles.

  5. And the last way to override CSS and the most powerful method is !important.

color : red !important;

The reason to override CSS is because you'll use CSS libraries which may accidentally override your own CSS so you can use these methods if you want specific style for an element.

  • Create and Use a custom CSS Variable-

We can also create a CSS variable and assign it values and properties. To create a variable use two hyphens in front of name.

--skin-color: red;

After you create a CSS variable, you can assign it values to other CSS properties by referencing name.

{
background: var(--skin color);
}

It will automatically set the background to red as the variable will be referred.

  • Inherit CSS Variables-

    By creating variables in root, you will be able to access CSS variables globally and from any other selector in style sheet.
:root
{
--penguin-belly: black;
}

You can access penguin belly variable wherever you want.

Change a variable for specific area- When you create a variable in root they will set the value of that variable for whole page. You van over write these variables by setting them again within a specific element.

I have covered all the important points in the blog. Hope you find it useful!!

Resources I use-

Follow me on-

Twitter - twitter.com/Sakshi_0612
GitHub - github.com/sakshigupta06