Introduction to CSS, What is CSS?
The CSS stands for Cascading Style Sheets. It is used to control the appearance and layout of web pages. CSS works by targeting HTML elements and applying styles like colors, fonts, margins, paddings and more things.
Why use CSS?
- The CSS Cascading Style Sheet language is used to style a web page or you can style entire website it depends on you.
Basic CSS Syntax
CSS syntax consists of selectors and declarations:
- The Selector specifies which HTML elements to style. Selects the html element like
<p>tag<h1>tag or other tag. - The Declaration is style you want to apply, consisting of a property and a value. It depends on you that what style you want to apply on the selected element like color, font size, font family or anything else.
Look out the selector and declaration below.
- The
h1tag is the selector it targets all<h1>elements. - The
color,font-size, andtext-alignare properties, andblue, 24px, andcenterare their values.
Linking CSS to HTML
Three Ways to Add CSS in Your Site
- The Inline CSS add styles directly inside HTML tags. You do not need to create any other file to store your css code.
<h1 style="color:red;"> hello world </h1>.
Way to add inline CSS in html tags to style elements.
- The Internal CSS write CSS inside a
<style>tag in the HTML document<head>.
Way to add CSS in html file but in separate <style> tag inside the <head> tag to understand the code easily.
- The External CSS link to an external stylesheet using the
<link>tag inside the<head>.
Last but not the least way of adding CSS but into a separate external .CSS file extension and link it to the html page.
CSS external file look like this named mystyle.css .
Link an External CSS file to HTML document.
Follow the Steps Below
- First you need to create a new CSS file called
styles.css. - And Link it to the HTML document using the
<link>tag. - Then Add some basic styles in the
styles.cssfile change the background color of the page.
Linking an external CSS file in html page.
CSS Selectors
Types of CSS Selectors
- The Element Selector targets all elements of a specific type all
<p>tags.p { color: red; }
- The Class Selector targets elements with a specific class. The class selector is written with a dot.
.highlight { background-color: yellow; }
- The ID Selector targets a specific element with an ID. The ID selector is written with a hash (#).
main-title { font-size: 24px; }
- The Universal Selector targets all elements on the page of this sign (*).
{ margin: 0; padding: 0; }
- The Grouping Selectors apply the same styles to multiple selectors by separating them with a comma.
h1, h2, p { color: black; }
The CSS types of selectors.
Styling Text and Fonts
Typography in CSS
- The Font family sets the font for text. You can use system fonts or import custom fonts like Google Fonts, Font Awesome.
- The Font size defines the size of the text of
16pxor1.5em. - The Font weight sets the thickness of the font format as
bold, normal, 100. - The Text align controls the alignment of text as
left, right, center. - The Text color changes the text color using names and types are
HEX, RGB, or HSL values.
CSS typography means font family.
Styling CSS Backgrounds and Borders
Backgrounds
You can style the background using colors or images.
- The background-color property is used to set a background color.
- The background-image property allows you to add an image in the background.
CSS Color Backgrounds
CSS Image Backgrounds
CSS Borders
- The border property defines a border around an element. You can specify border width, style, and color.
Types of all CSS borders.
Very helpful tutorial
Wow, wonderful blog layout! How lengthy have you ever been blogging for?
you maje running a blog look easy. The full look of your site is excellent, let alone thee content!