Introduction To CSS❤
What IS CSS?🤔
CSS Stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on screen on paper or other media. CSS makes work easier, it formats HTML elements and designs them.
CSS can be used to change the look of an entire website by changing just one file.
CSS Syntax or rule set consists of a selector and a declaration block.
In turn the declaration consists of a property and value. A declaration block can consist of more than one declaration separated and ended by semi colons.
Forms Of CSS Selectors
- Element: This selects elements based on the element name.
- ID Selector: uses the I’d attribute of an HTML element to select a specific element.
- CLASS Selector: selects elements with a specific class attribute.
- Group Selectors: are used when there are same style definitions for different elements.
Ways Of Inserting CSS:
- External
- Internal
- Inline
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
Example
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
Inline CSS
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>
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
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:
Explanation of the different parts:
- Content — The content of the box, where text and images appear
- Padding — Clears an area around the content. The padding is transparent
- Border — A border that goes around the padding and content
- Margin — Clears a area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
Both margin and padding have four sides four property values
Which are:
- Auto
- length
- percentage (%)
- inherit
LINKS
Links can be styled differently depending on their state.
The four States for styling links;
- a:link
- a:visited
- a:hover
- a: active
When setting the style for several link states it is compulsory to follow the order rule indicated above.
To learn more about CSS, you can visit W3Schools.
