{"id":88,"date":"2025-03-21T16:45:00","date_gmt":"2025-03-21T16:45:00","guid":{"rendered":"https:\/\/kingstatue.com\/?p=88"},"modified":"2025-03-21T16:45:00","modified_gmt":"2025-03-21T16:45:00","slug":"css","status":"publish","type":"post","link":"https:\/\/www.kingstatue.com\/?p=88","title":{"rendered":"CSS"},"content":{"rendered":"\n

What is CSS?<\/strong><\/h3>\n\n\n\n

CSS (Cascading Style Sheets)<\/strong> is a stylesheet language used to control the presentation and layout of HTML documents. It defines how elements appear on a webpage, including their colors, fonts, spacing, and positioning.<\/p>\n\n\n\n

\n\n\n\n

Why Use CSS?<\/strong><\/h2>\n\n\n\n
    \n
  • Separation of Content & Design:<\/strong> Keeps HTML clean by separating structure from styling.<\/li>\n\n\n\n
  • Consistency:<\/strong> Ensures uniform styling across multiple pages.<\/li>\n\n\n\n
  • Efficiency:<\/strong> A single CSS file can style multiple HTML documents.<\/li>\n\n\n\n
  • Responsive Design:<\/strong> Adapts layouts for different screen sizes (mobile, tablet, desktop).<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n

    Types of CSS<\/strong><\/h2>\n\n\n\n

    Inline CSS:<\/strong> Applied directly within an HTML tag using the style<\/code> attribute.<\/p>\n\n\n\n

    <p style=\"color: blue; font-size: 18px;\"><\/code>\n      This is inline CSS.<\/code>\n<\/p>\n<\/code>\nPros:<\/strong> Quick and applies to a single element.\nCons:<\/strong> Not reusable and clutters HTML.\n\nInternal <\/strong>CSS: Defined within the <style> tag inside the HTML <head>.\n<style>\n    p {\n        color: green;\n        font-size: 20px;\n    }\n<\/style>\nPros: Useful for styling a single page.\nCons: Not reusable across multiple pages.\n\nExternal <\/strong>CSS: Stored in a separate .css file and linked to an HTML file.\n<link rel=\"stylesheet\" href=\"styles.css\">\nContent of file style.css\np {\n    color: red;\n    font-size: 22px;\n}\nPros: Best for large projects, reusable, and maintains clean HTML.\nCons: Requires an external file, which needs to be loaded.<\/pre>\n\n\n\n
    \n\n\n\n
    Key CSS Properties<\/strong><\/h2>\n\n\n\n
    Text Styling:<\/strong><\/p>\n\n\n\n
    body {
        font-family: Arial, sans-serif;
        font-size: 16px;
        color: black;
    }<\/code><\/p>\n\n\n\n
    Backgrounds & Colors:<\/strong><\/p>\n\n\n\n
    body {
        background-color: lightgray;
    }<\/code><\/p>\n\n\n\n
    Box Model (Margin, Padding, Border, Width, Height):<\/strong><\/p>\n\n\n\n
    div {
        width: 200px;
        height: 100px;
        padding: 10px;
        margin: 20px;
        border: 2px solid black;
    }<\/code><\/p>\n\n\n\n
    Positioning & Layout:<\/strong><\/p>\n\n\n\n
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }<\/code><\/p>\n\n\n\n
    Responsive Design (Media Queries):<\/strong><\/p>\n\n\n\n
    @media (max-width: 600px) {
        body {
            background-color: yellow;
        }
    }<\/code><\/p>\n\n\n\n
    \n\n\n\n
    width: 200px;  
    height: 100px;  
    padding: 10px;  
    margin: 20px;  
    border: 2px solid black;<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    1. width: 200px;<\/code><\/strong><\/h3>\n\n\n\n
      \n
    • Sets the content width<\/strong> of the element to 200 pixels<\/strong>.<\/li>\n\n\n\n
    • It does not include<\/strong> padding, margin, or border.<\/li>\n<\/ul>\n\n\n\n
      2. height: 100px;<\/code><\/strong><\/h3>\n\n\n\n
        \n
      • Sets the content height<\/strong> to 100 pixels<\/strong>.<\/li>\n\n\n\n
      • Like width<\/code>, it does not include padding, margin, or border.<\/li>\n<\/ul>\n\n\n\n
        3. padding: 10px;<\/code><\/strong><\/h3>\n\n\n\n
          \n
        • Adds space inside<\/strong> the element, between the content and the border.<\/li>\n\n\n\n
        • It increases the total size<\/strong> of the element.<\/li>\n\n\n\n
        • Example: If width: 200px<\/code> and padding: 10px<\/code>, the actual width becomes 220px<\/strong> (200px + 10px left + 10px right<\/code>).<\/li>\n<\/ul>\n\n\n\n
          4. margin: 20px;<\/code><\/strong><\/h3>\n\n\n\n
            \n
          • Adds space outside<\/strong> the element, creating separation from other elements.<\/li>\n\n\n\n
          • It does not affect the element\u2019s actual size<\/strong>, only its position.<\/li>\n<\/ul>\n\n\n\n
            5. border: 2px solid black;<\/code><\/strong><\/h3>\n\n\n\n
              \n
            • Adds a 2-pixel thick<\/strong> solid black<\/strong> border around the element.<\/li>\n\n\n\n
            • The border adds to the element\u2019s total size.<\/li>\n<\/ul>\n\n\n\n
              \n\n\n\n
              Total Element Size (Box Model Calculation)<\/strong><\/h3>\n\n\n\n
              By default, the content-box model<\/strong> is used, meaning the total size is calculated as:<\/p>\n\n\n\n
              Total Width<\/strong> = width + left padding + right padding + left border + right border<\/code>
              Total Height<\/strong> = height + top padding + bottom padding + top border + bottom border<\/code><\/p>\n\n\n\n
              For the given example:<\/p>\n\n\n\n
                \n
              • Width<\/strong> = 200px + 10px + 10px + 2px + 2px = 224px<\/code><\/li>\n\n\n\n
              • Height<\/strong> = 100px + 10px + 10px + 2px + 2px = 124px<\/code><\/li>\n<\/ul>\n\n\n\n
                If box-sizing: border-box;<\/code> is applied, then width<\/code> and height<\/code> include padding and border, keeping the total size fixed.<\/p>\n\n\n\n
                Example<\/p>\n\n\n\n
                .box {<\/p>\n\n\n\n
                    width: 200px;<\/p>\n\n\n\n
                    height: 100px;<\/p>\n\n\n\n
                    padding: 10px;<\/p>\n\n\n\n
                    margin: 20px;<\/p>\n\n\n\n
                    border: 2px solid black;<\/p>\n\n\n\n
                    background-color: black;<\/p>\n\n\n\n
                }<\/p>\n\n\n\n
                \ud83d\udccc This will create a box with:<\/p>\n\n\n\n
                black background
                200px width and 100px height (content area)
                10px padding inside
                20px margin outside
                2px solid black border<\/p>\n\n\n\n
                Conclusion<\/strong><\/h2>\n\n\n\n
                CSS is essential for designing modern websites, improving user experience, and ensuring responsive layouts. By using external CSS, following best practices, and leveraging properties effectively, you can create visually appealing and accessible web pages.<\/p>\n","protected":false},"excerpt":{"rendered":"
                What is CSS? CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML documents. It defines how elements appear on a webpage, including…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-cascading-style-sheet"],"_links":{"self":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88"}],"version-history":[{"count":0,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/88\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}