CSS · Web

Background Color, Image | CSS Tutorial -Part 4

We will be learning about all the possible design techniques we can apply to the background of the web pages. Below is the sample code to add background color to the body tag of web page:

body {
width: 100%;
font-family: monospace;
font-size: 18px;
font-weight: normal;
background-color: rgba(226, 215, 215, 0.35);
}

Similar to normal color attribute , background color can be also set as hexadecimal number, rgba, hsl and by name. It will set background color as below along with other styling which we might apply to our page.

Backgroundcolor

Fig 1

You can change the color to whatever color you like using ctrl+shift+i or using web developer tool on any browser as below:

browrserwindow.png

click on rgba and it will help you change it by adjusting the color you like.

We can have some background color added to individual tags also like to h1, h2 or any tag we want as below:

h1, h2 {
font-weight: 700;
line-height: 1;
margin: 20px 0;
color: #2f2b2b;
background-color: #c5baba
}

The change in the h1 will be same as in fig 1.

Background Images: We can add background image to our web page using css. We can add any type of pic i.e. jpg, png, gif(moving pic) etc as below:

html {
width: 100%;
font-family: monospace;
font-size: 18px;
line-height: 1.5;
font-weight: normal;
background-image: url(“images/giphy.gif”);
background-repeat : repeat-y;
background-size: cover;
}

It will appear like : MovingPic.png

Note: When you actually apply .jif pic to your web page it is moving like an animation.

background-image is the attribute which helps us providing the url of the picture we want to add to out web page along with relative or absolute path.

background-repeat is defined to describe if we want to repeat background image to fill into complete page or not. Default value is no i.e. Only part of web page may be covered according to original size of the picture. Repeat-y means it will be only repeated vertically. For more info you can check https://www.w3schools.com/cssref/pr_background-repeat.asp

background-size property specify the background size of the image. Default value is auto i.e. the background-image contains its width and height. we have selected cover to to stretch it as possible to cover entire page.

For box model in CSS , click here

There are lot many other attributes can be added to web page. Watch out this place for more articles.

 

 

CSS

Attributes used to style your web page| CSS Tutorial -Part 3

As we have seen the attribute “color” in Part -2 , today we will go through some other basic parameters which are needed to set to give desired layout.

Font- Family : Font-family attribute describes which font type should be used for particular tag/html page/website level. If not mentioned , default font type of the web browser is assigned to the pages. E.g of font-family attribute value:

font-family: “Courier New”, Verdana, sans-serif;

This line means that first preference should be given to font type “Courier New”. If this font is not available on person’s computer than Verdana should be used else sans-serif should be used. Most of the browsers use serif family as default font type. We can download add on font types from Google fonts.

Font-Size: Font-size is the attribute which can be used to set the font size of each tag differently in page and change the default font size. Font size can be described in 3 different ways i.e. static size which is described in pixels written as px, relative to window size which is described is viewport width written as vw and 3rd way is EM which is relative to base size set on page. Below is the example of all three:

font-size: 16px;
font-size: .9vw; /*This is if window is 100 bit size each character occupy 0.9 of 100 bit*/
font-size: 2em; /* If base size is 16px , then 2em means 16*2=32px*/

Font-Weight: Font weight can be normal, bold or bolder(only supported by some browsers). Font weight can be described in numbers also. Below is the example:

font-weight: normal;
font-weight: 400;

Text-Transform: Text transform is used to show the text in particular fashion i.e. if you want to transform the text to uppercase/lowercase or capitalize form. Example of this is given below:

text-transform: uppercase;
text-decoration: underline;

Text-align: This is used to change the alignment of the text. E.g:

text-align:center;

These are just the basic attributes and there are many more attributes which can be checked at :https://www.w3schools.com/cssref/

For background color and more attributes >>

CSS · Web

Cascading Style Sheet Tutorial – Part 2

