Characteristics and Features of CSS

Characteristics and Features of CSSAssignment 1 P1/m1IntroductionCSS was introduced in 1996. It was relieve oneselfd to stop people from having to repeat a circularise of code. For role model, if someone cherished to switch over the paragraph textbook, they would form to do it e truly(prenominal) single time they treasured to flip the properties. CSS has since become more adapted to having more features, for example you potentiometer now usance the and change the punctuate to a farsighted array of colorises.What is CSSCSS is a set upting language apply to cast up styling to your page. This is make by having the CSS document linked into your hypertext markup language page. This page thence has selectors and properties which meet the tags indoors your hypertext mark-up language document.Characteristics of CSSCSS is compose in the following this ruleselector property valuean example of this would beThis would be characterd to change the climb page to a grey co lour. As you can empathize, the form is the selector, the rule is the screen background colour and the value is the colouring.The order of operations is how the page is read and ordering the methods of formatting into importance. The order goes as follows HTML, In place, indispens sufficient then outer.How do we workout CSSThree ways of HTML accessing CSSInlineAn inline dash opinion poll tot totallyy affects the tag it is in. This means that you can change diminutive details of the page without changing everything on every single page. This is good beca do if you had an external fashion sheet/internal with everything in it. You would have to make a new tag honourable to change that one detail. Inline overrules external which means you can change small details.After HTML, inline is close on the order of operations. This means that it overrules internal/external.This is an example of the background colour universe orange on a webpageAs you can see, the background colour is set to orange. And this would be a standard for every page with the style sheet attached. However, if you go to the body tag in html and conduct this line of code a line of code that would look interchangeable this I would then change the colour of the background regardless of the background colour set by the external style sheet/internal.Another example of this world used would be with case styles. You would for an external style sheet put a P value followed by the attri scarcees corresponding this and this would-be outcome However, if I needed to have a green text on one single piece of paragraph text you would then use inline styling. You would put something like this and this would change the colour of what the external styesheet had set it to. This is good because if you over again had a lot of paragraph text but you needed this to be slightly distinct for example you wanted the size to be a little bit smaller you would then have to create a whole new tag. This way you can change a few properties and only on that one tag.You would use internal when you only want to number a small change to a single tag. This is because inline only affects the one tag it is deep devour. You would not use inline when you either want to affect the full page or the full website because you would have to copy the code over and over again.Internal Internal styling takes place in the head of the html document. This means that if you are customising the page, you can see everything from scrolling. The internal styling is hardened in a and a inside the tags.For this example, I am going to show you 4 different headings I created through internal.I lead now show you the outcome and the text inside the body.This looks simple, uncontaminating and organised because it is. Unlike inline, the styling and the tag is separate. This means that you arent as confused by the styling as you might be if it was inline. Both internal and external are superior for this reason. I go away now she you all the styling I used to get the outcome that you previously sawAs you can see, I can minimal brain damage on a family of fonts. This means that if one font is not supported on a users computer they give see a different alternative font. I added a text-align because if I wanted to add these tags inside a shape they would stick to the right of those shapes.Font size is just formatting how big I want the text to be in opposed to how big it would default to if I left it with the html style.An advantage to internal styling is the fact that it overrules external in the order of operations. This means that if you had one stylesheet linked to all of your pages but you wanted a few small changes you wouldnt have to make a new stylesheet sort of you can just change it in the head tag.A disadvantage would be that internal is chthonian inline so if you have accidentally forgotten to remove a piece of inline code you dont want inside it you might miss it and have to go all the way through the document just to line up what you are missing.You would use internal possibly as a backup. For instance, if the external stylesheet doesnt download properly and bang you would still see the website like normal because it would then turn to internal for the whole stylesheet. You would use inline when you want to make changes to the whole page but not every single page, like changing the font size of headings. You wouldnt use internal when you already have an external stylesheet set up normally because it manifestly isnt needed. Only as a backup.ExternalExternal stylesheets allow someone to format their webpage (much like internal) but on a separate document. This means that you can have 2 or more workplaces (as you can link more than one stylesheet into your document) giving you a much cleaner workspace. This would be a massive advantage callable to the fact that the stylesheet is soft accessable. However, it is a disadvantage because any change you ma ke to the external stylesheet affects any html document that is linked to it.The stylesheet you attach would be a CSS document that you would use to format tags in.In terms of the order of operation, External is last. Putting the order to HTML, Inline, Internal and then External. This is both a positive and a negative. It is a positive because you could have something like a background image like this Which would set the background to(and for reference if you zoomed out, it would tile)This could then be linked to every page and would set the background image to that. But if you wanted the background to be something else, a different image, you could use inline styling on the body tag to change it to that image.However, it could be called a negative because if you are altering someone elses website and you wanted to use external, they may have inline which would mean you had to go through each line of code to check. Some websites have over 900 on just the HTML page.You would use exte rnal when you want to make a stylesheet that will run on every single page (or a number of pages) because instead of having a long list of lines of code clogging up your HTML page, you would only have to deal with 1 line which would be the link to the page. You wouldnt use external if you only have 1 page because it would be aired to have 2 pages when only 1 will be visible. (it would be more efficient to just use internal)Linking a stylesheetA fully linked stylesheet looks like thisHrefThis is the path to the stylesheet. As you can see mine just says main.css which means that I dont need to go anywhere other than the file. Main equals computer file name and CSS is the document type. If for example you had to go back in the path. Before the file name, there would be a ../This would look like this And if you had to go forward in the path, you would see a /foldername then the file name. grammatical case/relThis is done just to tell older browsers/mini browsers the actual document n ame because it tells them the document name.P2 misfortune Model What is it?A box model is something that allows a web designer/developer to create a layout to the page. This is gamey in accuracy due to the fact that you can edit right left up and down pixel by pixel. You also have survival of the fittests between margin and blow up.Why do we use it?You would use this model to apply right lay on your objects inside the webpage. You are also then able to work out how much space has been used and gives you an option for gross profit margins.How do we use it?An example of when you would use a box model would be when adding in a shape. As you can see here, you would add styling to a div tag like you can see here. This would set the size for it but not add anything to do with the box model. This means that if you added another box, they would be directly moving. Like this.To fix this you would want to add a margin-bottom like thisThe issue would then be fixed and there will be a 1 0px gap between the two objects.ContentContent is the actual image or the text. The content is the move of the box model and is what it is created to serve. This is because without the content there would be no need to have any spacing or any borders because there would be no item for it to be based on. embroiderPadding is the distance between the content and the border. This is to add inside space and make your spacing more accurate than just using margin which is the outside. An example of padding would beIn this example, I show the use of one number in padding. This means it affects the padding of up, down, left, right. I could use 4 numbers which would affect up, down then left right like thisThis is good because it allows a lot of choice which is very precise.BorderThe border is the outline after the padding. Without padding, the border would take place around the content. It would look like thisAnd the code will look like thisHowever, to move the border location you would nee d to add padding. This is due to the fact that padding is inside between the content and the border. If you wanted it to move further outside, you would need to add this line of code in This makes the outcome look like thisYou are also able to change the border style, currently I have the double border style but that can easily be changed my altering the value. For example I could set it to dashed like thisWith the outcome of thisI will now show 4 more examples of using borders.This is just a standard border with the colour defaulting to black. The margin is used to add a space between the bottom of each box.This adds a dashed border instead of the solid style and I have changed the colour to red.This has a bored style of dotted and the colour is set to greenThe border is the ending to the content area. You can set this to be 0 px which would make the border invisible to someone viewing it. You also have the option to choose things likeMarginMargins are used to add outside spacing after the border between objects. This is effective because it means that you are able to have some space before the next starts. Without margin you wouldnt be able to create a spaced website that has borders because the borders would always be touching and padding would be on the outside.An example of margin would be thisThis shows spacing at the bottom without them touching. Without the margin, they would be touching which would look clunky and wouldnt look professionally made at all. This is what it would look like without the margin being added