Learn and Explore CSS
Sheikh Mohammad Nazmul Hasan
Posted on July 5, 2023
Type of CSS
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
- External CSS
- Internal CSS
- Inline CSS
Inline CSS
Use style =”” attribute
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
Example:
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Internal CSS
Use tag to write</strong></p> <p>An internal style sheet may be used if one single HTML page has a unique style.</p> <p>The internal style is defined inside the <style> element, inside the head section.</p> <p><strong>Example:</strong></p> <p>Internal styles are defined within the <style> element, inside the <head> section of an HTML page:<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="cp"><!DOCTYPE html></span> <span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"><style></span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="no">linen</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="no">maroon</span><span class="p">;</span> <span class="nl">margin-left</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="p">}</span> <span class="nt"></style></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><h1></span>This is a heading<span class="nt"></h1></span> <span class="nt"><p></span>This is a paragraph.<span class="nt"></p></span> <span class="nt"></body></span> <span class="nt"></html></span> </code></pre></div> <p></p> <h3> <a name="external-css" href="#external-css" class="anchor"> </a> <strong>External CSS</strong> </h3> <p>Ues .css file to write </p> <p>With an external style sheet, you can change the look of an entire website by changing just one file!</p> <p>Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.</p> <p><strong>Example:</strong></p> <p>External styles are defined within the <link> element, inside the <head> section of an HTML page:<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="cp"><!DOCTYPE html></span> <span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"mystyle.css"</span><span class="nt">></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><h1></span>This is a heading<span class="nt"></h1></span> <span class="nt"><p></span>This is a paragraph.<span class="nt"></p></span> <span class="nt"></body></span> <span class="nt"></html></span> </code></pre></div> <p></p> <h2> <a name="css-selectors" href="#css-selectors" class="anchor"> </a> CSS Selectors: </h2> <table><thead> <tr> <th>Selectors Name</th> <th>Description</th> </tr> </thead><tbody> <tr> <td>Class selector</td> <td>1). The class selector in CSS is denoted by dot (.) followed by the class name. 2). It is used to select and style multiple HTML element that share the same class. 3). to apply a class to an element, the class attribute is used in the HTML markup. 4) It is recommended to use meaningful class names is improve code readability. 5). Class selector offer a higher level og specificity compared to tag selectors.</td> </tr> <tr> <td>id selector</td> <td>1). The ID selector in CSS is denoted by hash 2) followed by ID name. 2). IT is used to select and style a single unique HTML element on a webpage. 3). To apply an ID to an element, the id attribute is used in the HTML markup. 4). IDs must be unique within a webpage, as duplicate IDs can load to incorrect styles or scripting behavior. 5). ID selectors have a higher specificily compared to class or tag selectors, making them more powerful for targeting specific elements.</td> </tr> <tr> <td>Element selector</td> <td>1). The element selector in CSS targets HTML elements based on their tag name. 2). To use an element selector, simply specify the element’s tag name in the CSS. 3). Element selectors have lower specificity compared to class or ID selectors.</td> </tr> <tr> <td>Universal selector</td> <td>1). The universal selector in CSS is denoted by an astrisk (*). 2). It selects and applies styles to all elements on a webpage. 3). The universal selector has the lowest specificity, meaning it has the least weight in overriding other selectors. 4). It can be used to apply common styles to all elements, such as setting default margins or padding.</td> </tr> <tr> <td>Grouping selector</td> <td>1). The grouping selector in CSS allows you to select and apply style to multiple selectors at ones. 2). It helps you avoid repeating styles for indicidual selectors by combibing them into a single rule. 3). The grouping selector is denoted by a comma (,) between the selectors. 4). Selectors separated by commas withn yhe grouping selector will share the same style.</td> </tr> <tr> <td>Attributes selector</td> <td>1). Attribute selectors in CSS allow you to target elements based on their attributes and attribute values. 2). The basic syntax of an attribute selector is [attribute], where “attribute” is the name of the attribute you want to select. 3). Attribute selectors are useful for selecting elements with specific attribute values, such as input fileds with a specific type, links with a specific target etc.</td> </tr> </tbody></table> <h2> <a name="id-vs-class" href="#id-vs-class" class="anchor"> </a> ID VS ClASS </h2> <table><thead> <tr> <th>ID</th> <th>CLASS</th> </tr> </thead><tbody> <tr> <td>Each element can have only one ID</td> <td>You can use the same class on multiple elements.</td> </tr> <tr> <td>an ID selector is a name preceded by a hash character (”#”)</td> <td>a class selector is a name preceded by a full stop (”.”)</td> </tr> <tr> <td></td> <td></td> </tr> </tbody></table> <h2> <a name="css-box-model" href="#css-box-model" class="anchor"> </a> <strong>CSS Box Model</strong> </h2> <p>In CSS, the term "box model" is used when talking about design and layout.</p> <p>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 box model:</p> <p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0efcceef-23cc-4581-902a-da6f7c864bb9/Untitled.png" alt="Untitled"></p> <p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/182ce02c-7fe5-4511-af20-a2e9224723e2/Untitled.png" alt="Untitled"></p> <p>Explanation of the different parts:</p> <ul> <li><strong>Content</strong> - The content of the box, where text and images appear</li> <li><strong>Padding</strong> - Clears an area around the content. The padding is transparent</li> <li><strong>Border</strong> - A border that goes around the padding and content</li> <li><strong>Margin</strong> - Clears an area outside the border. The margin is transparent</li> </ul> <p>The box model allows us to add a border around elements, and to define space between elements.</p> <p><strong>Example:</strong></p> <p>Demonstration of the box model:<br> </p> <div class="highlight"><pre class="highlight html"><code>div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } </code></pre></div> <p></p> <h2> <a name="css syntax" href="#css syntax" class="anchor"> </a> <strong>CSS Syntax</strong> </h2> <p>A CSS rule consists of a selector and a declaration block.</p> <p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/610426f0-fe11-4490-9b82-f4bbf068544c/Untitled.gif" alt="Untitled"></p> <p>The selector points to the HTML element you want to style.</p> <p>The declaration block contains one or more declarations separated by semicolons.</p> <p>Each declaration includes a CSS property name and a value, separated by a colon.</p> <p>Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.</p> <p><strong>Example:</strong></p> <p>In this example all <p> elements will be center-aligned, with a red text color:<br> </p> <div class="highlight"><pre class="highlight html"><code>p { color: red; text-align: center; } </code></pre></div> <p></p> <p><strong>Example Explained:</strong></p> <ul> <li><code>p</code> is a selector in CSS (it points to the HTML element you want to style: <p>).</li> <li><code>color</code> is a property, and <code>red</code> is the property value</li> <li><code>text-align</code> is a property, and <code>center</code> is the property value</li> </ul> <h2> <a name="css-background-position" href="#css-background-position" class="anchor"> </a> CSS Background Position </h2> <p>The background-position property is used to control the position of an image in the background.</p> <p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/041da70f-7284-4a08-a6a5-6e551eeea912/Untitled.png" alt="Untitled"></p> <h2> <a name="css-margin-and-padding" href="#css-margin-and-padding" class="anchor"> </a> CSS Margin and Padding </h2> <p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6fec3fb0-642a-4df0-8248-5f4ec6015107/Untitled.png" alt="Untitled"></p> <h2> <a name="css-maxminheight" href="#css-maxminheight" class="anchor"> </a> CSS max/min-height </h2> <h3> <a name="maxheight" href="#maxheight" class="anchor"> </a> max-height </h3> <p>max-height is a CSS property that allows you to set the maximum height that an element can have.</p> <p>It restricts the element's height from exceeding the specified value</p> <p>For example, if you set max-height: 200px; on a <div> element, it will not grow beyond a height of 200 pixels, regardless of its content.</p> <h3> <a name="minheight" href="#minheight" class="anchor"> </a> min-height </h3> <p>min-height is a CSS property that allows you to set the minimum height that an element should have.</p> <p>It ensures that the element's height is at least the specified value</p> <p>set max-height: ement, it will not t of 200 pixels, tent.</p> <p>For example, if you set min-height: 100px; on a <div> element, it will be at least 100 pixels tall, even if its content is smaller.</p> <h2> <a name="css-boxshadow" href="#css-boxshadow" class="anchor"> </a> CSS box-shadow </h2> <p><strong>box-shadow is a CSS property that allows you to add a shadow effect to an element’s box ( such as a div, button ot image)</strong></p> <p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8311cc8d-4653-4556-8411-6acb7f309136/Untitled.png" alt="Untitled"></p> <h2> <a name="css-borderradius" href="#css-borderradius" class="anchor"> </a> CSS border-radius </h2> <p><strong>border-radius is a CSS property that allows you to create rounded corners on an element’s border</strong></p> <p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3e4e4a53-f65e-40a6-842b-b874f7481936/Untitled.png" alt="Untitled"></p> <h2> <a name="display-inline-block-inlineblock" href="#display-inline-block-inlineblock" class="anchor"> </a> Display: inline, block, inline-block </h2> <p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/208963be-a8af-42a4-9211-1f332560103d/Untitled.png" alt="Untitled"></p> <h1> <a name="practice-task" href="#practice-task" class="anchor"> </a> Practice Task </h1> <ul> <li>[x] <strong>Task 1</strong></li> </ul> <h3> <a name="css-types-challenge" href="#css-types-challenge" class="anchor"> </a> CSS types Challenge: </h3> <ul> <li>Create an HTML document with three paragraphs.</li> <li>Apply CSS styles to each paragraph using inline, internal and external.</li> <li>[ ] <strong>Task 2</strong></li> </ul> <h3> <a name="text-styling-challenge" href="#text-styling-challenge" class="anchor"> </a> <strong>Text styling Challenge:</strong> </h3> <ul> <li>Design a webpage with a heading, paragraph and a list.</li> <li>Apply CSS styles to change the text color, alignment, font-size, font-family and font style for different elements.</li> </ul> <h2> <a name="task-3" href="#task-3" class="anchor"> </a> <strong>Task 3</strong> </h2> <h3> <a name="selectors-challenge" href="#selectors-challenge" class="anchor"> </a> Selectors Challenge: </h3> <ul> <li>Create an HTML document with various elements, including heading, paragraphs and divs.</li> <li>Use different CSS selectors (id, class, universal, tag) to apply unique styls to specific elements.</li> </ul> <h2> <a name="task-4" href="#task-4" class="anchor"> </a> <strong>Task 4</strong> </h2> <h3> <a name="background-styleing-challenge" href="#background-styleing-challenge" class="anchor"> </a> Background Styleing Challenge: </h3> <ul> <li>Design a webpage with multiple sections/divs.</li> <li>Apply CSS style to set different background color, image, repeats, position and size for each section.</li> </ul> <h2> <a name="task-5" href="#task-5" class="anchor"> </a> <strong>Task 5</strong> </h2> <h3> <a name="borders-challenge" href="#borders-challenge" class="anchor"> </a> Borders Challenge: </h3> <ul> <li>Create a webpage with various elements, such as divs, paragraphs, and images.</li> <li>Apply CSS styles to add borders with different widths, colors, border-radius, and box-shadow effects to the elements.</li> </ul> <h2> <a name="task-5" href="#task-5" class="anchor"> </a> <strong>Task 5</strong> </h2> <ul> <li>Bulid a webpage with different elements (e.g., image, headings, paragraph, buttonss).</li> <li>Apply CSS styles to set the display property to none, hidden, inline, block and inline-block for specific elements.</li> </ul>
Posted on July 5, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
