CSS How To GuideWe've made a few how to guides for CSS. CSS BasicsWhere to Specify Your CSS Styles How to apply CSS to an Element, Class or id How to apply a CSS Style to an HTML tag that is within a particular class border-boxMeans border and padding is included in the width of the grid columns, so easier to keep your column widths as intended. See border-box explanation. Overflow PropertySpecifies what should happen if content overflows an element's box. If your container div behind your page element such as a ul is not extending down to cover all of the ul, then adding an overflow: hidden can help: overflow: hidden; /* Makes the container div extend down to cover the whole of the ul */ https://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ Set Page Background Colourbody { How to Centre a Div on a PageNew CSS Stylesheet TemplateHow to Reference an External CSS Stylesheet from a Web PageSet a Background Image with CSSbody { Or for a div, e.g. box1: #box1 { Note, when background images have been added to divs, they are not printed. See Example 2. Image AlignmentQuick image alignment using an inline style: <img src="images/id1.jpg" style="float: right"> This will float an image to the right, so you need enough of a text block around it for it to look nice. Make Images Responsive with CSSUse the following class: <style> .ImageIsResponsive { </style> and apply it to your image as follows: <img class="ImageIsResponsive" src="images/your-image.jpg"> Note, if you use: max-width: 100%; The image will never scale up larger than its original size, but will scale down if it has to. To allow the image to scale larger than its original size, use: width: 100%; The above responsive image CSS works on IE7 and IE9, but doesn't work on IE8. To fix it, add width:auto. You may apply a conditional CSS specifically for IE8 or use the IE hack below: @media \0screen { Styles for the Span Tag and Highlighting Text Using the Span TagHTML: <span="MyTextHighlighter">highlight this text please.</span> CSS: .MyTextHighlighter { Example of Complex CSS SyntaxHere we have a surrounding div called PageNumbers, within which is an unordered list that displays page numbers. We want to be able to highlight the li that contains the current page number. This is the HTML (some output by PHP): <div id="PageNumbers"> <ul> <?php for($i=1;$i<=$total;$i++) </div> <!-- close PageNumbers --> This is the CSS that needs to be used to identify this specific li: /* To highlight current page number in bright orange */ Difference Between CSS Visibility Property and Display PropertyCSS visibility property - determines visibility of an element, but still takes up space. CSS display property - determines whether an element is displayed or not. If not displayed, it doesn't take up space. Display Propertydisplay: block;Displays an element as a block-level element. A block-level element occupies the entire width available to it. This means it stretches out to the full width of its parent element (container). Examples of block-level elements are: <div> See also: Block-level Elements explained by w3schools display: inline-block;Makes a block-level element display in a line, i.e. on the same line, instead of as blocks, where each element would display on a new line. See Also: inline-block explained at w3schools |inline-block at Learn CSS Layout This is an easy way to create a grid of boxes that wraps nicely. Apply this CSS: .box2 { display: flex;This relates to the flexbox, which was a new layout mode in CSS3. A flexbox ensures that elements behave predictably when the page must accommodate different screen sizes. See: Flexbox Support by Browsers at caniuse.com How to Set Uniform Border Around and Within Table with CSSIf you want all your borders to look the same, whether around or within the table, you need to set the table's border-collapse property to collapse, and then set a border on both the table and the table cells (td). With the class tableMyData applied to the table, the CSS is: .tableMyData { .tableMyData th, td { CSS for Alternate Row Colours in a TableWith the class tableMyData applied to the table, the CSS is: /* Define the background color for all the ODD background rows */ /* Define the background color for all the EVEN background rows */ CSS for Lists and NavigationTo switch off bullet points and make the list display inline, use the following: list-style-type: none; Here's a full worked example. Note we are specifying a style for a particular div, in this case the navigation div: HTML Code: <div id="navcontainer"> <div id="navigation"> <ul> </div><!-- close navigation --> </div><!-- close navcontainer --> CSS code: .clear { clear: both; } /* start navigation css */ /* navcontainer goes around navigation menu */ #navigation { #navigation ul #navigation ul li #navigation li a #navigation li a:hover { background: #33CC33; } /* end navigation css */ CSS for TablesSee CSS tables from w3schools. Note, if you want to have padding in table cells, you need to set padding on td rather than on the table as a whole. CSS for ASP.net DataGridsSee https://www.codeproject.com/Articles/7645/Add-some-Style-to-your-DataGrids FlexboxA Complete Guide to Flexbox by Chris Coyier at CSS-Tricks ResourcesHow to Fix Cumulative Layout Shift and Improve Website Performance with Chrome Dev Tools Being a Web Developer - Some useful guidance from Mark Brown.
|
|
All Content ©2020 WebRef.eu |