CSS (CASCADING STYLE SHEETS)
What is CSS?
CSS is a language used to style a web page. It describes how HTML pages should displayed on media or websites.
What are the uses of CSS?
CSS is used to define the styles for your web pages , including deisgns, layout variations, colors, variations etc.
CSS sytnax:
- A css syntax csonsists of two blocks declaration block and selector block.
- selector block points to the html you want to design or style
- The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
p {
color: red;
text-align: center;
}
In this code p is selector part which indicates the html element to style. and color and text-align are property. red and cente are property value.
CSS Selectors: These are used to find the HTML elements to style.
Simple selectors: Selects based on id, class
- id selector: The id selector uses the id attribute of an HTML element to select a specific element. To select an element with a specific id, write a hash (#) character, followed by the id of the element.
- Class Selector: The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id= “first name” |
| .class | .intro | Selects all elements with class=”intro” |
| element.class | p.intro | Selects only <p> elements with class=”intro” |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element.element | div, p | Selects all <div> elements and all <p> elements |
How to add CSS?
There are 3 ways to add CSS
- External CSS: With an external css we change the look of the website with changing one file. External CSS are defined inside the <link> tag.
- 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.
- 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.
CSS Comments: Comments are used to explain the code. These are used for later purpose to correct the source code. These comments are given inside the <style> attribute and starts with /* and ends with */.
CSS Borders:
CSS Borders allow to specify the style, width and color of the elements border
- dotted- Defines a dotted border
- dashed – Defines a dashed border
- solid – Defines a solid border
- double – Defines a double border
- groove- Defines a 3D grooved border. The effect depends on the border-color value
- ridge – Defines a 3D ridged border. The effect depends on the border-color value
- inset – Defines a 3D inset border. The effect depends on the border-color value
- outset – Defines a 3D outset border. The effect depends on the border-color value
- none – Defines no border
- hidden – Defines a hidden border