CSS 

what is CSS?

CSS is a language that describes the style of an HTML document. It describes how HTML elements should be displayed on screen, or in other media. today i will explain each properties and how their values are used in the project. 

first question comes in mind about css in what it helps us in, so if we just talk about HTML, it was never intended to contain tags to format a web page, it was made to describe the content of a web page for example, heading, paragraph, etc.

It became a nightmare for web developers as development of large websites, where fonts, color information were added to every single page, became a long and expensive process 

To solve this, the world wide web consortium(W3C) creates CSS, CSS removed the style formatting from the HTML page!

CSS saves a lot of work! the styles are saved to an external .css files only with just one external style sheet you can change the entire website. 

CSS syntax: 

     it is divided into two parts selector and declaration; the selector points to the html using html tags, class, id, etc each selector includes css property and their values.

• Css Properties: 
• Color:
1. the color can be used by the predefined name, or hex value, RGB, HSL, RGBA values. there are many combination of how to use css color on the webpage. here in our project the color property requires to specify what value input one is going to be using at the first point so the property value can be selected directly instead of typing the value.
•  background: 
1. As by the name goes this property helps to style the background, it style the background by  color or image, here you can size, set the origin of color, or you can specify the area you want to put the image, etc.
2. background attachment: it set the background image can either be scrolled with the page or should be steady/fixed. the values it takes are: scroll (to move with the page), fixed ( to be fixed), local ( to scroll the image with element's content), you can also set the default which is scroll. 
3. background-clip: it defines how far the background should extend within an element, the value for background-clip are border-box/initial which by default, it describes to extends the background the border. padding-box which makes the background extend inside the edge of the border, content-box which extends the background style to the edge of the content, 
4.  background-origin: it is used to specify the origin position of a background image by default it's  value is set as padding-box described to make the image starts from the upper left corner of the padding edge, border-box makes the image to start from the upper-left corner of the box, in content-box if there is any content inside the box the image will start to display from the top-left corner of it.
5.  background-position: this property defines the position of the background image, by default the background image is placed at the top-left corner of an element and repeated both vertically and horizontally in terms of x axis and y axis in multiple possibilities for example location like top-left, bottom-right, etc. or one can use numeric value for x and y in percentage or position.
6.  background-repeat: here using this property you can repeat an image multiple times like a cover picture for that by default the value is repeat, but the option to customize are many for example one can repeat the background image can either be repeated horizontally( on x-axis using 'repeat-x') or vertically (on y-axis using repeat-y), you can also put spaces in the middle of repeated background-images or you can make the edges of repeated images round(background-repeat:'round').
7. background-size: at last you can set the size of the background image by values of height and width. By default the values is auto which sets the image size as big as the original size, but mostly the preferable size property value is cover that covers the entire background of the page.
• Border: 
1. border element is a list of properties to style and customize border, border are used any many way in the web development, the mostly used way is to create a form tables using there are so many option to style just the borders here are the properties:
2. border: this property is used to style all the sides (top, left, bottom, right) of a border/box, the properties inherited inside are width, style and color of the border so when a border is selected as a style all the side of it are asked for inputting the width, style and color,  so the values in our project is used as a json where array is inherited so you select the json of a specific property values then choose the value from the array of that particular object.
3. beside the styling the all the sides of the border together there are specific side style is also given including styling, coloring, setting the width of any particular side to make that side particularly beautiful. 
4.  also using the 'border-radius' the elements corner can be made rounded where again each corner can be rounded how every needed
• Margins:
1. this properties is used to create space between the element outside of any defined borders. 
2. with Css there is full control on the element's side(top, right, bottom, left)
3. the individual side can me customized specifying which side by the option of (margin-top, ,left, bottom, right.  
4. If all the sides of the margin needs to be made equal from all the sides margin can directly be used 
5. the property values are ranged to set in px, pt, cm, etc which are length related values, one can also make the property auto where the browser will calculate the margin itself and arrange it for front end.
• padding:
1. Now in many ways this property is quite similar when you use them for front end you can see the element moving in some direction but their is so much difference between them 
2. CSS padding properties are used to generate space around an element's content, inside of any defined borders
3. the padding can be done to any specific side if needed and also to all the side using padding property 
4. as same as margin padding has value ranging from length, % and also if the property can be inherited if padding has been used to any element on before 
• Height/Width:
1.  The height and width proprieties are used to set the dimensions of an element
2.  it can be set auto or specified in length values like px, cm, pt, etc also in %.
3.  in both the property a max can be set, with the help of it the size of the element can increase or decrease according to the browser window size.
• Box Model:
1. All the elements in the html can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. 
1. The CSS box is a box that is warps around every HTML element. It consists of: margins, borders, padding and some content(text or image) to display. 
2. here in the project we have a json object of box model where all the properties
3.  the box model allows to add border around element and define space between elements

the major plus point of using the box model is to have the ability to costomize the element's height and width more flexibly

• Outline:
1. the outline is a property goes better with properties of border.
2. it give the css user option to customize the border outline.
3. the property has many option to style the outline such as:
• outline-style: using this the outline can be styled with the options from either dotted, dashed, solid, double, groove, ridge, inset, outset. the outline can be hidden also if their is already an outline to the border.
• outline-color: the outline can be colored where the values to chose are similar to css property color
• outline-width: this property defines the thickness of the outline
• outline-offset: this property adds space between an outline and the edge/border of an element. 
• Text:
1. this text styles with some text formatting properties, that comes handy when developing a beautiful text content on a webpage.
2. the text styling properties are:
1. text-color: the color property is used to set the color of the text. which can be specified by: name , hex value , rgb of the color
2. text-align: the align property is used to set the horizontal alignment of a text a text can be left, right, centered or justified
3. text-decoration: the property is used to set or remove decorations from text often text-decoration: none; are used in development so by default it is kept none, but can be styled using over line, line-though, underline, etc, property value.
4.  text-transform: it is used to specify uppercase or lowercase letters in a text it can be used to turn everything uppercase or lowercase
5. text Indentation: property is used to specify how indent the first line should be
6. letter spacing: this property is used to specify the space between the each characters in text
7. line-height: this property is used to specify the space between line
8. Text Direction: using this property the text can be inverted meaning the text can be either be written backward
9. word spacing: similar to letter spacing word spacing can add the space between the words
10. text shadow: the text shadow can add shadow to text where it can be added either vertically or horizontally and also can be colored 
• Fonts:
1. this property is used to define the font family, boldness, size and the style of a text on the screen.
2. the properties are:
3. font-family: this property has little fallback to the system, some fonts work in some browser and some does not work properly so usually it is advised to include the URL of the font from online to be imported and then using the font.
4. font-style: this property defines the style of the text italic, oblique, etc. By default it is normal 
5. font-size: this property as the name consist use to define the size of  the font, the size values can be used which are px,pt, em,etc. also using the html tags like <h1> to <h6> has default font size where h1 has the biggest size and it goes lower as the number increases.
6. font-weight: this property defines the weight of the text you can make it to bold, or can bolder.
7. font varient: this property specifies whether or not a text should be displayed in a small-caps font or uppercase.
• List:
1. In html there are two types of list:
• <UL> unordered list
• <li> ordered list
1. To style the list this property allows user to choose from different styling options
2. it allows to: set diffrent list item markers for ordered lists, list item markers for unordered, set images in list item marker, add background colors to it 
3. the property are: 
1. list-style-type: this property is used for specifying the list item marker
2. list-style-image: this property is used for imputing an image in the marker
3. list-style-position: this property specifies the position if the list-item markers by default the position is list is set outside ("list-style-position: outside;")
4. for the short hand their is also list-style to sum up all the properties above in just one giant property.
• Table:
1. As  Html has table, their is also way to style it greatly: 
2. this property is used as a tool where combing properties like borders, text-align, vertical-align, etc specially for table
3. the property includes the whole border property, height/width, text-align, horizontal-align, vertical-align, padding, horizontal and vertical divider, background color, text-color,etc.
4. there is also option to style an empty cell
• Display:
1. this property is used for controlling the layout, if whether/how an element can be displayed
2. the value option to choose are many, the element/s can be styled in blocks, grid, flex style, etc.
• Visibility: 
1. this property is similar to display in only one way which is whether a element can be displayed or not.
• position: 
1. here the position of a element can be customized making in static, relative, fixed, absolute or sticky according to the web site.
2. by default the position is kept static.
• overflow:
1. Using this property if the content on the webpage is two big it can be made scroll.
2. by default the value is kept visible but value of this property are hidden, auto
3. and to make it more customized  both horizontal and vertical option are inside the property.
• other properties:
1. float: this property specifies whether a property should be floating or not
2. opacity: this property specifies the opacity/transparency of a element/image
3. counter: Counters adjusts the appearance of content based on its placement in the document.

     SO far here are the property and values used in the project from css, in future in this project there will be implementation of HTML and Javascript which will make the project more in depth and exiting to work on, the end goal is again to make the best used of technology to lower the human efforts in all the way.