- CSS Applying CSS
There are three methods of applying CSS to a document. Inline Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute. Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation…
- CSS Margin
margin properties are used to create space around elements, outside of any defined borders. margin: top right bottom left; margin: 10px 15px 20px 25px; top – 10px right – 15px bottom – 20px left – 25px margin: top right/left bottom; margin: 10px 20px 25px; top – 10px right/left – 20px bottom – 25px…
- CSS Shadows
Text Shadow text-shadow property applies shadow to text. <div class=”row”> <div class=”col-4″> <h4>Text Shadow</h4> </div> <div class=”col-8″ id=”textShadow”> Hi my name is Folau </div> </div> <style> #textShadow{ /* text-shadow: h-shadow v-shadow blur-radius color h-shadow – The position of the…
- CSS with SASS
What is SASS? Sass stands for Syntactically Awesome Stylesheet Sass is an extension to CSS Sass is a CSS pre-processor Sass is completely compatible with all versions of CSS Sass reduces repetition of CSS and therefore saves time Sass was designed by Hampton Catlin and developed by Natalie…
- CSS Functions
Css has functions that can be used to set values. attr() function The attr()function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. The attr() CSS function is used to retrieve the value of an…
- CSS Fonts
Having the right font has a huge impact on how users experience a website. The right font can create a strong identity for your brand. Using a font that is easy to read are important. The font adds value to your text. It is also important to choose the correct color and text size for […]
- CSS Pagination
Pagination is a very common thing to do when it comes to displaying data or displaying large amount of data. Pagination also gives you the flexibility to load data page by page which eases the load on your backend. <div class=”col-9″ id=”pag_1″> <div class=”pagination”> <a href=”#”>«</a> <a…
- CSS Media Queries
@media can be used to apply part of a style sheet based on the result of one or more media queries . With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used. @media […]
- CSS Gradients
CSS gradients let you display smooth transitions between two or more specified colors. Gradients can be used anywhere you would use an <image>, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to…
- CSS Grid
Source code on Github
- CSS Page Layout
Source code on Github
- CSS Specifity
If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out. More specific = Higher precedence If the selectors are the same then the last one will always take…
- CSS Display
display property is the most important CSS property for controlling layout. Block-level elements A block-level element always starts on a new line and takes up the full width available <div class=”row”> <div class=”col-3″> <h4>Display block-level element</h4> <div>A block-level element always…
- CSS Float
Float float property specifies how an element should float. It’s used for positioning and formatting content. float-left The element floats to the left of its container <div class=”row”> <div class=”col-4″> <h4>Float left</h4> </div> <div class=”col-8″ id=”floatLeft”> Hi my name is Folau <img…
- CSS Borders
Border border properties allow you to specify the style, width, and color of an element’s border. border: width style color; <div class=”row”> <div class=”col-4″> <h4>Border 1</h4> <div><strong>border:</strong> width color style</div> <div><strong>style:</strong>…
- CSS Padding
Padding is used to generate space around an element’s content, inside of any defined borders. padding: top right bottom left; padding: 10px 10px 25px 20px; top has 10px padding right has 10px padding bottom has 25px padding left has 20px padding padding: top right/left bottom; padding: 10px 25px…
- CSS Text
Text color <div class=”row”> <div class=”col-4″> <h4>Text Color</h4> </div> <div class=”col-8″ id=”textColor”> Hi my name is Folau. color property is used to set the color of the text </div> </div> <style> #textColor{ color: blueviolet; } </style> Text alignment <div class=”row”> <div…
- CSS Colors
Background Color You can set the background color for HTML elements. <div class=”row”> <div class=”col-3″> <h4>Background Color</h4> </div> <div class=”col-9″ id=”backgroundColor”> Hi my name is Folau </div> </div> <style> #backgroundColor{ background-color: grey; } </style> Text color You can set…
- CSS Selectors
A CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule’s specified style applied to them. There are 5 categories of selectors: Simple selectors (select elements based on name, id, class) Combinator selectors…
- CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the…
- CSS Introduction
CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. It is a simple design language intended to simplify the process of making…