As we read in the last part of the tutorial that there are 2 ways to style your html page. First one was styling each tag separately and 2nd was putting the style tag in <head> tag of every html file in your website. But putting style tag in head in each page of your website can also cause the code redundancy which is tough to maintain and if any change come we have to make modification in all of the pages. To solve this we can create .css file for our website where we can list down all the styles we want to implement in our website. Below is the sample .css file :

css file

To use this CSS file in each of the page in website we have to use link tag as below:

<link href=”stylesheet.css” rel=”stylesheet”>

stylesheet.css is the name of the your css file.

To jot down below are the ways we might want to style our webpages:

  • If we want to style a particular tag one time in page we may style it at tag level
  • If we want to put some styling at page level , we can put it in <style> tag in head section
  • If we want to create common layout in out website, we should do it in CSS files.

So this was all about the ways you one can do styling the website. Now lets learn at the very basic level about the attributes and properties of various tags which you can set in the style sheets or tag:

Color: This is very basic property which we can set with any tag telling what should be color of the tag. e.g

p { color : black}                                          OR

p{ color :  #000000}                                      OR

p {color: rgb(0,0,0)}                                      OR

p { color: hsl(0, 0%, 0%)}

Above are mentioned 4 different ways we can color the text/background etc in the website.

First one is named colors, 2nd is hex code for the color, 3rd is rgb (red,green,blue as per intensity) and 4th is HSL i.e. hue, saturation and lightness. For further about colors , you can read at https://www.w3schools.com/colors/colors_hsl.asp

continue>>>>

CSS · Web

Cascading Style Sheet Tutorial – Part 1

CSS means cascade style sheet which is language used to style your web pages. One way to write CSS in your web page is in <style></style> tag in <head> tag or apply it at every tag separately. It is preferred to apply all styling rules in <head> tag because it makes your code less tedious for maintenance. Basic CSS example is given below having style tag in <head> tag:

<style>
p {color: black}
h1 {color: brown ; text-align:center}
a {color: blue}
.classselector {color: brown; background-color: gray}
#idselector {background-color: gray}
</style>

The style tag is written in the head section of the HTML page. This code means that if  anywhere  in your page having text in between these <p> </p> tags make it black and similarly <h1> should be brown and centrally aligned. <a> tag should be blue.

To break down above written code, every line is combination of selector and declarations.CSS has 3 type of selectors:

  • Tag selectors = Tag selectors are given at each tag level. e.g p,h1,a
  • class Selector = It starts with dot. Class selectors can be used with any html tag by writing for example <p class=”classselector”> . Class selector can be used with multiple tags in single html file
  • Id selector= It starts with #. Id selector is used with tags like <p id=”classselector”>. Ideally id tag should be used only once in single html page.

Attribute and property combination is called as declarative i.e. {color: black}

What do we mean by cascading?

Suppose we have code below:

<style>
p {color: black }
h1 {color: brown ; text-align:center}
#idselector {color: green; font-size: 39px}
</style>

<h1 id=”idselector”> Intro to CSS</h1>

In this case style tag has 2 styling rules for <h1> tag ..so which one will be applied? Will it be id selector or general h1 rule. Id selector rule will be applied as this phenomenon is cascading which means rules which decide which selector will be applied to the tag in case of conflict. As per cascading rules, id has higher precedence than h1 selector.

Page Layouts/Design types in CSS

There are 4 types of layout designs in CSS which are as below:

  • Static Design/Fixed Pixel Design : In this design page width does not change even if we try to change the size of browser. This design is not flexible and generally a very preferred design these days. This can be used for mobile websites also but generally people have to zoom or slide to read the content.
  • Liquid Design : This design flows like liquid which flows as per window size. This is different than responsive design as image and text does not change its size whereas it does in responsive. Liquid designs have its limitation when the window shrinks/expands too much.
  • Adaptive Design : This is a design which is static design with some properties of  responsive design.
  • Responsive Design : This design changes based on size of the window. Text and images resize and re position itself with window size. These designs are ideal for mobile apps and wider screens. This is a very flexible design.

Next>>>>>>>>>

Let’s learn together on Web development…..for more information like this  and follow my blog..