{"id":9806,"date":"2020-04-09T10:01:49","date_gmt":"2020-04-09T17:01:49","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=9806"},"modified":"2022-08-14T10:48:27","modified_gmt":"2022-08-14T17:48:27","slug":"what-is-css","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/what-is-css\/","title":{"rendered":"What is CSS? An Intro to Cascading Style Sheets"},"content":{"rendered":"\n

CSS stands for Cascading Style Sheets. It controls the visual aspects of web pages, allowing designers to choose fonts, colors, layout, and more. Along with HTML and <\/em>JavaScript<\/em><\/a>, CSS is a part of the fundamental blocks of web development.<\/em><\/p>\n\n\n\n

\n\n\n\n

You may ask yourself, \u201cHave I run into CSS before?\u201d<\/p>\n\n\n\n

The answer is a definite yes. CSS adds style to your website. Without it, you would just see a bland HTML elements with no structure, no colors, and lines of text and images thrown in the mix. That\u2019s not very attractive, is it? CSS steps in to provide your website with that makeover it needs. CSS files turn your web page from a bland document into a work of art.<\/p>\n\n\n\n

So let\u2019s go ahead, get our digital art supplies ready, and begin to paint a pretty picture of our journey into tech by learning about the purpose of CSS.<\/p>\n\n\n\n

What is CSS Exactly?<\/strong><\/h2>\n\n\n\n
\"A
CSS affects various elements in the markup document including colors, fonts, borders, and margins.<\/em><\/figcaption><\/figure>\n\n\n\n

CSS stands for Cascading Style Sheets. It is a styling language that controls many of the visual elements for a web page.<\/p>\n\n\n\n

Before CSS, developers had a tough time working with HTML code to format their content in a document, and even then the content was very limited. HTML only was intended to be only a markup language to link various online documents together. HTML was never meant for formatting a page.<\/p>\n\n\n\n

When HTML 3.2 presented style formatting tags for properties like fonts, it caused difficulties for developers. Programmers would spend a long and expensive process coding lengthy pages of HTML code. This made it difficult to find errors within the HTML syntax if things went wrong in the web page.<\/p>\n\n\n\n

The World Wide Web Consortium (W3C)<\/a> saw this and adopted CSS to settle the issue. They later went on to create the CSS Working Group dedicated to developing the version of CSS we have today.

CSS did HTML, and the tech world in general, a favor and removed all style formatting HTML tags from the page and replaced them with lists of rules called style sheets.<\/p>\n\n\n\n

If you think of the development of a house or any type of building, HTML represents the basic structure of the building: the walls, stairs, and doors. CSS would represent the paint, decorations, and style of the building. While HTML provides your base structure, CSS provides the style of your webpage\u2014 making it stand out among other webpages on the Internet.<\/p>\n\n\n\n

The style includes the background colors, layout, and even the display style for various types of devices. You can even add animations with CSS keyframes<\/a>. Additionally, CSS is completely separate from HTML and it can be used by any markup language, including XHTML (a variant of HTML), and XML (Extensible Markup Language).<\/p>\n\n\n\n

How Does CSS Work?<\/strong><\/h2>\n\n\n\n

CSS brings style to your web pages by interacting with individual HTML components called elements. The language enables the separation of presentation and content. This improves accessibility and performance in web page processing. It also provides more flexibility across many pages and reduces repetition and difficulty in the HTML code. Developers style their CSS through a word processor or text editor and link the CSS to HTML in three different ways.<\/p>\n\n\n\n

External<\/strong> style sheets, the most recommended method, are saved as a separate file from the HTML document with a .css extension. Then every HTML page will pull the style rules from just one CSS reference. This method is recommended if you have several rules that can span across many pages on your website. To use your external style sheet, you include a link tag in your header section of the HTML file that sources to your .css file.<\/p>\n\n\n\n

Internal<\/strong> style sheets are included within the header section of your HTML file but within a style tag. Internal style sheets are recommended if you have a single page with a couple of rules that are unique to the other pages on your website.<\/p>\n\n\n\n

Inline<\/strong> style sheets are within the elements in your HTML file. These are small segments of CSS written into the code. Inline style sheets should only be used when the style is a single coding instance in your entire webpage.
<\/p>\n\n\n\n

How Do I Use CSS?<\/strong><\/h2>\n\n\n\n
\"A
CSS can affect several pages of a website with just one file. This includes declaring styles for different devices and screen sizes.<\/em><\/figcaption><\/figure>\n\n\n\n

CSS syntax is simple and consists of a plain text document called a style sheet. Style sheets separated into blocks of code are called rules. A CSS rule consists of two parts to work with the HTML code.
<\/p>\n\n\n\n

The first part of a CSS rule is the selector. Selectors declare which elements in the HTML document the developer wants to style. You can call a rule with a selector that applies to paragraphs (identified with the \u2018p\u2019 tag) and it will affect all paragraphs within your HTML document.
<\/p>\n\n\n\n

Selectors apply to the HTML in two ways. You either apply your styles to all elements on the page like mentioned earlier or apply it to certain ones within a page through attributes. CSS selectors for HTML attributes are identified in two forms: id and class.
<\/p>\n\n\n\n

The id affects a unique identifier within the document. They would be marked with a \u2018#\u2019 symbol. The id cannot share the same identifying name with another id in the document. If you would like to use the same identifier name for multiple elements in the document, you would use the class attribute. The \u2018.\u2019 symbol represents the class attribute you want to style in your CSS code. Both attributes are case-sensitive and start with their identifying symbols and letters. They can include alphanumeric characters, hyphens, and underscores in their names.
<\/p>\n\n\n\n

The second part of the CSS rule is the declaration block. This block is a list of declarations consisting of a property, a value, and a colon between the two items. These declarations are surrounded by curly brackets or braces within the CSS rule. 
<\/p>\n\n\n\n

Properties are items that are affected in the selector. These include, but are not limited to, the font size, color, layout, and margins. Properties are specified in the CSS standard and have a set of possible values. Values are the settings that you want to insert into your properties to change their presentation on the HTML page. Values can be a wide range of keywords, numerical values, or measurements.
<\/p>\n\n\n\n

If many declarations are included in a block, a semicolon must separate each declaration for them to work in the rule.
<\/p>\n\n\n\n

Now that we know what a CSS rule is and what it includes we need to learn the running order of CSS. This is where the \u201ccascading\u201d in CSS comes in.
<\/p>\n\n\n\n

You can include several rules across many style sheets, but what if they conflict with each other? When this occurs, the styles will cascade into new styles by using a priority order to define which one the HTML code answers to. The priority levels are:
<\/p>\n\n\n\n