CSS tag Cheat Sheet Style Sheets is a style sheet language used to describe the presentation of a document written in a mark-up.
language such as HTML, XML, etc. CSS enhances the look and feel of the webpage by describing how elements should be rendered on screen or in other media.
CSS Cheat Sheet provides you with the most common style snippets CSS gradient, CSS tag Cheat Sheet background, button, font family, order, radius, box, and text-shadow generators, color picker, and more tools to add more visual weight to your document. All these and other useful web design tools can be found on a single page.
CSS Basics: Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements, here we will see in how many ways we can add CSS for our HTML, there three different ways to do so one by one we will see those procedure.
How to make CSS tag Cheat Sheet – A Basic Guide to CSS
External CSS: External CSS contains a separate CSS file with a .css extension which contains only style property with the help of tag attributes.
Selector {
property1: value1;
property2: value2;
}
Include external CSS file: The external CSS file is linked to the HTML document using a link tag.
<link rel=”style sheet” type=”text/css” href=”/style.css” />
Internal CSS or Embedded: CSS is embedded within the HTML file using a style HTML tag when a single HTML document must be styled uniquely.
<style type=”text/css”>
Div {color: #444 ;}
</style>
Inline CSS: It contains CSS properties in the body section specified within HTML tags using the style attribute.
<tag style=”property: value”> </tag>
Clear fix: It is used to clear floats to select or keep control of your margins and padding.
.clear fix: after {
Content: “”;
Clear: both;
Display: block;
}
How to make CSS tag Cheat Sheet – A Basic Guide to CSS
Selectors: CSS selectors are used to find or selecting the HTML elements you want to style. These are categorized as follows:
Basic Selectors Description Syntax
Universal: Selects all elements on the pages. ‘*’ symbol is used to denote the selector as a universal selector. *{property: value ;}
Type: Type selector or tag name/element selector selects an HTML tag/element in your document. It selects all elements of the given type within a document. p {
CSS declarations;
}
Id: Selects an element based on the value of its unique id attribute (One id only applied to one element). An ID selector begins with# rather than a dot character. #id {css declarations; }
Class: Selects all elements in the document that have the given class attribute. It class selector starts with a dot (.) character. .class {
css declarations;
}
Attribute: Selects all elements that have a specified attribute. Elements grouped based on some attribute value can be styled using an attribute selector. a[attribute=value] {
Property: value;
}
Combinatory: Combinatory are complex selectors consisting of more than one CSS tag Cheat Sheet selector having some relationship between them. These are the font-family General Sibling selector, adjacent sibling selector, child selector, Descendant selector. selector1 selector2/ selector 1+selector2 / selector 1> selector 2 {property: value ;}
Pseudo A Pseudo class in CSS is used to define the special state of an CSS tag Cheat Sheet element to add an effect to an existing element based on its states. For ex. change of state on hover, click, focus, when a link is visited, etc. selector: pseudo-class {
Property: value;
How to make CSS tag Cheat Sheet – A Basic Guide to CSS
}
<! DOCTYPE html>
<Html>
<Head>
<Title>* Selectors</title>
<! — CSS Selectors are in used –>
<Style>
/* universal selector */
* {
Background-color: hsl (325, 63%, 82%);
Text-align: center;
}
/* type selector */
Span {
Background-color: sky blue;
}
/* id selector */
#div1 {
Color: green;
Text-align: center;
Font-size: 20px;
Font-weight: bold;
}
How to make CSS tag Cheat Sheet – A Basic Guide to CSS
/* class selector */
.div2 {
Color: orange;
Text-align: left;
Font-size: 10px;
Font-weight: bold;
}
/* attribute selector */
Div [style] {
Text-align: center;
Color: purple;
Font-size: 20px;
Font-weight: bold;
Margin-bottom: -20px;
}
/* combinatory selector */
Div>p {
Color: #009900;
Font-size: 32px;
Font-weight: bold;
Margin: 0px;
Text-align: center;
}
How to make CSS tag Cheat Sheet – A Basic Guide to CSS
/* class selector */
.box {
Background-color: yellow;
Width: 300px;
Height: 100px;
Margin: auto;
Font-size: 30px;
Text-align: center;
}
/* pseudo selector */
.box: hover {
Background-color: orange;
}
</style>
</head>
<Body>
<p>
*(Universal) Selector here gives a pink background
</p>
<Br>
<Span>This span is styled using type selector.
<br><br>
<div id=”div1″>
This div is styled using id selector
</div>
<Br>
<div class=”div2 “>
This div is styled using class selector
</div>
<br>
<div style=”color: green”>
This div is styled using attribute selector
</div>
<br>
How to make CSS tag Cheat Sheet – A Basic Guide to CSS
<div style=”text-align: center ;”>
This div is styled using combinatory
<p>child selector</p>
</div>
<Br>
<p>pseudo selector :< /p>
<div class=”box”>
My color changes if you hover over me!
</div>
</body>
</html>
Font Properties: CSS font properties are used to set the font’s content of the HTML element as per requirement.
Property Description Syntax
Font-family: CSS font-family property specifies the font family to be used for CSS tag Cheat Sheet the element’s text content. Different font names can be given to make a fallback system in case first in priority is unavailable. Font-family: family-name |generic-family |initial |inherit;
Font-style: CSS font-style property is used to CSS tag Cheat Sheet style the text content in a normal, italic, or oblique face from its font-family. Font-style: normal |italic |oblique |initial |inherit;
Font-variant: CSS font-variant property is used to convert all lowercase letters into uppercase letters. The converted uppercase letters appear smaller in font-size than the original uppercase letters. Font-variant: normal| small caps | initial;
Font-weight: CSS font-weight property is used to specify thickness or weight of the font in the text content of the HTML and separated color elements. Font-weight: normal| bold |number |initial |inherit |unset;
Font-size: CSS font-size property is used to specify the size of the text in HTML document. Font-size: small |medium |large |initial |inherit;
How to make CSS tag Cheat Sheet – A Basic Guide to CSS
<! DOCTYPE html>
<Html>
<Head>
<Title>Font properties</title>
<Style>
.style1 {
Font-family: “Times New Roman”, “sans-serif”;
Font-weight: bold;
Font-size: 30px;
Color: #090;
Text-align: center;
Font-style: normal;
Font-variant: normal;
}
.style2 {
Font-family: “sans-serif”;
Font-weight: 5px;
Font-size: 15px;
Color: blue violet;
Text-align: left;
Font-style: italic;
Font-variant: normal;
How to make CSS tag Cheat Sheet – A Basic Guide to CSS
}
.style3 {
Font-family: “arial”;
Font-weight: 10px;
Font-size: 20px;
Color: black;
Text-align: right;
Font-style: oblique;
Font-variant: small-caps;
}
</style>
</head>
<Body>
<p>Normal text aligned center sized 10 PX</p>
<div class=”style1″>Geeks for Geeks</div>
<p>Italic text aligned left sized 15px</p>
<div class=”style2″>Geeks for geeks</div>
<p>Oblique text aligned right sized 20px, in small caps</p>
<div class=”style3″>Geeks for geeks</div>
</body>
</html>
Text-properties: CSS text formatting properties are used to format and style text by setting their color, alignment, spacing, etc. as per requirement.