What is CSS used for?

What is CSS used for? www.yzokul.com.tr

CSS is used to control how the elements on a web page look and how they are arranged on the screen. Without CSS, a web page is just plain text and boxes. With CSS, you can change colors, sizes, spacing, and positions. For example, the same sentence can appear as small black text or as large blue text in the center of the page. CSS makes that choice possible. 1

HTML gives a web page its content and structure. You use HTML to mark text as a heading, a paragraph, a list, or a link. HTML alone produces a plain page: black text on a white background, stacked from top to bottom. It does not decide colors, font sizes, or where things sit side by side. Something else is needed to control appearance. 2

CSS is a separate set of rules that tells the browser how the HTML elements should look. You write CSS in its own file or block, and the browser applies those rules to the HTML. For example, plain HTML shows a heading in default black text. The same heading with a CSS rule can appear in large blue letters. The content stays the same; only the look changes. 3

A CSS rule first picks which element to style, then lists what to change about it. The part that picks the element is called the selector. The part inside curly braces holds the changes, called declarations. For example, a rule can select a heading and set its color to blue. The picture shows a rule with an arrow pointing at the heading it targets. 4

CSS can change the color of text and the background color of an element. You set the color property for the text and the background-color property for the background behind it. For example, one paragraph can change from black text on white to white text on a dark blue background. Only that paragraph changes; the rest of the page stays as it was. 5

CSS can make text bigger or smaller with the font-size setting. You give a size, such as 16 pixels for normal text or 32 pixels for a large heading. For example, the same sentence can appear at 12 pixels and at 28 pixels. The words are identical, but the larger size draws attention and the smaller size saves space. Font size controls how much room text takes. 6

CSS controls the space inside and around elements. Padding is the space between the content and its border. Margin is the space outside the border, between one element and the next. For example, a box with padding keeps its text away from the edge, and margin keeps that box away from other boxes. Spacing makes a page feel open or tight. 7

CSS can line up elements to the left, to the center, or to the right, and can arrange them in rows. You use alignment settings to decide where items sit. For example, three buttons can be pushed to the left edge, centered in the middle, or spread evenly in a row. The same items look organized differently depending on the alignment you choose. 8

One HTML structure can look completely different when you apply different CSS rules. The content and the order of elements stay the same, but colors, fonts, and spacing change the whole feel. For example, the same page can appear with a light background and small gray text, or with a dark background and large white text. Only the CSS is different. 9

A real page usually has many CSS rules working together at the same time, not just one. One rule might set the heading color, another the paragraph font, and another the spacing between sections. For example, a page with five rules can style the header, the main text, the links, and the footer separately. Each rule handles its own small job. 10

When two rules set the same thing on the same element, a priority mechanism decides which one is applied. The browser does not apply both; it picks one winner. Priority depends on how specific the selector is and on the order the rules appear. For example, a rule aimed at one specific paragraph can beat a general rule aimed at all paragraphs. 11

A more specific rule overrides a general one. Suppose one rule sets all paragraphs to black text, and another rule targets a single paragraph and sets it to red. The red rule is more specific, so that paragraph appears in red while the others stay black. This shows how priority works in practice: the winning rule is the one that matches the element more precisely. 12

CSS can change the layout depending on how wide the screen is. You write rules that apply only when the screen is below or above a certain width. For example, the same page can show three columns side by side on a wide desktop screen and a single stacked column on a narrow phone screen. The content is the same; the arrangement adapts. 13

A common beginner mistake is expecting HTML alone to look styled. HTML gives structure, but it does not set colors, fonts, or spacing beyond plain defaults. If a page looks unstyled, the CSS is missing or not connected. For example, a page with headings and paragraphs but no CSS shows plain black text on white. Adding CSS changes the look immediately.