CSS Syntax and Selectors<\/strong><\/h2>\n\n\n\nEvery CSS rule follows the same pattern. Once you can read one rule, you can read them all.<\/p>\n\n\n\n
h2 {\n color: crimson;\n margin-bottom: 12px;\n}<\/code><\/pre>\n\n\n\n\nh2<\/code> is the selector<\/strong>. It chooses which elements the rule applies to.<\/li>\n\n\n\n- The curly braces
{ }<\/code> wrap the declaration block<\/strong>.<\/li>\n\n\n\ncolor<\/code> and margin-bottom<\/code> are properties<\/strong>, the things you want to change.<\/li>\n\n\n\ncrimson<\/code> and 12px<\/code> are values<\/strong>, what you want those properties to become.<\/li>\n\n\n\n- Each declaration ends with a semicolon.<\/li>\n<\/ul>\n\n\n\n
A property and its value together are called a declaration. A selector with its declaration block is called a rule.<\/p>\n\n\n\n
1. Element Selector<\/strong><\/h3>\n\n\n\nAn element selector targets every instance of an HTML tag.<\/p>\n\n\n\n
p {\n font-size: 18px;\n}<\/code><\/pre>\n\n\n\n\n- Every
<p><\/code> on the page now has 18px text.<\/li>\n<\/ul>\n\n\n\n2. Class Selector<\/strong><\/h3>\n\n\n\nA class selector targets any element that has a matching class<\/code> attribute. It starts with a dot.<\/p>\n\n\n\n<p class=\"highlight\">Important note<\/p>\n<p>Regular note<\/p><\/code><\/pre>\n\n\n\n.highlight {\n background-color: yellow;\n}<\/code><\/pre>\n\n\n\n\n.highlight<\/code> matches elements with class=\"highlight\"<\/code>.<\/li>\n\n\n\n- Only the first paragraph gets the yellow background.<\/li>\n\n\n\n
- You can reuse the same class on as many elements as you like.<\/li>\n<\/ul>\n\n\n\n
3. ID Selector<\/strong><\/h3>\n\n\n\nAn ID selector targets one specific element. It starts with a hash symbol.<\/p>\n\n\n\n
<div id=\"main-header\">Welcome<\/div><\/code><\/pre>\n\n\n\n#main-header {\n text-align: center;\n}<\/code><\/pre>\n\n\n\n\n#main-header<\/code> matches the element with id=\"main-header\"<\/code>.<\/li>\n\n\n\n- An ID should be used only once per page.<\/li>\n\n\n\n
- In practice, classes are preferred for styling because they are easier to reuse.<\/li>\n<\/ul>\n\n\n\n
4. Grouping and Descendant Selectors<\/strong><\/h3>\n\n\n\nYou can style several selectors at once by separating them with commas. You can also target elements inside other elements by separating selectors with a space.<\/p>\n\n\n\n
h1, h2, h3 {\n font-family: Georgia, serif;\n}\n\nnav a {\n text-decoration: none;\n}<\/code><\/pre>\n\n\n\n\n- The first rule applies the same font to all three heading levels.<\/li>\n\n\n\n
nav a<\/code> matches only links that sit inside a <nav><\/code> element.<\/li>\n\n\n\n- Links outside the navigation keep their default underline.<\/li>\n<\/ul>\n\n\n\n
5. Pseudo-class Selectors<\/strong><\/h3>\n\n\n\nA pseudo-class applies styles when an element is in a particular state.<\/p>\n\n\n\n
button:hover {\n background-color: black;\n color: white;\n}<\/code><\/pre>\n\n\n\n\n:hover<\/code> activates when the mouse pointer is over the element.<\/li>\n\n\n\n- The button turns black with white text only while it is hovered.<\/li>\n<\/ul>\n\n\n\n
Which Rule Wins?<\/strong><\/h3>\n\n\n\nWhen two rules conflict, the browser looks at specificity. An ID selector is stronger than a class selector, and a class selector is stronger than an element selector. If two rules have the same specificity, the later one wins.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Colors and Backgrounds<\/strong><\/h2>\n\n\n\nColor is one of the first things you will change in any project. CSS gives you several ways to write colors, and you can use them for text, borders, and backgrounds.<\/p>\n\n\n\n
1. Color Formats<\/strong><\/h3>\n\n\n\n.box-one {\n color: tomato;\n}\n\n.box-two {\n color: #2a9d8f;\n}\n\n.box-three {\n color: rgb(38, 70, 83);\n}\n\n.box-four {\n color: rgba(38, 70, 83, 0.5);\n}\n\n.box-five {\n color: hsl(200, 60%, 40%);\n}<\/code><\/pre>\n\n\n\n\ntomato<\/code> is a named color. CSS has around 140 of these, which are easy to read but limited.<\/li>\n\n\n\n#2a9d8f<\/code> is a HEX value. The pairs of characters represent red, green, and blue.<\/li>\n\n\n\nrgb(38, 70, 83)<\/code> sets the same three channels using numbers from 0 to 255.<\/li>\n\n\n\nrgba(38, 70, 83, 0.5)<\/code> adds an alpha value for transparency. 0<\/code> is fully transparent and 1<\/code> is fully solid.<\/li>\n\n\n\nhsl(200, 60%, 40%)<\/code> describes color by hue (0 to 360 on the color wheel), saturation, and lightness. It is often the easiest format for making a lighter or darker version of a color.<\/li>\n<\/ul>\n\n\n\n2. Background Color and Image<\/strong><\/h3>\n\n\n\n.hero {\n background-color: #1d3557;\n background-image: url(\"hero.jpg\");\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n color: white;\n}<\/code><\/pre>\n\n\n\n\nbackground-color<\/code> sets a solid color, which also acts as a fallback if the image fails to load.<\/li>\n\n\n\nbackground-image: url(\"hero.jpg\");<\/code> places an image behind the content.<\/li>\n\n\n\nbackground-size: cover;<\/code> scales the image to fill the whole element, cropping the edges if needed.<\/li>\n\n\n\nbackground-position: center;<\/code> keeps the middle of the image in view.<\/li>\n\n\n\nbackground-repeat: no-repeat;<\/code> stops the image from tiling.<\/li>\n\n\n\ncolor: white;<\/code> keeps the text readable on top of a dark background.<\/li>\n<\/ul>\n\n\n\n3. Gradients<\/strong><\/h3>\n\n\n\nA gradient is treated as a background image, so it goes in background<\/code> or background-image<\/code>.<\/p>\n\n\n\n.banner {\n background: linear-gradient(to right, #ff9a9e, #fad0c4);\n}<\/code><\/pre>\n\n\n\n\nlinear-gradient<\/code> blends from one color to another in a straight line.<\/li>\n\n\n\nto right<\/code> sets the direction, starting on the left and ending on the right.<\/li>\n\n\n\n- The two colors after it are the start and end points of the blend.<\/li>\n<\/ul>\n\n\n\n
Always check that your text color has enough contrast against the background. Light gray text on a white background looks stylish in a mockup but is hard for many people to read.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Text and Font Styling<\/strong><\/h2>\n\n\n\nMost web pages are mainly text, so a few well-chosen text properties can change how a page feels.<\/p>\n\n\n\n
body {\n font-family: \"Segoe UI\", Arial, sans-serif;\n font-size: 16px;\n line-height: 1.7;\n color: #333;\n}\n\nh1 {\n font-size: 2.5rem;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n}\n\na {\n text-decoration: none;\n}<\/code><\/pre>\n\n\n\n\nfont-family<\/code> lists fonts in order of preference. If the first is not available on the visitor’s device, the browser tries the next, and the last entry is a generic fallback like sans-serif<\/code>.<\/li>\n\n\n\nfont-size: 16px;<\/code> sets the base text size for the page.<\/li>\n\n\n\nline-height: 1.7;<\/code> sets the space between lines to 1.7 times the font size. A value between 1.5 and 1.8 usually reads well for body text.<\/li>\n\n\n\ncolor: #333;<\/code> uses a dark gray, which is softer on the eyes than pure black.<\/li>\n\n\n\nfont-size: 2.5rem;<\/code> sizes the heading relative to the root font size, so it becomes 40px when the base is 16px.<\/li>\n\n\n\nfont-weight: 700;<\/code> makes the heading bold. Values run from 100 (thin) to 900 (heavy).<\/li>\n\n\n\ntext-align: center;<\/code> centers the heading horizontally.<\/li>\n\n\n\ntext-transform: uppercase;<\/code> displays the text in capital letters without changing the HTML.<\/li>\n\n\n\nletter-spacing: 2px;<\/code> adds a little space between each character.<\/li>\n\n\n\ntext-decoration: none;<\/code> removes the default underline from links.<\/li>\n<\/ul>\n\n\n\n1.<\/strong> px, em, and rem<\/strong><\/h3>\n\n\n\nPixels (px<\/code>) are fixed. em<\/code> is relative to the font size of the element’s parent, and rem<\/code> is relative to the font size set on the root of the page.<\/p>\n\n\n\nFor font sizes, rem<\/code> is a solid choice because it respects the size a user has chosen in their browser settings and keeps spacing consistent across the site.<\/p>\n\n\n\n2. Using a Web Font<\/strong><\/h3>\n\n\n\nIf you want a font that visitors may not have installed, you can load one from a service such as Google Fonts.<\/p>\n\n\n\n
<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;600&display=swap\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\nbody {\n font-family: \"Poppins\", sans-serif;\n}<\/code><\/pre>\n\n\n\n
![\"\"](\"https:\/\/www.guvi.in\/blog\/wp-content\/uploads\/2026\/09\/What-is-CSS-2-1200x628.webp\" "\\"\\"")
<\/figure>\n\n\n\n