HTML can be styled by wrapping, lets say I want to style the the content of the body.
For example a header in bold. Another way of doing this is to apply the style to the HTML using the style attribute of the HTML element. You can test those in split mode in the visual studio designer to see the effects right away
Or i could make a file called something.css and copy my css elements to that stylesheet and reference it from my html file
this file can be in the root if it's in subfolder just include the subfolder in the path it can also be on another web server you just reference it with a url rather than a path to a local file
cascading order
from lowest to highest precedence
1-browser
2-external stylesheet
3-internal stylesheet
4-inline styles
note: within a sheet the order matter in the stylesheet, the last one encountered is the one applied
note on xhtml validation: it is specified in the doctype at the top of the page, and visual studio also has it's validation
note on css classname: if you want more than one classname you just seperate them with spaces, that might be different from how it renders in visual studio
common font and text attributes
1-font like font-family, font-style, font-variant, font-weight, font-size, text-decoration
2-color you can use color keyword, system colors, rgb, and rgb as hex, as well as, this can be done for border colors, and backgroud colors too, btw if the rgb or hex numbers are all teh same it's some shade of grey
3-margins and alignemnet, this includes margin top right left bottom, text-indent, all those can be in points, inches, cm, px and text-align who can be left, center, right, very usefull to create a bulleted list with the exact indent or margin you want
4-postion, relative, absolute this is the main uses of css, to position things on the page, relative or absolute
relative is always relative to where the browser would have positionned it otherwise(not from border or page), top is the relavite position to top, same for left
absolute is always from the top and left border or the page
5-partiion elements using dive and span, the difference between the two is the div has a line break and span dosen't, for example if you to apply a style.
his you can test with id based, class based or element based, and put boggus styles to see
what it does when it can't find the font-family
use multiple font-family ebcause some computers dont have always fonts
first one is used unless not found
You can put a generic font family as last font, since it has a default.
you can also specify bolder and lighter, which makes the inherited weith lighter, if you want to remove the underline from a hyperlinke you set the text decoration to none.
different font families react differently to font weight
if it doesnt look as it should in visual studio design mode, look in the browser
you can limit a classname to an element of specific type like
font and margin attributes allow to consolidate like is family size weight and style, is top right bottom left
css tools: remember you can select an html element in source and it will be highlighted in design mode, or select it in design mode and it will be selected in source view
you can use the manage styles window alt+v+m to view the styles by order in the stylesheet, by element or by type you can preview a style by clicking on it and viewing it in the preview window at the bottom or the manage styles window
you can also preview a the code of a style by hovering above on of the css elements in the list, it will pop a tooltip with the css code a blue circle for element based style, red circle is a id based style and green is a class based style if there is a circle around it, it's because the style is used you can move things around to change precedence or control click to make a copy of the style dont forget, the last style down the list wins you can right click on a style to see how many elements apply this style, you can select them from that right click menu to highlight them you can create a new style, style copy, modify a style a delete a style, or attach a style sheet, or go to the code for the element if you doble ckcik ona styloe, you are taken directly to a style in code if you right click modify on a style it opens the modify style designer UI, it has all the css attributes and values you need and a preview window, and a description window that wright the equivalent css code, just like in a sql query designer you can use the style application toolbar in auto mode to make it register everything style you would apply to a design mode aspx page and write it to the head as a css class of the selected element, this style application toolbar, if in manual mode, will show you available styles, with current page or name of the external file in perenthesis next to it If you set manual, select the target rule, and modify a control using the designer, it will add the attributes to the target css rule, if you choose new class it will add a class to the control existing css class(with space to sperate classes, if you choose new inline style as target it will add it inline in the html or server control element(in the markup), the target rule menu is contextual for the selected control, with styles availab le to it, you can also use this style application target to creat a new class based style it opens up a designer that asks you to place it the new style in a existing stylesheet or new one.
There is a button next to the target in the style application that allows you to reuse existing style so visual studio doent create a new one if it doesnt have to, you can toggle this off if you want it to leave existing styles alone, it wont delete the old one, just puts it later in the spreadsheet so the new style has last word and overides the existing
Next to the target rule that lets you highlight who are the members of this style(the ones that apply the same class), this is the show overlay button new style dialog box: right click on a existing stylesheet, add style rule, you choose an element and add it, creating a hiearchy of rules, , you can also add classes and IDs, preview windw shows you the rule hierachy preview(order in the file) you can also call the big modify style dialog by right clicking build style, this shows you all teh, allows you to enter all the many css styles
There is also a css properties pane, alt+v+c, that allows you to see for a selected element what rules are applied, and another pane bellow it that shows which css properties for the selected rule, applied(styles) are applied, you can click sumary to ony see the ones that are applied or unclick to show all of them, and youll see of full list even the ones that are not set and strike-through, ones in red that are overiden by other rules down the list, it's tooltip show you which which other rule overides it, and double click an element to go to the rule idself in code the more local style always win.
For example a header in bold. Another way of doing this is to apply the style to the HTML using the style attribute of the HTML element. You can test those in split mode in the visual studio designer to see the effects right away
Or i could make a file called something.css and copy my css elements to that stylesheet and reference it from my html file
this file can be in the root if it's in subfolder just include the subfolder in the path it can also be on another web server you just reference it with a url rather than a path to a local file
cascading order
from lowest to highest precedence
1-browser
2-external stylesheet
3-internal stylesheet
4-inline styles
note: within a sheet the order matter in the stylesheet, the last one encountered is the one applied
note on xhtml validation: it is specified in the doctype at the top of the page, and visual studio also has it's validation
note on css classname: if you want more than one classname you just seperate them with spaces, that might be different from how it renders in visual studio
common font and text attributes
1-font like font-family, font-style, font-variant, font-weight, font-size, text-decoration
2-color you can use color keyword, system colors, rgb, and rgb as hex, as well as, this can be done for border colors, and backgroud colors too, btw if the rgb or hex numbers are all teh same it's some shade of grey
3-margins and alignemnet, this includes margin top right left bottom, text-indent, all those can be in points, inches, cm, px and text-align who can be left, center, right, very usefull to create a bulleted list with the exact indent or margin you want
4-postion, relative, absolute this is the main uses of css, to position things on the page, relative or absolute
relative is always relative to where the browser would have positionned it otherwise(not from border or page), top is the relavite position to top, same for left
absolute is always from the top and left border or the page
5-partiion elements using dive and span, the difference between the two is the div has a line break and span dosen't, for example if you to apply a style.
his you can test with id based, class based or element based, and put boggus styles to see
what it does when it can't find the font-family
use multiple font-family ebcause some computers dont have always fonts
first one is used unless not found
You can put a generic font family as last font, since it has a default.
you can also specify bolder and lighter, which makes the inherited weith lighter, if you want to remove the underline from a hyperlinke you set the text decoration to none.
different font families react differently to font weight
if it doesnt look as it should in visual studio design mode, look in the browser
you can limit a classname to an element of specific type like
font and margin attributes allow to consolidate like is family size weight and style, is top right bottom left
css tools: remember you can select an html element in source and it will be highlighted in design mode, or select it in design mode and it will be selected in source view
you can use the manage styles window alt+v+m to view the styles by order in the stylesheet, by element or by type you can preview a style by clicking on it and viewing it in the preview window at the bottom or the manage styles window
you can also preview a the code of a style by hovering above on of the css elements in the list, it will pop a tooltip with the css code a blue circle for element based style, red circle is a id based style and green is a class based style if there is a circle around it, it's because the style is used you can move things around to change precedence or control click to make a copy of the style dont forget, the last style down the list wins you can right click on a style to see how many elements apply this style, you can select them from that right click menu to highlight them you can create a new style, style copy, modify a style a delete a style, or attach a style sheet, or go to the code for the element if you doble ckcik ona styloe, you are taken directly to a style in code if you right click modify on a style it opens the modify style designer UI, it has all the css attributes and values you need and a preview window, and a description window that wright the equivalent css code, just like in a sql query designer you can use the style application toolbar in auto mode to make it register everything style you would apply to a design mode aspx page and write it to the head as a css class of the selected element, this style application toolbar, if in manual mode, will show you available styles, with current page or name of the external file in perenthesis next to it If you set manual, select the target rule, and modify a control using the designer, it will add the attributes to the target css rule, if you choose new class it will add a class to the control existing css class(with space to sperate classes, if you choose new inline style as target it will add it inline in the html or server control element(in the markup), the target rule menu is contextual for the selected control, with styles availab le to it, you can also use this style application target to creat a new class based style it opens up a designer that asks you to place it the new style in a existing stylesheet or new one.
There is a button next to the target in the style application that allows you to reuse existing style so visual studio doent create a new one if it doesnt have to, you can toggle this off if you want it to leave existing styles alone, it wont delete the old one, just puts it later in the spreadsheet so the new style has last word and overides the existing
Next to the target rule that lets you highlight who are the members of this style(the ones that apply the same class), this is the show overlay button new style dialog box: right click on a existing stylesheet, add style rule, you choose an element and add it, creating a hiearchy of rules, , you can also add classes and IDs, preview windw shows you the rule hierachy preview(order in the file) you can also call the big modify style dialog by right clicking build style, this shows you all teh, allows you to enter all the many css styles
There is also a css properties pane, alt+v+c, that allows you to see for a selected element what rules are applied, and another pane bellow it that shows which css properties for the selected rule, applied(styles) are applied, you can click sumary to ony see the ones that are applied or unclick to show all of them, and youll see of full list even the ones that are not set and strike-through, ones in red that are overiden by other rules down the list, it's tooltip show you which which other rule overides it, and double click an element to go to the rule idself in code the more local style always win.
Comments
Post a Comment